Clear the value of bootstrap-datepicker

Question

I am using bootstrap-datepicker from here: https://github.com/eternicode/bootstrap-datepicker

version: 2.3.2

I am having trouble to clear the date values of

Answer 1

I was having similar trouble and the following worked for me:

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

Both method calls were needed, otherwise it didn't clear.

Answer 2

You can use this syntax to reset your bootstrap datepicker

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

reference http://bootstrap-datepicker.readthedocs.org/en/latest/methods.html#update

Answer 3

I came across this thread while trying to figure out why the dates weren't being cleared in IE7/IE8.
It has to do with the fact that IE8 and older require a second parameter for the Array.prototype.splice() method. Here's the original code in bootstrap.datepicker.js:

clear: function(){
    this.splice(0);
},

Adding the second parameter resolved my issue:

clear: function(){
    this.splice(0,this.length);
},

Answer 4

I found the best anwser, it work for me. Clear the value of bootstrap-datepicker:

$('#datepicker').datepicker('setDate', null);

Add value for boostrap-datepicker:

$('#datepicker').datepicker('setDate', datePicker);

Answer 5

Actually it is much more useful use the method that came with the library like this $(".datepicker").datepicker("clearDates");

I recommend you to always take a look at the documentation of the library, here is the one I used for this.

bootstrap-datepicker methods documentation

Answer 6

I came across this thread while trying to clear the date already set. Attempting:

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

produced:

TypeError: t.dpDiv is undefined 
https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js -- Line 8

Thinking that perhaps one needed to include the original Datepicker for bootstrap removes the error, but then causes the original Datepicker widget to appear! - so that's obviously wrong and not needed.

Looking further, the crash in jqueryui is in:

    /* Generate the date picker content. */
_updateDatepicker: function(inst) {
    this.maxRows = 4; //Reset the max number of rows being displayed (see #7043)
    datepicker_instActive = inst; // for delegate hover events
    inst.dpDiv.empty().append(this._generateHTML(inst));
    this._attachHandlers(inst);

and inst.pdDiv does not exist.

Investigating further - I realized that what was needed was:

        $formControl = $duedate.find("input");
        $formControl.val('');
        $formControl.removeData();

Which solved my problem. Note I also needed the $formControl.removeData() otherwise the state of the widget would not be reinitialized to the initial state.

I hope this helps someone else. :-)