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
This question is related to
javascript
twitter-bootstrap
datepicker
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.
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);
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.
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);
},
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.
you have to do it in that way:
$('#datepicker').datepicker('clearDates');
You can use this syntax to reset your bootstrap datepicker
$('#datepicker').datepicker('update','');
reference http://bootstrap-datepicker.readthedocs.org/en/latest/methods.html#update
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. :-)
Source: Stackoverflow.com