20

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

});
4

10 回答 10

11

有一种更简单的方法可以做到这一点！设置值

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

设置空白值

$('#listing_filter_available').datepicker();
$('#listing_filter_available').val('');
于 2013-11-06T17:00:09.800 回答
7

我刚刚遇到了一个非常相似的用例。通过对 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

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

于 2013-01-10T18:02:31.397 回答
3

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

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

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

于 2014-10-31T22:14:55.670 回答
3

在最近版本的 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})

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

于 2016-04-06T12:33:14.290 回答
2

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

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

即使你在这个问题上投入了大量的赏金，也有太多的工作。

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

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

于 2012-06-19T21:22:25.920 回答
2

我正在使用 bootstrap v3.1.1 和

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

对我不起作用。

你必须使用

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

填充日期选择器控件

于 2014-07-03T04:37:36.197 回答
2

对于最新版本

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

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

于 2016-11-09T10:44:53.523 回答
1

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

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

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动态删除此类。

于 2015-01-25T18:56:33.370 回答
1

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

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

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

注意：我正在尝试标准化每个 getter 和 setter，以便将来有可能更改 datepicker 插件

于 2014-04-29T14:30:11.110 回答
0

这个是我最喜欢的

$('#datetimepicker').datetimepicker({
   defaultDate:'',     
});
于 2019-02-12T13:00:04.753 回答