Re-initialize or destroy Bootstrap datepicker dynamically

Question

Is there a way to destroy the Bootstrap datepicker dynamically updating its options like format, beforeShowDay, etc.? I know that the jQuery UI datepicker has a destroy method but Bootstrap's has not. It only has the .('remove') method but its not working.

My goal is to modify the options of the datepicker when changing an input, for example:

$('#employee').change( function() {
   $('#date').datepicker('destroy'); //not working 'cause bootstrap hasnt a destroy method
   $('#date').hide();
});

Then I call the initialize function when the input changes:

function updateCalendar(){
     $('#date').datepicker({
          format:"dd/mm/yyyy",
          beforeShowDay: updateC  //function that modifies the available days to show
     });    
 }

Harned

Answer 1

$('.datepicker').datepicker('remove');

Make sure you have your date picker object in DOM before removing it. Without removing you can hide the calendar and change the format of date and update it .

$('.datepicker').datepicker('update');

Nabokov

it was destroying the datepicker before initializing for the first time. After checking that ir worked :) Thank you! – Harned

remove has been deprecated, use destroy – Altarpiece

If you are using the latest version of the jquery datepicker Instead of $('.datepicker').datepicker('remove'); use $('.datepicker').datepicker('destroy'); – Nabokov

Answer 2

You can Use:

$('#element_id').datepicker('destroy');

I called this just outside my ajax call. My ajax call was creating the datepicker dynamically. After the call was made I destroyed the object.

Like below:

$.ajax({ url: 'my_ business_functions.php',
     data: {func_call: 'my_method_name', my_parameter: my_parameters},
     type: 'post',
     success: function(output) {
         //all my stuffs here
        $('#element_id').val(datepicker_value);
        }
    });
    $('#element_id').datepicker('destroy');

This served my purpose.

Dawndawna

Answer 3

I actually found it more to just remove the element's ID, clone it, and add the ID back in.

Swinford

Yes, it would have been more helpful if you have shown us in sample codes what exactly you did that worked. – Shielashield

Answer 4

Propably you are using datepicker with input btn group, I mean you with a date icon button. So, you should not choose just input element when you want to destroy it and reinit. You should select div has "date-picker", then remove and init again.

Excisable

Answer 5

forceParse: 1

In your options. It will parse the input date field value every time.

Vervet