Bootstrap 3 Datepicker v4-设置默认日期

Question

im使用此日期时间选择器http://eonasdan.github.io/bootstrap-datetimepicker/在我的编辑表单中。我无法在此日期时间选择器中从我的可变日期设置默认值。如果我在input元素上使用$('#edit_cost_date').val(json[0]['date']);，那么输入中的值是正确的，但如果我打开datetimepicker，我会发现标记的不是输入中的日期，而是实际日期。

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

Answer 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]）

获取newDate字符串、Date、moment、null参数，并将组件模型当前时刻设置为该字符串。传递null值将取消设置组件模型的当前时刻。newDate参数的分析是使用具有options.format和options.useStrict组件配置的矩库进行的。

投掷

TypeError-如果无法解析newDate

发射

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

Answer 2

正如John Washam的回答中所提到的，文档明确指出date函数接受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库是datepicker工作所必需的，因此可以使用它来解析任何字符串，并直接将结果提供给日期函数。

Answer 3

这对我有效

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

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

其文档defaultDate值接受：日期、时刻、字符串

Answer 4

设置这种脾气小的控制有一些真正的麻烦。首先，删除输入控件上的任何ngModal绑定表达式。这些会破坏您设置和显示默认值的尝试。相反，当你需要的时候，可以使用@ViewChild来获取值。其次，如果你的控件将位于初始加载期间不可见的模式弹出组件中，你可能会遇到更多问题。在显示控件之前，我永远无法使element.data（"DateTimePicker"）/eelement.date（"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属性中获取值。