设置日期初始为空引导日期选择器

我在我的网站中使用了bootstrap-datepicker。日期选择器将用于定义搜索过滤器。我需要datepicker input元素的初始值为空，所以它不会为搜索结果引入日期过滤器。当用户点击链接到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弹出

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

});

来源

2012-06-19 Nyxynyx

我怀疑这个问题是相关的与Twitter bootsrap日期选择器的最新版本。很想听听你使用的是哪个版本。 AFAIK在输入字段上初始化日期选择器不会再给它任何默认值。这让我觉得目前理想的解决方案就是升级到某个版本..至少1.3.1版本似乎并不需要任何疯狂的手段来完成这项工作。 – Timo

我只是遇到了一个非常类似的用例。通过对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 - 约）

填充：函数（）{

 // 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-10 18:02:31

不幸的是，它不能与当前版本一起工作。 – foxx

现在您需要将语言添加到formatDate：DPGlobal.formatDate（this.date，this.format，this.language）。另外最好将unix的日期设置为这个新的日期（“1970-01-01T00：00：00Z”），这样它就不会被时区调整。 –

如果有人在更高版本中查找此内容。在setValue函数内部，添加代码：\t \t if（newDate.length == 0）{ \t \t return false; \t \t}它会跳过默认日期。当你需要一个空白文本框开始搜索时，这非常适用于 –

它不会不进行编辑的引导，datepicker.js

默认日期来自值是可能=而且如果你离开它清空它对应于01-01-1970（unix date start）。

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

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

我不那么肯定了jQuery UI日期选择器，因为有不兼容与Twitter自举https://github.com/twitter/bootstrap/issues/156

来源

2012-06-19 21:22:25 baptme

试试这个...

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

来源

2012-08-22 22:21:44 user1618273

Thnx会试试:) – Nyxynyx

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

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

将一个空值

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

来源

2013-11-06 17:00:09

不适用于我 –

如果不工作：它取决于你在哪里使用$（'＃listing_filter_available'）.val（''） ;在关闭父函数（）块之前使用它。 – sambua

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

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

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

注：我试图标准化每一个吸气和设置器为了有可能在未来更改日期选择器插件

来源

2014-04-29 14:30:11 nrgjack

我与引导V3.1.1工作和

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

并没有为我工作。

你必须使用

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

填充日期选择器控制

来源

2014-07-03 04:37:36

我遇到了类似的问题，这对我的作品。

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

所以现在当我的页面加载默认为空，则不需要现场所以他们没有选择一个日期和我的控制器会照顾那个，或者他们可以选择一个日期和控制器也会照顾它。

来源

2014-10-31 22:14:55

如果您找不到这样的功能，请不要编辑源代码。放聪明点。查找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。

来源

2015-01-25 18:56:33

在最近版本的bootstrap中，我使用的是Bootstrap V3.3.6 & Boostrap-timepicker V0.5。2，下列作品简单地进行：

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

对于我个人来说，我做VAL内部条件检查设置使用MVC剃刀语法“添加”，“编辑”来区分，像这样：

$('#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链接

来源

2016-04-06 12:33:14 EaziLuizi

至于最新版本

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

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

来源

2016-11-09 10:44:53 CodeReaper

设置日期初始为空引导日期选择器

回答

相关问题