Set datatable editor datetime field max and min date

Set datatable editor datetime field max and min date

JerryhXuJerryhXu Posts: 7Questions: 3Answers: 0

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

This question has accepted answers - jump to:

Answers

  • allanallan Posts: 52,276Questions: 1Answers: 7,963 Site admin
    Answer ✓

    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

  • JerryhXuJerryhXu Posts: 7Questions: 3Answers: 0

    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

  • allanallan Posts: 52,276Questions: 1Answers: 7,963 Site admin
    edited August 2018

    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

  • JerryhXuJerryhXu Posts: 7Questions: 3Answers: 0

    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

  • allanallan Posts: 52,276Questions: 1Answers: 7,963 Site admin

    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

  • JerryhXuJerryhXu Posts: 7Questions: 3Answers: 0
    edited August 2018

    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

  • allanallan Posts: 52,276Questions: 1Answers: 7,963 Site admin
    Answer ✓

    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

This discussion has been closed.