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.
This question is related to
jquery
ruby-on-rails
jquery-ui
twitter-bootstrap
datepicker
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.
Try this using HTML like here:
var myDate = window.document.getElementById("startdate").value;
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..
$("#startdate").data().datepicker.getFormattedDate('yyyy-mm-dd');
If you wan't the date in full text string format you can do it like this:
$('#your-datepicker').data().datepicker.viewDate
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
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
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()
For bootstrap datepicker you can use:
$("#inputWithDatePicer").data('datepicker').getFormattedDate('yyyy-mm-dd');
this works with me for inline datepicker
(and the other)
$('#startdate').data('datepicker').date
Generally speaking,
$('#startdate').data('date')
is best because
$('#startdate').val()
not work if you have a datepicker "inline"
Source: Stackoverflow.com