在 bootstrap-datepicker 中将日期设置为最初为空

Question

我在我的网站中使用bootstrap-datepicker。日期选择器将用于定义搜索过滤器。我需要 datepicker 输入元素的初始值为空，所以它不会为搜索结果引入日期过滤器。当用户点击链接到 Datepicker 的文本输入时，Datepicker 弹出框应该选择下个月的第一天。

问题：如果我要设置一个初始日期（如下所示），文本输入将填充今天的日期，这不是我想要的。但是，如果我没有设置初始日期，日期选择器将显示 1970 年代。我该怎么办？

类似于：jQueryUI Datepicker 的演示

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 代码

<input type="text" id="listing_filter_available" class="input-small" placeholder="Date Available" />

尝试失败

点击文本输入 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();
    });

});

Answer 1

有一个更简单的方法来做到这一点！设置值

$('#listing_filter_available').datepicker();
$('#listing_filter_available').datepicker('setValue', nextMonth);

设置空白值

$('#listing_filter_available').datepicker();
$('#listing_filter_available').val('');

Answer 2

我刚刚遇到了一个非常相似的用例。通过对 bootstrap-datepicker.js 进行一些调整，我相信我已经成功了。

您需要在两个地方编辑脚本。

对于日期字段，我正在检查日期（this.date）是否设置为 Unix 开始日期（例如空白日期）。如果是这样，请退出并将该字段留空。

（行：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

对于下拉日历，我还要检查日期 (this.date) 是否设置为 Unix 开始日期。如果是这样，请将日期设置为今天。我这样做是为了当用户点击日期字段时，它会显示当前月份，而不是 1970 年 2 月。

（行：144 - 大约）

填充：函数（）{

      //  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 

我相信这就是你需要做的。我刚刚在我的解决方案中实现了这一点，所以如果有人发现任何问题或有更好的建议，我很乐意听到。

Answer 3

我遇到了类似的问题，这对我有用。

$(".date-picker").datepicker("setDate", "");

所以现在当我的页面加载时默认为空，该字段不是必需的，因此他们不必选择日期，我的控制器会处理，或者他们可以选择一个日期，控制器会处理照顾它。

Answer 4

在最近的 bootstrap 版本中，我使用的是 Bootstrap V3.3.6 和 Boostrap-timepicker V0.5.2，下面的工作很简单：

$('#txtTimepicker').timepicker().val('');

对于我的个人情况，我使用 MVC razor 语法在 val 集中进行条件检查，以区分“添加”和“编辑”，如下所示：

$('#txtTimepicker').timepicker().val('@(Model.Created_Date == null ? "" : Model.Created_Date.ToString("H:mm tt"))');

为了让我的工作按要求 100%，我明确设置了输入值和以下选项：

.timepicker({ format: 'HH:mm:ss', 'defaultTime' : 'value', 'showMeridian': false, 'showSeconds': true, 'disableFocus' : false})

更多选项，请查看源代码文件或this链接

Answer 5

不编辑 bootstrap-datepicker.js 是不可能的

默认日期来自 value=，如果您将其留空，则它对应于 01-01-1970（unix 日期开始）。

即使你在这个问题上付出了巨大的代价，也有太多的工作。

我建议你找一个不同的插件。

我不太确定 jQuery UI datePicker，因为它与 twitter boostrap https://github.com/twitter/bootstrap/issues/156

不兼容

Answer 6

我正在使用 bootstrap v3.1.1 和

$('#listing_filter_available').datepicker('setValue', nextMonth);

对我不起作用。

你必须使用

$('#listing_filter_available').datepicker('setDate', nextMonth);

填充日期选择器控件

Answer 7

最新版本

$("input[type=date]").datepicker({ defaultViewDate: {} });

来源：http://bootstrap-datepicker.readthedocs.io/en/latest/options.html#defaultviewdate

Answer 8

我遇到了同样的问题，我想出了这个解决方法，我做了一个函数来检索日期：

getDate: function (input) {
  if ($(input).val() == '') {
    return '';
  }

  return $(input).data('datepicker').date;
}

注意： 我正在尝试标准化每个 getter 和 setter 为了将来有可能更改日期选择器插件

Answer 9

如果您找不到此类功能，请不要编辑源代码。放聪明点。查找 CSS 类 'active' 并动态删除它或覆盖样式表中的规则。

例如，覆盖此规则（为您的日期选择器使用更强的选择器）：

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

或者动态删除这个类，使用js。

Answer 10

这个是我最喜欢的

$('#datetimepicker').datetimepicker({
   defaultDate:'',     
});