Question

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

问题：如果我要设置初始日期（如下所示），文本输入将填充今天的日期，这不是我想要的。但是，如果我没有设置初始日期，则datepicker将显示20世纪70年代。我该怎么办？

类似于：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

时，

不会弹出Datepicker

$(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开始日期（.e.g空白日期）。如果是这样，请退出并将该字段留空。

（第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 - 约）

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

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

Answer 3

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

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

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

Answer 4

在最新版本的bootstrap 中，我使用的是Bootstrap V3.3.6＆amp; 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 date start）。

即使你在这个问题上放了一大笔钱，也有太多的工作。

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

我对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);

填充datepicker控件

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

注意：我正在努力标准化每个吸气剂和二传手为了有可能在将来更改datepicker插件

Answer 9

如果找不到此类功能，请不要编辑来源。放聪明点。寻找CSS类＆＃39;活跃＆＃39;并动态删除它或覆盖样式表中的规则。

例如，覆盖此规则（对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);
}

或使用js动态删除此类。

Answer 10

试试这个...

http://aymkdn.github.com/Datepicker-for-Bootstrap/

Answer 11

这是我的最爱

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

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

11 个答案: