Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bootstrap 3 DatePicker - How to reset selected date without resetting the picker configuration?

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

});
like image 464
Alex Avatar asked Jun 23 '15 13:06

Alex


1 Answers

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/

like image 169
yoavmatchulsky Avatar answered Oct 03 '22 04:10

yoavmatchulsky