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

Posted 2023-02-22

【中文标题】在 bootstrap-datepicker 中将日期设置为最初为空

【英文标题】：Set date to be initially empty in bootstrap-datepicker

【发布时间】：2012-06-21 20:30:28

【问题描述】：

我在我的网站中使用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();
    );

);

【问题讨论】：

我怀疑这个问题与当前版本的 Twitter bootsrap datepicker 有关。很想听听您使用的是哪个版本。 AFAIK 在输入字段上初始化 datepicker 不再给它任何默认值。这让我觉得现在理想的解决方案是升级到某个版本.. 至少 1.3.1 版本似乎不需要任何疯狂的摆弄来完成这项工作。

【参考方案1】：

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

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

设置空白值

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

【讨论】：

如果不起作用：这取决于您在哪里使用 $('#listing_filter_available').val('');在关闭父 function() 块之前使用它。

【参考方案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 

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

【讨论】：

您现在需要将语言添加到 formatDate：DPGlobal.formatDate(this.date, this.format, this.language)。此外，最好将 unix 日期设置为 new Date("1970-01-01T00:00:00Z") 这样它就不会被时区调整。

如果有人在以后的版本中寻找这个。在 setValue 函数中，添加代码： if (newDate.length == 0) return false; 它将跳过默认日期。当您需要以空白文本框开头时，这非常适合搜索等用途

【参考方案3】：

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

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

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

【参考方案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链接

【参考方案5】：

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

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

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

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

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

不兼容

【参考方案6】：

我正在使用 bootstrap v3.1.1 和

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

对我不起作用。

你必须使用

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

填充日期选择器控件

【参考方案7】：

最新版本

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

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

【参考方案8】：

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

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

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

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

【参考方案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。

【参考方案10】：

这个是我最喜欢的

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