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/

xfdai · Accepted Answer · 2015-12-14 09:22:36Z

52

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());

answered Dec 14, 2015 at 9:22

xfdai

2,8351 gold badge23 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

SerCrAsH Over a year ago

Worth for me with eosnadan bootstrap 3 datepicker

user1768761 Over a year ago

They made the interesting decision to document the mentioned function on the "Options", instead of the "Functions" page of the manual.

Cyril Duchon-Doris · Accepted Answer · 2018-05-23 21:53:37Z

21

The correct syntax is :

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

edited May 23, 2018 at 21:53

answered Jun 17, 2015 at 12:51

Cyril Duchon-Doris

14.2k12 gold badges92 silver badges181 bronze badges

5 Comments

Ranveer Over a year ago

This does not provide an answer to the question. To critique or request clarification from an author, leave a comment below their post.

Cyril Duchon-Doris Over a year ago

It totally answers the question. The author wanted to make his code work, because he couldn't figure out the right syntax. I answered with the correct syntax.

Ranveer Over a year ago

I apologise for the comment. It was autogenerated by review. It didn't show me the question and from just the answer, it looked like a cross question. Well, there are days SO reviews fail.

Skeets Over a year ago

This answer only works if you haven't initialized the datetimepicker yet.

jumps4fun Over a year ago

I'm gonna go all Matrix and claim that there is no question... Technically at least

Heretic Monkey · Accepted Answer · 2017-07-19 14:54:34Z

18

Had to add, I was able to solve it.

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

edited Jul 19, 2017 at 14:54

Heretic Monkey

12.2k7 gold badges63 silver badges133 bronze badges

answered Jan 19, 2017 at 22:52

Sandeep

1811 silver badge3 bronze badges

1 Comment

Pasan Bhanu Guruge Over a year ago

Use "datetimepicker" if capitalised word is not working. All in simple letters works for me!

Pierre Maoui · Accepted Answer · 2015-06-17 12:53:42Z

3

You want to set a default date value :

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

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

answered Jun 17, 2015 at 12:53

Pierre Maoui

6,4422 gold badges31 silver badges30 bronze badges

Comments

Jeff Yates · Accepted Answer · 2017-08-14 09:10:08Z

2

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

answered Aug 14, 2017 at 9:10

Jeff Yates

1,0931 gold badge10 silver badges14 bronze badges

Comments

mechenbier · Accepted Answer · 2015-06-17 12:54:18Z

1

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/

answered Jun 17, 2015 at 12:54

mechenbier

3,06725 silver badges31 bronze badges

Comments

Sujit Patil · Accepted Answer · 2015-06-17 12:57:04Z

1

Use defaultDate option to set date.

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

answered Jun 17, 2015 at 12:57

Sujit Patil

1834 bronze badges

1 Comment

raza9798 Over a year ago

Uncaught TypeError: Cannot read properties of undefined (reading 'setValue')

Skeets · Accepted Answer · 2018-08-29 03:26:52Z

0

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

answered Aug 29, 2018 at 3:26

Skeets

4,8983 gold badges50 silver badges77 bronze badges

Comments

Nathan · Accepted Answer · 2018-11-28 00:30:33Z

0

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

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

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

answered Nov 28, 2018 at 0:30

Nathan

2822 silver badges10 bronze badges

Comments

Noel Swanson · Accepted Answer · 2020-01-24 02:00:16Z

0

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.

answered Jan 24, 2020 at 2:00

Noel Swanson

3512 silver badges9 bronze badges

Comments

LQuagmire · Accepted Answer · 2021-12-01 23:58:37Z

0

//date is my input datatimepicker class
$('.date').bootstrapMaterialDatePicker({
        format: 'DD/MM/YYYY',
        weekStart: 1,
        time: false,
        cancelText: 'Cancelar',
        okText: 'Elegir',
        nowText: 'Ahora',
        lang: 'es'
});
//then just use this
$('#idOfYourInput').val("30/11/2021");

answered Dec 1, 2021 at 23:58

LQuagmire

11 bronze badge

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

Set date in bootstrap datetimepicker input

11 Answers 11

2 Comments

5 Comments

1 Comment

Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

11 Answers 11

2 Comments

5 Comments

1 Comment

Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related