jQuery Bootstrap 3 DatePicker - 如何在不重置选择器配置的情况下重置所选日期?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/31003648/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 3 DatePicker - How to reset selected date without resetting the picker configuration?
提问by Alex
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.
我正在尝试在单击按钮时重置所选日期,但到目前为止我只能清除该input
元素,而没有选择器上的实际日期。以下代码重置了所有内容,包括配置和日期,因此显然不是我需要的。
$('#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.
详细说明:用户只能选择从当天算起 7 天后的日期。还有一个按钮使用户可以从选择器中清除所选日期,然后选择一个新日期。现在,清除功能只能从选择器中清除输入元素(而不是选择器元素中的实际日期),或者使用选择器配置清除选择(例如 startDate:“+7d”。我想只清除选定的日期,而不重置所有内容。
This is what I came up with so far:
HTML:
到目前为止,这是我想出的:
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:
jQuery:
$(document).ready(function() {
$("#clear").click(function(){
$('#datepick').val(" ").datepicker({startDate: "+7d"});
});
$('#myDatepicker').datepicker({
startDate: "+7d",
});
$('#myDatepicker').on('changeDate', function(e){
$(this).datepicker('hide');
});
});
回答by yoavmatchulsky
You need to get the current datePicker
instance and call setDate(null)
on it. you can do it like this:
您需要获取当前datePicker
实例并调用setDate(null)
它。你可以这样做:
$("#clear").click(function(){
$('#myDatepicker').data('datepicker').setDate(null);
});
updated fiddle: http://jsfiddle.net/4L6fhjLf/2/
更新小提琴:http: //jsfiddle.net/4L6fhjLf/2/
回答by Dirk Vermeer
$('#myDatepicker').data('DateTimePicker').date(null);
回答by SMAG
For some reason neither of the above examples worked for me, but the following did:
出于某种原因,上述示例都不适合我,但以下内容确实适用:
$('#myDatepicker').data('DateTimePicker').clear(); // clears input value
which is effectively the same as Dirk Vermeer'sanswer which did not work for what I was looking for.
这实际上与德克·维米尔( Dirk Vermeer) 的答案相同,后者对我所寻找的内容不起作用。
I needed to also change the viewMode
to start the picker process over, in my case this was decades you may need a different viewModeoption:
我还需要更改viewMode
以重新启动选择器过程,在我的情况下,这已经过去了几十年,您可能需要一个不同的viewMode选项:
$('#myDatepicker').data('DateTimePicker').clear().viewMode('decades')