Set date in bootstrap datetimepicker input

Question

I used the datetimepicker from: http://eonasdan.github.io/bootstrap-datetimepicker/Installing/

There no provide how to use function (date, show, hide, etc) so I don't know how to set the value for input using datetimepicker using date function which says:

date([newDate])

Takes string, Date, moment, null parameter and sets the components model current moment to it.

I tried

$('#datetimepicker2').datetimepicker(
    date: function() { return new Date(1434544649384); }
);

Where 1434544649384 is a timestamp.

But it doesn't work and doesn't update input text/value...

JsFiddle: http://jsfiddle.net/0Ltv25o8/1397/

Answer 1

The correct syntax is :

$('#datetimepicker2').datetimepicker({
    date: new Date(1434544882775)
});

Answer 2

quote from http://eonasdan.github.io/bootstrap-datetimepicker/Functions/

Note All functions are accessed via the data attribute e.g. $('#datetimepicker').data("DateTimePicker").FUNCTION()

So you can update date like following:

$('#datetimepicker2').data("DateTimePicker").date(new Date());

Answer 3

Had to add, I was able to solve it.

$('#datetimepicker1').datetimepicker({});
$('#datetimepicker1').data("DateTimePicker").date(moment(new Date ).format('DD/MM/YYYY HH:mm'));

Answer 4

You want to set a default date value :

var d = $('#datetimepicker1').datetimepicker({
    "defaultDate":new Date()
});

http://jsfiddle.net/0Ltv25o8/1399/

Answer 5

For me although I managed to change the date, it also changed the format incorrectly. When I applied the format separately it then worked as expected:

var d = $('#datetimepicker1').({ date: moment(), format: $scope.userDateFormatMoment });

Answer 6

If you are looking to set the date of your datetimepicker, use the defaultDate option. From the documentation:

defaultDate: Sets the picker default date/time. Default: false. Accepts: date, moment, string.

Your options would look like:

$('#datetimepicker2').datetimepicker({
    defaultDate: new Date(1434544649384)
});

http://jsfiddle.net/0Ltv25o8/1400/

Answer 7

Use defaultDate option to set date.

$('#datetimepicker2').datetimepicker({
    defaultDate:  new Date(1434544649384) 
});

Answer 8

None of the answers here will work in all situations. I've combined a couple of the answers here to get one that will:

var $ele = $("#datetimepicker2");
var date = new Date(1434544649384);
var datePickerObject = $ele.data("DateTimePicker");

if (typeof datePickerObject !== "undefined") {
  // it's already been Initialize . Just update the date.
  datePickerObject.date(date);
}
else {
  // it hasn't been initialized yet. Initialize it with the date.
  $ele.datetimepicker({
    date: date
  });
}

Answer 9

xfdai's answer worked for me, except if you're getting

$('#datetimepicker2').data("DateTimePicker")
= undefined

then try $('#datetimepicker2').data("datetimepicker") (lowercase data param) instead.

Answer 10

Here's what worked for me:

var dateString = '2200-12-31';
var dateParts = dateString.split('-');
var date = new Date(dateParts[0], dateParts[1] - 1, dateParts[2]);
$('#leaseEnd').data('datetimepicker').setDate(date);
$('#leaseEnd').data('datetimepicker').update();

Notes:

I had to use the lowercase term 'datetimepicker' - thanks Nathan Wilson

I had to make the string into a date object

I had to use the update() function to get the calendar to show the newly selected date

Don't forget that if you are including hours javascript may modify your update because of timezone difference. In that case include the timezone in your date string.

Answer 11

$('#datetime_field').data('DateTimePicker').date(moment('8/30/2021'))