jQuery datetimepicker 销毁不起作用

Question

I am trying to destroy a datetimepicker on change of another.

Here is my scenario-

I have two or more datetimepickers in my application. As an example if I change first datetimepicker then it's date is set to .next() datetimepicker as minimum setup of date, Hence for all next datetimepickers.

So this is an ascending orders of dates, No date of previous element is greater than next element.

Here is what I tried-

$('.datetimepicker').datetimepicker(); //initialized datetimepicker for all elements.

$('.datetimepicker').change(function(){
    $(this).next('input.datetimepicker').datetimepicker({
       minDate:$(this).val()
    });
});

My problem is very clear, It never sets the minimum date for next .datetimepicker .

For an instance If the value of first element is 02 Feb 2015 then minimum value of next is also the same.

Hereby, I tried destroying next element first then applied the same-

$('.datetimepicker').change(function(){
   $(this).next('input.datetimepicker').destroy();

   $(this).next('input.datetimepicker').datetimepicker({
       minDate:$(this).val()
   });
});

But it always invokes with the default functionality.

I am using this reference- https://github.com/Eonasdan/bootstrap-datetimepicker

Answer 1

You don't need to destroy the object. You can set the minDate on change of the previous element.

HTML

<input type="text" class="form-control datetimepicker" id="datetimepicker1" />
<input type="text" class="form-control datetimepicker" id="datetimepicker2" />

JS

$('.datetimepicker').datetimepicker();    
$('.datetimepicker').on('dp.change', function (e) {
    var nextElem = $(this).next('input.datetimepicker');
    if (nextElem.length > 0) {
        nextElem.data("DateTimePicker").minDate(e.date)
    }
});

Demo Fiddle

Answer 2

您可以像这样销毁 datetimepicker：

$('.datetimepicker').datetimepicker('remove');