30

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'

Mahdi Alkhatib
  • 1,954
  • 1
  • 29
  • 43
dxtr
  • 685
  • 1
  • 7
  • 16

8 Answers8

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

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

Alexandre Bourlier
  • 3,972
  • 4
  • 44
  • 76
10

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/

Giang Phan
  • 534
  • 7
  • 15
5

Or try:

$("#datetimepicker").data().date;
frianH
  • 7,295
  • 6
  • 20
  • 45
bds
  • 61
  • 1
  • 1
3

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

Community
  • 1
  • 1
Andreas Bigger
  • 5,264
  • 1
  • 13
  • 18
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

Rav
  • 1,327
  • 3
  • 18
  • 32
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);
});
uomopalese
  • 471
  • 1
  • 5
  • 21
-1

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

Jithin Raj P R
  • 6,667
  • 8
  • 38
  • 69