Question

我在编辑表单中使用此datetimepicker http://eonasdan.github.io/bootstrap-datetimepicker/。我无法从我的变量日期在此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参数，并将组件模型当前时刻设置为它。传递空值会取消组件模型当前时刻。使用带有options.format和options.useStrict组件配置的时刻库来解析newDate参数。

抛出

TypeError - 如果无法解析newDate

发射

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

Answer 2

正如John Washam的回答中所提到的，documentation明确表示date function接受<对象等。我处于相同的情况，尝试各种各样的事情，但似乎没有任何工作，除了这个想法：
为什么不将var someRanFunc = function() { first_function('a string') } var array_of_functions = [ function() { first_function('a string') }, function() { second_function('a string') }, function() { third_function('a string') }, function() { fourth_function('a string') } ] for (i = 0; i < array_of_functions.length; i++) { if(array_of_functions[i].toString() == someRanFunc.toString() ) { array_of_functions[i](); } }对象提供给var someRanFunc = function a() { first_function('a string') } var array_of_functions = [ function a() { first_function('a string') }, function b() { second_function('a string') }, function c() { third_function('a string') }, function d() { fourth_function('a string') } ] for (i = 0; i < array_of_functions.length; i++) { if(array_of_functions[i].name == someRanFunc.name ) { array_of_functions[i](); } }函数？

moment

由于日期选择工具需要moment.js库才能使用，您可以use it to parse any string直接向日期函数提供结果。

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

        });

其documentation defaultDate值接受：日期，时刻，字符串

Answer 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属性获取值。

Bootstrap 3 Datepicker v4 - 设置默认日期

4 个答案: