Bootstrap 3 Datepicker v4 - set default date

Question

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.

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

Answer 1

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

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

More information about the date property for that plugin:

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

Answer 2

As also mentioned in the answer by John Washam, the documentation clearly says that the date function accepts a moment object, among others.
I was in the same situation, trying various things, but nothing seemed to work, except for this idea:
Why not feed a moment object to the date function?

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.js library is required for the datepicker to work, you can use it to parse any string, and directly feed the date function with its result.

Answer 3

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 documentation defaultDate value Accepts: date, moment, string

Answer 4

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 :)

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:

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.)

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