55

Using jquery and the Bootstrap Datepicker, how do I get the new date value I selected using the Bootstrap Datepicker? FYI, I'm using Rails 3 and Coffescript.

I set up the datapicker using:

<input id="startdate" class="span2 datepicker" type="text" value="" name="startdate" default="2013-05-21" data-date="2013-05-21" data-behavior="datepicker">
<%= submit_tag 'Get Data using date', :id => 'get_data' %>

$(".datepicker").datepicker
      endDate: new Date
      format: "yyyy-mm-dd"
      autoclose: true
      minViewMode: 1
      todayBtn: "linked"

When a user clicks on the "get data using date" button next to it, I will use jQuery to get the new date value set by the datepicker, prevent the form from submitting and run an ajax request using that date value. All the ajax is running well, except for getting the correct new date value. I tried both of the following and it doesn't give me the new date, it only return the defaults I initially set.

sd1 = $('#startdate').attr('value')
console.log sd1

sd2 = $('#startdate').attr('data-date'))
console.log sd2

I am feeling really stupid right now, but I can't find out how to get the new date value set by the bootstrap datepicker.

Rishabh
  • 3,752
  • 4
  • 47
  • 74
Ryan
  • 10,798
  • 11
  • 46
  • 60

13 Answers13

71

For bootstrap datepicker you can use:

$("#inputWithDatePicer").data('datepicker').getFormattedDate('yyyy-mm-dd');
Matias
  • 928
  • 7
  • 5
  • Very helpful! When the datepicker has multiple dates, the date returned in events is always the first in the sequence, regardless of the date selected on the calendar. The `data` object always has the actual date clicked. – TombMedia May 07 '15 at 03:30
  • most of the solutions were giving me NaN while getting the date and Date.Parse(). Your solution worked like charm for Date.Pase() function as well. Thank you! – Hashaam Ahmed May 19 '19 at 07:54
52

You can try this

$('#startdate').val()

or 

$('#startdate').data('date')
Sushanth --
  • 55,259
  • 9
  • 66
  • 105
  • For me, the first $('#startdate').val() worked perfect. Thanks – Ryan May 22 '13 at 16:44
  • 1
    Could you tell me please which Datepicker component are you using? There's no official one, and a lot of 3d party, that's why I'm asking. – momijigari Nov 17 '13 at 14:59
  • This is actually the whole datetime value, which includes time. It looks like this is what was being asked though. – gdvalderrama Jun 22 '16 at 17:25
38

Bootstrap datepicker (the first result from bootstrap datepickcer search) has a method to get the selected date.
https://bootstrap-datepicker.readthedocs.io/en/latest/methods.html#getdate

getDate: Returns a localized date object representing the internal date object of the first datepicker in the selection. For multidate pickers, returns the latest date selected.

$('.datepicker').datepicker("getDate")

or

$('.datepicker').datepicker("getDate").valueOf()
MinistryOfChaps
  • 1,458
  • 18
  • 31
Luca Rasconi
  • 1,085
  • 11
  • 30
  • 6
    Why doesn't the author give an example?! have been looking for this stupid method for too long. And why isn't this the answer?! – cauchi May 08 '15 at 15:52
11

Generally speaking, 

$('#startdate').data('date')

is best because 

$('#startdate').val()

not work if you have a datepicker "inline"

Lodato L
  • 146
  • 1
  • 4
3

this works with me for inline datepicker (and the other)

$('#startdate').data('datepicker').date
Shady
  • 364
  • 5
  • 18
3

If you wan't the date in full text string format you can do it like this:

$('#your-datepicker').data().datepicker.viewDate
Pedro Martins
  • 219
  • 1
  • 10
3

The example here provides an example of use 'getFormattedDate' but it does not say how to pass a format into this function. It is actually easy, it goes as a second parameter like so:

$('#date').datepicker('getFormattedDate', 'yyyy-mm-dd');

alternatively

$('#date').data('datepicker').getFormattedDate('yyyy-mm-dd');

or

$(this).data().datepicker.getFormattedDate('yyyy-mm-dd')

All of these approaches are alternatively undocumented.

But there is a documented way to do it:

here there is a format function, where you can separately configure dates "toDisplay" and "toValue"

$('.bootstrap-datepicker-js').datepicker({
    format: {
        toDisplay: function (date, format, language) {
            var d = new Date(date).toLocaleDateString('en-GB', {
                day: 'numeric',
                month: 'short',
                year: 'numeric'
            }).split(' ').join('-');
            return d;
        },
        toValue: function (date, format, language) {
            var d = new Date(date).toLocaleDateString('en-GB', {
                day: 'numeric',
                month: 'short',
                year: 'numeric'
            }).split(' ').join('-');
            return d;
        }
    },
    minViewMode: 1,
    clearBtn: true,
    autoclose: true,
    enableOnReadonly: true
});

if you declare the datepicker like this you will have your $('#date').datepicker('getFormattedDate') formated for your likings

Yevgeniy Afanasyev
  • 37,872
  • 26
  • 173
  • 191
2

Try this using HTML like here:

var myDate = window.document.getElementById("startdate").value;
Rahul Hendawe
  • 902
  • 1
  • 14
  • 39
user3475960
  • 167
  • 2
  • 8
  • I downvoted you by mistake. Can you edit your answer so I can correct upvote ? Sorry about that. – Maxime Apr 17 '15 at 15:17
2

If you already have a number of dates already highlighted and want to determine which date was last clicked then you'll need the following:

$('#startdate').data('datepicker').viewDate

viewDate returns a JavaScript date object so you'll need to handle it accordingly.

Bern
  • 7,808
  • 5
  • 37
  • 47
2

I was able to find the moment.js object for the selected date with the following:

$('#datepicker').data('DateTimePicker').date()

More info about moment.js and how to format the date using the moment.js object

SMAG
  • 652
  • 6
  • 12
1
$("#startdate").data().datepicker.getFormattedDate('yyyy-mm-dd');
Alper Ebicoglu
  • 8,884
  • 1
  • 49
  • 55
  • 2
    While this code may solve the question, [including an explanation](//meta.stackexchange.com/q/114762) of how and why this solves the problem would really help to improve the quality of your post, and probably result in more up-votes. Remember that you are answering the question for readers in the future, not just the person asking now. Please [edit] your answer to add explanations and give an indication of what limitations and assumptions apply. [From Review](/review/low-quality-posts/26280696) – double-beep May 31 '20 at 14:46
0

I tried with the above answers, but they didn't worked out for me; So as user3475960 referred, I used $('#startdate').html() which gave me the html text so i used it as necessary... May be some one will make use of it..

SalindaKrish
  • 149
  • 1
  • 3
  • 12
0

There are many solutions here but probably the best one that works. Check the version of the script you want to use.

Well at least I can give you my 100% working solution for

version : 4.17.45

bootstrap-datetimejs https://github.com/Eonasdan/bootstrap-datetimepicker Copyright (c) 2015 Jonathan Peterson

JavaScript

var startdate = $('#startdate').val();

The output looks like: 12.09.2018 03:05

NoWar
  • 36,338
  • 80
  • 323
  • 498