Javascript 在 bootstrap-datepicker 中将日期设置为初始为空
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11107102/
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
Set date to be initially empty in bootstrap-datepicker
提问by Nyxynyx
I am using the bootstrap-datepickerin my site. The datepicker will be used to define search filters. I need the initial value of the datepicker input element to be empty, so it will not introduce the date filter for the search results. When the user clicks on the text input linked to Datepicker, the Datepicker popup box should select the first day of next month.
我在我的网站中使用bootstrap-datepicker。日期选择器将用于定义搜索过滤器。我需要 datepicker 输入元素的初始值为空，所以它不会为搜索结果引入日期过滤器。当用户单击链接到 Datepicker 的文本输入时，Datepicker 弹出框应选择下个月的第一天。
Problem:If I were to set an initial date (as shown below), the text input will be populated with today's date which is not what I want. However if i do not set the initial date, the datepicker will show 1970s. What should I do?
问题：如果我要设置初始日期（如下所示），文本输入将填充今天的日期，这不是我想要的。但是，如果我不设置初始日期，日期选择器将显示 1970 年代。我该怎么办？
Similar to: The demo for jQueryUI Datepicker
类似于：jQueryUI Datepicker的演示
JS Code
JS代码
var now = new Date();
var nextMonth = new Date();
nextMonth.setDate(1);
nextMonth.setMonth(now.getMonth() + 1);
var prettyDate = nextMonth.getMonth() + '/' + nextMonth.getDate() + '/' + nextMonth.getFullYear();
$('#listing_filter_available').val(prettyDate);
$('#listing_filter_available').datepicker();
HTML Code
HTML代码
<input type="text" id="listing_filter_available" class="input-small" placeholder="Date Available" />
Failed Attempt
尝试失败
Datepicker does not popup on clicking the text input el
单击文本输入 el 时不会弹出日期选择器
$(function() {
var now = new Date();
var nextMonth = new Date();
nextMonth.setDate(1);
nextMonth.setMonth(now.getMonth() + 1);
var prettyDate = nextMonth.getMonth() + '/' + nextMonth.getDate() + '/' + nextMonth.getFullYear();
$('#listing_filter_available').val(''); // clear the date filter
$('#listing_filter_available').click( function() {
$('#listing_filter_available').val(prettyDate);
$('#listing_filter_available').datepicker();
});
});
采纳答案by Jason Payne
I just encountered a very similar use case. With a couple of tweaks to bootstrap-datepicker.js, I believe I've got it working.
我刚刚遇到了一个非常相似的用例。通过对 bootstrap-datepicker.js 的一些调整，我相信我已经让它工作了。
You'll need to edit the script in two places.
您需要在两个地方编辑脚本。
For the date field, I'm checking to see if the date (this.date) is set to the Unix start date (.e.g blank date). If so, exit and leave the field blank.
对于日期字段，我正在检查日期 (this.date) 是否设置为 Unix 开始日期（例如空白日期）。如果是，请退出并将该字段留空。
(line: 95 - approx)
（行：95 - 大约）
setValue: function () {
// EDIT - Don't setValue if date = unix date start
if (DPGlobal.formatDate(this.date, this.format) == DPGlobal.formatDate(new Date(1970, 1, 1, 0, 0, 0), this.format)) return false;
// END EDIT
For the drop down calendar, I'm also checking to see if the date (this.date) is set to the Unix start date. If so, set the date to today. I'm doing this so that when a user clicks on the date field, it displays the current month as opposed to Feb 1970.
对于下拉日历，我还检查日期 (this.date) 是否设置为 Unix 开始日期。如果是这样，请将日期设置为今天。我这样做是为了当用户单击日期字段时，它会显示当前月份，而不是 1970 年 2 月。
(line: 144 - approx)
（第 144 行 - 大约）
fill: function () {
填充：函数（）{
// EDIT - Set date in fill to today if date is "blank" (eg Unix start date)
var d = ((DPGlobal.formatDate(this.date, this.format) == DPGlobal.formatDate(new Date(1970, 1, 1, 0, 0, 0), this.format))) ? new Date() : new Date(this.viewDate),
// original code
// var d = new Date(this.viewDate),
// END EDIT
I believe that's all you need to do. I've just implemented this in my solution, so if anybody finds any issues or has any better suggestions, I'd love to hear.
我相信这就是你需要做的一切。我刚刚在我的解决方案中实现了这个，所以如果有人发现任何问题或有更好的建议，我很乐意听到。
回答by jshaw.ws
There is a much easier way to do this! To set a value
有一种更简单的方法可以做到这一点！设置一个值
$('#listing_filter_available').datepicker();
$('#listing_filter_available').datepicker('setValue', nextMonth);
To set a blank value
设置空白值
$('#listing_filter_available').datepicker();
$('#listing_filter_available').val('');
回答by James Wilson
I ran into a similar issue and this works for me.
我遇到了类似的问题，这对我有用。
$(".date-picker").datepicker("setDate", "");
So now when my page loads it defaults to empty, the field isn't required so they don't have to pick a date and my controller will take care of that, or they can pick a date and the controller will take care of it as well.
所以现在当我的页面加载它默认为空时，该字段不是必需的，所以他们不必选择日期，我的控制器会处理，或者他们可以选择一个日期，控制器会处理它以及。
回答by EaziLuizi
In Recent versions of bootstrap, I am using Bootstrap V3.3.6 & Boostrap-timepicker V0.5.2, the following works nice and simply:
在 bootstrap 的最新版本中，我使用的是 Bootstrap V3.3.6 和 Boostrap-timepicker V0.5.2，以下效果很好且简单：
$('#txtTimepicker').timepicker().val('');
For my personal case I do a condition check inside the val set using MVC razor syntax to distinguish between an "add" and "edit" like so:
对于我的个人情况，我使用 MVC razor 语法在 val 集内进行条件检查，以区分“添加”和“编辑”，如下所示：
$('#txtTimepicker').timepicker().val('@(Model.Created_Date == null ? "" : Model.Created_Date.ToString("H:mm tt"))');
To make mine work 100% as required, I explicitly set the input value and the following options:
为了使我的工作 100% 按要求工作，我明确设置了输入值和以下选项：
.timepicker({ format: 'HH:mm:ss', 'defaultTime' : 'value', 'showMeridian': false, 'showSeconds': true, 'disableFocus' : false})
For more options, either check the source code file or thislink
有关更多选项，请检查源代码文件或此链接
回答by CodeReaper
For the latest version
对于最新版本
$("input[type=date]").datepicker({ defaultViewDate: {} });
Source: http://bootstrap-datepicker.readthedocs.io/en/latest/options.html#defaultviewdate
来源：http: //bootstrap-datepicker.readthedocs.io/en/latest/options.html#defaultviewdate
回答by Muhammad Waqas Iqbal
I am working with bootstrap v3.1.1 and
我正在使用 bootstrap v3.1.1 和
$('#listing_filter_available').datepicker('setValue', nextMonth);
didn't work for me.
对我不起作用。
You have to use
你必须使用
$('#listing_filter_available').datepicker('setDate', nextMonth);
to populate the datepicker control
填充日期选择器控件
回答by baptme
It's not going to be possible without editing bootstrap-datepicker.js
不编辑 bootstrap-datepicker.js 是不可能的
the default date come from value= and if you leave it empty it correspond to 01-01-1970 (unix date start).
默认日期来自 value=，如果将其留空，则对应于 01-01-1970（unix 日期开始）。
Even if you place a big fat bounty on the question, there's too much work.
即使你在这个问题上悬赏很高，也有太多工作要做。
I recommend you find a different plugin.
我建议你找一个不同的插件。
I'm not so sure about the jQuery UI datePicker since there's incompatibility with twitter boostrap https://github.com/twitter/bootstrap/issues/156
我对 jQuery UI datePicker 不太确定，因为它与 twitter boostrap https://github.com/twitter/bootstrap/issues/156不兼容
回答by nrgHyman
I had the same problem, I came out with this workaround, I made a function to retrieve the date:
我遇到了同样的问题，我提出了这个解决方法，我做了一个函数来检索日期：
getDate: function (input) {
if ($(input).val() == '') {
return '';
}
return $(input).data('datepicker').date;
}
Note : i'm trying to standardize every getter and setter in order to have the possibility to change the datepicker plugin in the future
注意：我正在尝试标准化每个 getter 和 setter，以便将来有可能更改 datepicker 插件
回答by John Smith
If you can not find such functionality, do not edit the sources. Be smart. Look for the CSS class 'active' and remove it dynamically or override the rule in the style sheet.
如果找不到此类功能，请不要编辑源。放聪明点。查找 CSS 类“active”并动态删除它或覆盖样式表中的规则。
For example, override this rule (use stronger selector for your datepicker):
例如，覆盖此规则（为您的日期选择器使用更强的选择器）：
datepicker td.active, .datepicker td.active:hover {
background-color: #006dcc;
background-image: linear-gradient(to bottom, #0088cc, #0044cc);
background-repeat: repeat-x;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
or dynamically remove this class, using js.
或使用 js 动态删除此类。
回答by Hervera
This one is my favourite
这是我的最爱
$('#datetimepicker').datetimepicker({
defaultDate:'',
});
