How to get the selected date value while using Bootstrap Datepicker?

Question

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.

Solution 1

You can try this

$('#startdate').val()

or

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

Solution 2

For bootstrap datepicker you can use:

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

Solution 3

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

Solution 4

Generally speaking,

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

is best because

$('#startdate').val()

not work if you have a datepicker "inline"

Solution 5

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

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

View more solutions

Comments

[Ryan]

For me, the first $('#startdate').val() worked perfect. Thanks

[momijigari]

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.

[Maxime]

I downvoted you by mistake. Can you edit your answer so I can correct upvote ? Sorry about that.

[TombMedia]

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.

[cauchi]

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

[gdvalderrama]

This is actually the whole datetime value, which includes time. It looks like this is what was being asked though.

[Hashaam Ahmed]

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!

[double-beep]

While this code may solve the question, including an explanation 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