I'm trying to reset the selected date on button click, but so far I'm only able to clear the input
element, without the actual date on the picker. The following code resets everything, including the configuration and the date, so its obviously not what I need.
$('#datepicker').datepicker('update',''); //resets everything
To elaborate: The user can only select a date 7 days from the current day. There's also a button that enables the user to clear the selected date from the picker, and select a new one. Right now, the clearing function can only clear the input element from the picker (but not the actual date in the picker element), or to clear the selection WITH the picker configuration (ex. the startDate: "+7d". I want to clear only the selected date, without resetting everything.
jsfiddle
This is what I came up with so far:
HTML:
<div id="myDatepicker" class="input-group date">
<input type="text" class="form-control" id="datepick">
<span class="input-group-addon">
<i class="fa fa-calendar"></i>
</span>
<a href="#" id="duration_tag"></a>
</div>
<button type="button" id="clear">clear</button>
jQuery:
$(document).ready(function() {
$("#clear").click(function(){
$('#datepick').val(" ").datepicker({startDate: "+7d"});
});
$('#myDatepicker').datepicker({
startDate: "+7d",
});
$('#myDatepicker').on('changeDate', function(e){
$(this).datepicker('hide');
});
});
You need to get the current datePicker
instance and call setDate(null)
on it. you can do it like this:
$("#clear").click(function(){
$('#myDatepicker').data('datepicker').setDate(null);
});
updated fiddle: http://jsfiddle.net/4L6fhjLf/2/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With