Bootstrap 3 Datepicker v4 - 设置默认日期答案

【问题标题】：Bootstrap 3 Datepicker v4 - set default dateBootstrap 3 Datepicker v4 - 设置默认日期
【发布时间】：2015-03-01 15:06:23
【问题描述】：

我在我的编辑表单中使用这个 datetimepicker http://eonasdan.github.io/bootstrap-datetimepicker/。我无法根据我的可变日期在此 datetimepicker 中设置默认值。如果我在输入元素上使用$('#edit_cost_date').val(json[0]['date']);，则输入中的值是正确的，但是如果我打开 datetimepicker，我看到标记的不是输入中的日期而是实际日期。

var date = json[0]['date'];
$(function () {
    $('#datetimepicker-edit-cost').datetimepicker({
        locale: 'cs',
        format:'DD.MM.YYYY'
    });
});

【问题讨论】：

使用这个 defaultDate :date

标签： javascript jquery twitter-bootstrap datetimepicker

【解决方案1】：

您确定您的 date 变量是 Date 对象吗？如果不是，您将需要像这样设置默认日期：

var date = json[0]['date'];
$(function () {
    $('#datetimepicker-edit-cost').datetimepicker({
        locale: 'cs',
        format:'DD.MM.YYYY',
        defaultDate: new Date(date)
    });
});

有关该插件的date 属性的更多信息：

http://eonasdan.github.io/bootstrap-datetimepicker/Functions/#date

日期（[新日期]）

采用newDate字符串，日期，时刻，空参数并将组件模型当前时刻设置为它。传递空值会取消设置组件模型当前时刻。使用带有 options.format 和 options.useStrict 组件配置的矩库来解析 newDate 参数。

投掷

TypeError - 如果 newDate 无法解析

发射

change.dp - 如果 newDate 与当前时刻不同

【讨论】：

【解决方案2】：

正如 John Washam 的回答中也提到的，documentation 明确表示 date function 接受 moment 对象等。
我遇到了同样的情况，尝试了各种方法，但似乎没有任何效果，除了这个想法：
为什么不将 moment 对象提供给 date 函数？

var date = json[0]['date'];
$(function () {
   $('#datetimepicker-edit-cost').datetimepicker({
      locale: 'cs',
      format:'DD.MM.YYYY'
   });
   $('#datetimepicker-edit-cost').data("DateTimePicker").date(moment(date));
});

由于日期选择器工作需要moment.js 库，您可以use it to parse any string，并直接将其结果提供给日期函数。

【讨论】：

bootstrap 3 datepicker 结果证明是我用过的对开发人员最不友好的小部件。

【解决方案3】：

这对我有用

 var date = new Date('11/1/2013');
or  var date2 = '11/1/2013';


        $('#datetimepicker1').datetimepicker({
            locale: 'cs',
            format:'DD.MM.YYYY',
            defaultDate: date

        });

它的documentationdefaultDate 值接受：日期、时刻、字符串

【讨论】：

实际上，我已经尝试过了，但没有成功...总是给我设置今天的日期。我已经尝试过使用不同格式的字符串和时刻

【解决方案4】：

在设置这个喜怒无常的小控件时确实存在一些问题。首先，删除输入控件上的任何 ngModal 绑定表达式。这些将破坏您设置和显示默认值的尝试。相反，请在需要时使用 @ViewChild 获取该值。其次，如果您的控件将位于在初始加载期间不可见的模式弹出组件中，您可能会遇到更多问题。在显示控件之前，我永远无法让 element.data("DateTimePicker") / element.data("datetimepicker") 初始化或变得可用。它根本不存在。第三，设置语言环境。无论格式如何，这似乎对初始显示都有很大帮助。（也许我只是迷信。让它发挥作用似乎像巫毒一样：）

最后，我使用我自己的 datepicker.d.ts 和 datepicker.js 文件设置了正确的 TypeScript 导入，其中包含用于初始化控件的函数。我的 datepicker.js 中的函数如下：

export function datepickerinit(t,d){
    if(!d)
        d=new Date();
    var m=moment(d).format('MM/DD/YYYY');
    var j=$('#'+t);
    if(j.data('DateTimePicker')){
        j.data('DateTimePicker').date(m); //this seems to never be true
    } 
    else {
        j.datetimepicker({
            date:m,
            defaultDate:m,
            format: 'MM/DD/YYYY',
            locale:'en-US',
            viewDate:m
        });
    }
}

我最终得到一个日期选择器，在用户点击之前显示我的默认值。（当它不起作用时，我会在用户单击选择器之前得到一个完全展开的 GMT 日期时间字符串。）

当我的用户单击按钮执行操作时，我会从 ViewChild 的 nativeElement.value 属性中获取值。

【讨论】：