Bootstrap Datepicker 属性未设置答案

【问题标题】：Bootstrap Datepicker attributes not being setBootstrap Datepicker 属性未设置
【发布时间】：2014-04-21 14:48:11
【问题描述】：

我正在尝试为我的日期选择器设置 startDate 以及 autoclose:true。但是，它不起作用。

你能指出我做错了什么吗？我在 jsfiddle 上有代码 http://jsfiddle.net/alagappanr/9Xek7/

Effective Date:  <input type=text size=10 id=effectivedate maxlength=10 name=efdate><br/>
Expiration Date: <input type=text size=10 maxlength=10 name=exdate id=expirationdate>

我为 datepicker 编写的 JavaScript 如下：

jQuery(function() {
     var efDP = jQuery("#effectivedate");
     var exDP = jQuery("#expirationdate");
     efDP.datepicker("setDate", new Date());
     efDP.datepicker("update");
     exDP.datepicker("setDate", new Date(Date.now()+259200000));
     exDP.datepicker("update");
     exDP.datepicker({autoclose:true});
     efDP.datepicker({
         startDate: new Date(),
         autoclose:true,
         });
     efDP.on("changeDate", function(ev){
             var effectDate = new Date(jQuery("#effectivedate").val());
             jQuery("#expirationdate").datepicker("setDate", new Date(effectDate.getTime()+259200000));
             jQuery("#expirationdate").datepicker("update");
         });
   });

【问题讨论】：

标签： javascript jquery css twitter-bootstrap datepicker

【解决方案1】：

您正在尝试在前几行更新一个不存在的日期选择器。 exDP.datepicker({autoclose:true}); 创建一个新实例。您必须直接设置选项：

jQuery(function() {
    var efDP = jQuery("#effectivedate").datepicker({autoclose:true});
    var exDP = jQuery("#expirationdate").datepicker({autoclose:true});

    efDP.datepicker('setDate', new Date()).datepicker('update');
    exDP.datepicker("setDate", new Date(Date.now()+259200000)).datepicker('update');
    efDP.on("changeDate", function(e){
        exDP.datepicker("setDate", new Date(e.date.getTime() +259200000)).datepicker('update');
    });
});

http://jsfiddle.net/svierkant/9Xek7/7/

请查看文档，看看是否可以重用事件中的对象。在 .on 函数的第一行，您从对象 (.val()) 中获取字符串，并再次从中创建 Date 对象。但是，changeDate event 返回一个 Date 对象（可以重复使用）。更简单的编码，更易读和可维护的代码。

【讨论】：

我不得不分别调用 setDate 和 update 的原因是默认突出显示设置的日期。通过将其更改为 update 而不是 setDate，正在设置值，但不会发生突出显示。
@AlagappanRamu 这听起来像是使用update 的好理由，但也没有必要使用setDate。我已经更新了你的 jsfiddle。
如果没有 setDate，它不会突出显示日期。没有突出显示的屏幕截图：postimg.org/image/fgqpg3ard。高亮屏幕截图：postimg.org/image/n3jt4d613。我不确定是否有办法仅通过使用更新来获得高光...
@AlagappanRamu 你说得对，我错过了！我更新了我的答案和 jsfiddle。我不认为有办法立即做到这一点。 GitHub上的这个问题值得一读：github.com/eternicode/bootstrap-datepicker/issues/575

【解决方案2】：

你应该使用下面的编码风格。

var efDP = jQuery("#effectivedate");
 efDP.datepicker({
         startDate: new Date(),
         autoclose:true,
         });
 efDP.datepicker("update", new Date(Date.now()+259200000));

【讨论】：