Search code examples
javascriptjquerytempus-dominus-datetimepicker

Tempus Dominus - setting date with javascript


I am using Tempus Dominus Bootstrap-4 datetime picker in a modal window that is shown when user double clicks on a specific row of a table:

$('#btn_modal').on('click', function() {
     // 
     // .... some irrelevenat code, like geting data of a specific row, 
     // .... filling other fields
     //
     $('#modal_datetimepicker').datetimepicker({
        defaultDate: moment(row['date_rkw'], "YYYY-MM-DD"),
        viewMode: 'days',
        format: 'YYYY-MM-DD',
        extraformats: [ 'YYYY-MM-DD' ]
     });
     $('#modal').modal();
});

The date is properly set first time the modal is shown, but next time the modal is shown (selecting other row to edit), it keeps the previous value, completely ignoring the above call with new value to defaultDate.

What is the proper way to set datetimepicker to a specific date? I tried calling destroy with

$('#modal_datetimepicker').datetimepicker('destroy')

or even

$('#modal_datetimepicker').val(row['date_rkw'])

but with no luck.


Solution

  • You can try destroying datepicker when modal is hidden

    $('#modal').modal('show')
    .on('hidden.bs.modal',function(){
      $('#modal_datetimepicker').datetimepicker('destroy')  
    });
    

    Have a look at this reference - https://getbootstrap.com/docs/4.0/components/modal/