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