Get the value of bootstrap Datetimepicker in JavaScript

Question

I need to get the value of Datetimepicker in my JavaScript function. I have made something like this, but it doesn't work:

$("#date").click( function(){
    alert(document.getElementById('datetimepicker1').value);
});

It gives me 'undefined'

Refer this URL for usage: http://tarruda.github.io/bootstrap-datetimepicker/ — karthikr, May 15 '13 at 19:43
Which datetimepicker is being used? From the first one I get with a Google search, I see that you should use: `$("#datetimepicker1").data("datetimepicker").getDate();` — Ian, May 15 '13 at 19:44
@ Chris Moutray : from here http://tarruda.github.io/bootstrap-datetimepicker/ — dxtr, May 15 '13 at 19:45

Ian · Accepted Answer · 2013-05-15T20:06:31.940

52

Either use:

$("#datetimepicker1").data("datetimepicker").getDate();

Or (from looking at the page source):

$("#datetimepicker1").find("input").val();

The returned value will be a Date (for the first example above), so you need to format it yourself:

var date = $("#datetimepicker1").data("datetimepicker").getDate(),
    formatted = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate() + " " + date.getHours + ":" + date.getMinutes() + ":" + date.getSeconds();
alert(formatted);

Also, you could just set the format as an attribute:

<div id="datetimepicker1" class="date">
    <input data-format="yyyy-MM-dd hh:mm:ss" type="text"></input>
</div>

and you could use the $("#datetimepicker1").find("input").val();

edited May 15 '13 at 20:06

answered May 15 '13 at 19:45

Ian

50,146
13
101
111

1

Thank you so much Ian it gives me this now : Wed May 15 2013 21:45:37 GMT+0100 (WEST) i need more help to convert this to mysql format (yyyy-mm-dd hh:mm:ss) sorry I'm very new to javascript – dxtr May 15 '13 at 19:46
@Dxtr Cool, glad it helped :) I updated the answer once again that might be better - setting the format in the `data-format` attribute - it should automatically be displayed like that in the textbox – Ian May 15 '13 at 20:00
I have another question if you don't mind : How to pass a javascript variable to jquery.get, like this Query.get('data.php&var1='var11, null, function(tsv) { – dxtr May 15 '13 at 20:28
@Dxtr If `var11` contains the datetime you want to pass in the request, you'd use: `jQuery.get('data.php?var1=' + encodeURIComponent(var11), null, function` – Ian May 15 '13 at 20:37
I'm trying to get the date from a datetimepicker, your first line doesn't work I can only get it as a string. The suggestion in the below answer is also wrong and doesn't work. How do you claim you get the date? – ObedMarsh Mar 14 '17 at 10:59
`$("#item_location_form #vendor_cancel_date").find("input").val()` returns the value of datetimepicker – Mohamed Raza May 08 '23 at 19:22

Alexandre Bourlier · Answer 2 · 2015-10-13T18:24:48.360

26

It seems the doc evolved.

One should now use : $("#datetimepicker1").data("DateTimePicker").date().

NB : Doing so return a Moment object, not a Date object

edited Oct 13 '15 at 18:24

answered Oct 13 '15 at 17:56

Alexandre Bourlier

3,972
4
44
76

score 10 · Answer 3 · answered Jun 04 '17 at 03:48

To call the Bootstrap-datetimepikcer supported functions, you should use the syntax:

$('#datetimepicker').data("DateTimePicker").FUNCTION()

So you can try the function:

$('#datetimepicker').data("DateTimePicker").date();

Documentation: http://eonasdan.github.io/bootstrap-datetimepicker/Functions/

score 5 · Answer 4 · edited Aug 16 '20 at 23:08

5

Or try:

$("#datetimepicker").data().date;

edited Aug 16 '20 at 23:08

frianH

7,295
6
20
45

answered Oct 09 '18 at 22:03

bds

61
1
1

score 3 · Answer 5 · edited Jun 20 '20 at 09:12

Since the return value has changed, $("#datetimepicker1").data("DateTimePicker").date() actually returns a moment object as Alexandre Bourlier stated:

It seems the doc evolved.

One should now use : $("#datetimepicker1").data("DateTimePicker").date().

NB : Doing so return a Moment object, not a Date object

Therefore, we must use .toDate() to change this statement to a date as such:

$("#datetimepicker1").data("DateTimePicker").date().toDate();

score 2 · Answer 6 · edited Mar 24 '17 at 07:07

2

I'm using the latest Bootstrap 3 DateTime Picker (http://eonasdan.github.io/bootstrap-datetimepicker/)

This is how you should use DateTime Picker inline:

var selectedDate = $("#datetimepicker").find(".active").data("day");

The above returned: 03/23/2017

edited Mar 24 '17 at 07:07

Rav

1,327
3
18
32

answered Mar 24 '17 at 00:50

user3612888

39
4

uomopalese · Answer 7 · 2019-05-20T10:40:52.083

0

This is working for me using this Bootsrap Datetimepiker, it returns the value as it is shown in the datepicker input, e.g. 2019-04-11

$('#myDateTimePicker').on('click,focusout', function (){
    var myDate = $("#myDateTimePicker").val();
    //console.log(myDate);
    //alert(myDate);
});

edited May 20 '19 at 10:40

answered Apr 11 '19 at 15:36

uomopalese

471
1
5
21

score -1 · Answer 8 · answered May 03 '18 at 09:53

I tried all the above methods and I did not get the value properly in the same format, then I found this.

$("#datetimepicker1").find("input")[1].value;

The above code will return the value in the same format as in the datetime picker.

This may help you guys in the future.

Hope this was helpful..

Get the value of bootstrap Datetimepicker in JavaScript

8 Answers8

Linked

Related