twitter-bootstrap Bootstrap 3 Datepicker v4 - 设置默认日期

Bootstrap 3 Datepicker v4 - set default date

提问by porosman

im using this datetimepicker http://eonasdan.github.io/bootstrap-datetimepicker/in my edit form. Im not able to set up default value in this datetimepicker from my variable date. If I use $('#edit_cost_date').val(json[0]['date']);on input element, the value in input is right but if i open datetimepicker i see that marked is not the date in input but actual date.

我在我的编辑表单中使用这个 datetimepicker http://eonasdan.github.io/bootstrap-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'
    });
});

回答by John Washam

Are you sure your datevariable is a Date object? If it is not, you will need to set the default date like this:

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

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

More information about the dateproperty for that plugin:

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

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

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

date([newDate])

Takes newDate string, Date, moment, null parameter and sets the components model current moment to it. Passing a null value unsets the components model current moment. Parsing of the newDate parameter is made using moment library with the options.format and options.useStrict components configuration.

Throws

TypeError - in case the newDate cannot be parsed

Emits

change.dp - In case newDate is different from current moment

日期（[新日期]）

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

投掷

TypeError - 如果无法解析 newDate

发射

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

回答by mavrosxristoforos

As also mentioned in the answer by John Washam, the documentationclearly says that the datefunctionaccepts a momentobject, among others.
I was in the same situation, trying various things, but nothing seemed to work, except for this idea:
Why not feed a momentobject to the datefunction?

正如 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));
});

Since the moment.jslibrary is required for the datepicker to work, you can use it to parse any string, and directly feed the date function with its result.

由于datepicker需要moment.js库才能工作，因此您可以使用它来解析任何 string，并直接将其结果提供给 date 函数。

回答by Newclique

There are some real bugaboos in setting up this tempermental little control. First, remove any ngModal binding expressions on the input controls. These will blow up your attempts to set and show the default value. Instead, use @ViewChild to get at the value when you need it. Second, if your control is going to be in a modal popup component that's not visible during the initial load, you may run into more issues. I could never get the element.data("DateTimePicker") / element.data("datetimepicker") to ever initialize or become available prior to displaying the control. It's simply not there. Third, set the locale. This seems to help a ton with the initial display regardless of the format. (Maybe I'm just superstitious. Getting this to work seemed like voodoo :)

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

In the end, I set up a proper TypeScript import with my own datepicker.d.ts and datepicker.js files that contained functions for initializing a control. My function is as follows in my datepicker.js:

最后，我使用自己的 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
        });
    }
}

I end up with a the date picker displaying my default value before the user clicks. (When it wasn't working, I'd end up with a fully expanded GMT datetime string before the user clicked the picker.)

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

When my users click a button to do an action, I get the value from my ViewChild's nativeElement.value property.

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

回答by sakir

this works for me

这对我有用

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


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

        });

Its documentationdefaultDate value Accepts: date, moment, string

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