Bootstrap 3 DatePicker-如何在不重置选择器配置的情况下重置所选日期? [英] Bootstrap 3 DatePicker - How to reset selected date without resetting the picker configuration?

问题描述

我试图在单击按钮时重置选定的日期，但是到目前为止，我只能清除input元素，而没有选择器上的实际日期.以下代码将重置所有内容，包括配置和日期，因此显然不是我所需要的.

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

详细说明:用户只能选择从当前日期起7天的日期.还有一个按钮，使用户可以清除选择器中的选定日期，然后选择一个新日期.现在，清除功能只能清除选择器中的输入元素(但不能清除选择器元素中的实际日期)，或使用选择器配置清除选择(例如startDate:"+ 7d").仅清除所选日期，而无需重设所有内容.

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

这是我到目前为止提出的:
HTML:

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

});

推荐答案

您需要获取当前的datePicker实例并在其上调用setDate(null).您可以这样做:

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

更新的提琴: http://jsfiddle.net/4L6fhjLf/2/

这篇关于Bootstrap 3 DatePicker-如何在不重置选择器配置的情况下重置所选日期?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！