Set datatable editor datetime field max and min date

JerryhXu

Hi,

I am using datatable editor. I use datetime field like this in editor initialization
{
label: "Start: ",
name: "Start",
type: "datetime",
opts: {
minDate: new Date($("#CampaignStartDate").val()),
maxDate: new Date('2018-08-21')
},
}

Now I would like to be able to set the minDate and maxDate dynamically using javascript. How can I do that?

Thank you very much for your help

Jerry

allan

Hi Jerry,

The datetime field type has minDate and maxDate methods available, so you can do something like:

editor.field('Start').minDate( new Date( ... ) );

Regards,
Allan

JerryhXu

That works. Thank you so much.

Follow up question: Can I set the default date dynamically using Javascript as well?

Thank you very much.

Jerry

allan

Yes indeed. The field().def() method can be used (def rather than default since default is a reserved word in Javascript and can sometimes cause issues - the same with remove() rather than delete()).

Allan

JerryhXu

When I use the field().def() function, I got some interesting result. I used the following statement
editor.field('Start').def(defaultDate);
in editor 'PreOpen' event handler. It does not work the first time I open the editor. However, it works second time I open the editor. I can't figure out what is going on. Should I put the code in different event handler?

Thanks.

Jerry

allan

Could you show me the full code you are using please?

Setting the default on preOpen isn't normally what you would what to do, since the default isn't useful in edit or delete modes (it already has a value). initCreate might be more useful depending on what exactly you want to do.

Allan

JerryhXu

Hi, Allan,

Here is the code to set the default date:

editor.on('initCreate', function (e, json, data) {
       var minDate = new Date($('#CampaignStartDate').val());
       var maxDate = new Date($('#CampaignEndDate').val());
       editor.field('Start').def(minDate);
       editor.field('End').def(maxDate);
});

Both 'CampaignStartDate' and 'CampaignEndDate' are datetime html controls outside of datatable editor. It is interesting to see that the first time I click 'add' to open editor, the default dates are not set. But after the first time, then default dates are set properly. I can not figure out why.

Thank you.

Jerry

allan

Got it - its because initCreate is triggered after the default values have been set. The idea being that you can use initCreate to change the values set by the default if needed.

So instead of using field().def() in this case use field().val():

       editor.field('Start').val(minDate);
       editor.field('End').val(maxDate);

Regards,
Allan