Clear the value of bootstrap-datepicker

You can use jQuery to clear the value of your date input.

For exemple with a button and a text input like this :

<input type="text" id="datepicker">
<button id="reset-date">Reset</button>

You can use the .val() function of jQuery.

$("#reset-date").click(function(){
    $('#datepicker').val("").datepicker("update");
})

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.

Current version 1.4.0 has clearBtn option:

$('.datepicker').datepicker({
    clearBtn: true
});

Besides adding button to interface it allows to delete value from input box manually.

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. :-)