Clear the value of bootstrap-datepicker

问题

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 the datepicker when a button is clicked. I have checked the API but cannot find anything on clearing/resetting the datepicker. Any help is welcome

回答1:

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");
})

回答2:

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.

回答3:

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.

回答4:

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

回答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

回答6:

You can use this syntax to reset your bootstrap datepicker

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

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

回答7:

I know its too late to answer, but in my scenario below code was not working.

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

here is my solution.

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

I did clear datepicker value first then removed datepicker and again reinitialize datepicker. its resolved my problem.

回答8:

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);
},

来源：https://stackoverflow.com/questions/22196162/clear-the-value-of-bootstrap-datepicker

标签

javascript

twitter-bootstrap

datepicker