We Keep Coding

How to Select a Specific Date on Calendar to Trigger a Function with jQuery UI Datepicker

I’m trying to add a conditional statement to the jQuery UI Datepicker onChange to trigger a function if certain dates are selected from the calendar. Example
if (selecteddate == ‘01/15/2019’){
alert('Function A Triggered');
updateDataA();
}
else if (selecteddate == ‘01/25/2019’){
alert('Function B Triggered');
updateDataB();
}
I found something close to what I’m looking for, but I can’t figure out how to modify the script to trigger the function by selecting a date instead of selecting the month and year dropdown to trigger the function. Hope this is possible. Any help will be greatly appreciated. Below is the script I’m trying to tweak.
$(function() {
$( "#datepicker1" ).datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'MM yy',
altField: "#id",
altFormat: "mm/yy",
onChangeMonthYear: function(year, month, oDatepicker) {
alert('Year: ' + year + ', Month: ' + month);
updateDataD();
}
});
});

In the onSelect method of the datepicker, the first parameter refers to the date (as text). You could use this to determine which function to fire.
function updateDataA() { console.log("Update Data A"); }
function updateDataB() { console.log("Update Data B"); }
$("#calendar").datepicker({
onSelect: function (dateText) {
if (dateText=== "01/15/2019") updateDataA();
else if (dateText=== "01/25/2019") updateDataB();
}
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.6.5/datepicker.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<input id="calendar">

onSelect is called when the datepicker is selected:
onSelect: function(dateText, inst) {
if (dateText == ‘01/15/2019’){
// your function
}
}
http://api.jqueryui.com/datepicker/#option-onSelect

How do I make jQuery Datepicker press the submit button automatically after a date has been selected

So as soon as a date is selected on the Datepicker I want a button to be pressed that will submit the date. This way users won't need to click on a button to submit dates they want to look at.
My jQuery code:
<script>
$(function() {
$( "#date" ).datepicker({
numberOfMonths: 3,
showButtonPanel: true
});
$('#date').datepicker('option', 'dateFormat', 'yy-mm-dd');
});
</script>
And then the HTML button:
<button type="submit" value="submit" id="submit" name="submit">Submit </button>
Thanks for any help.

Use onSelect event like this ,Working demo here
$(function() {
$('#date').datepicker( {
onSelect: function(date) {
$("#yourFormId").submit();
//OR $("#yourButton").click();
}
});
});

I guess your datepicker is in the form .. Then do this :)
$(function() {
$( "#date" ).datepicker({
numberOfMonths: 3,
showButtonPanel: true,
onSelect: function(dateText, inst) {
$(this).parents("form").submit();
}
});
$('#date').datepicker('option', 'dateFormat', 'yy-mm-dd');
});
You can also minify your code by adding the dateFormat option directly to the init of datepicker
$(function() {
$( "#date" ).datepicker({
numberOfMonths: 3,
showButtonPanel: true,
onSelect: function(dateText, inst) {
$(this).parents("form").submit();
},
dateFormat: 'yy-dd-mm'
});
});

How to get the selected date from jquery datepicker

I am using jquery datepicker to show a calendar.Now as per my requirement i want to get the date selected by the user in my jquery variable which i will use in my application but i am not able to get the date ..
Here is the code for datepciker
<div id="datepicker"></div>
and here i am trying to get the selected code..
$(document).ready(function () {
$("#datepicker").datepicker({
onSelect: function (dateText, inst) {
var date = $(this).val();
alert(date);
}
});
});
But, I am not able to get the date ..Please help me ..Thanks..

This should do the trick
$(function() {
$("#datepicker").datepicker();
$("#datepicker").on("change",function(){
var selected = $(this).val();
alert(selected);
});
});
It's basic but here is a jsfiddle with it alerting the selected date when selected
update to change the date format
$(function() {
$( "#datepicker" ).datepicker({ dateFormat: "yy-mm-dd" });
$("#datepicker").on("change",function(){
var selected = $(this).val();
alert(selected);
});
});
jsfiddle
3rd update
$(function() {
$("#datepicker").datepicker({
dateFormat: "yy-mm-dd",
onSelect: function(){
var selected = $(this).val();
alert(selected);
}
});
});
I have used a little more of the native markup for datepicker ui here try this and see if you get the alert as you are after.
4th Update
$(function() {
$("#datepicker").datepicker({
dateFormat: "yy-mm-dd",
onSelect: function(){
var selected = $(this).datepicker("getDate");
alert(selected);
}
});
});
The 4th method uses $(this).datepicker("getDate") instead of $(this).val() as $(this).datepicker("getDate") returns a date object and $(this).val() returns the date as a string.
Depending on your needs select which one is appropriate.
(Added 4th method and explanation of the difference after #TimothyC.Quinn commented that the getDate being the correct method)

Though, question is answered, for people who just want a date object or set a date with specific format. There is simple functions jQuery provides. Here's working jsfiddle
$( "#datepicker" ).datepicker({ dateFormat: "dd-mm-yy" });
$("#datepicker").datepicker('setDate', '10-03-2020');
// pass string of your format or Date() object
$("#datepicker").datepicker('getDate');
// returns Date() object
$("#another_datepicker").datepicker('setDate', $("#datepicker").datepicker('getDate'));
// pass string of your format or Date() object

Try
$("#datepicker").datepicker({
onSelect:function(selectedDate)
{
alert(selectedDate);
}
});
OR
$("#datepicker").datepicker({
onSelect:function (dateText, inst)
{
alert(inst);
}
});

try this
$('.selector').datepicker({
onSelect: function(dateText, inst) { ... }
})
you have two elements with the class .datepicker, the selector won't know which element to choose from. So, you'll have to specify the name of the input you're trying to get the date from
first = $(".datepicker[name=datepicker1]").datepicker('getDate');
second = $(".datepicker[name=datepicker2]").datepicker('getDate');

You can use the changeDate event outlined here instead of onSelect and then reference e.date or e.dates. See the JSON below.
HTML:
<div id='QA'></div>
<div id='datepicker'></div>
JS:
<script type="text/javascript">
$(function() {
$('#datepicker').datepicker({
clearBtn: true,
todayHighlight: false,
multidate: true
}) .on('changeDate', function(e){
$('#QA').html(JSON.stringify(e));
});
});
/*
{
"type":"changeDate",
"date":"2015-08-08T07:00:00.000Z",
"dates":[
"2015-08-08T07:00:00.000Z"
],
"timeStamp":1438803681861,
"jQuery21409071635671425611":true,
"isTrigger":3,
"namespace":"",
"namespace_re":null,
"target":{
},
"delegateTarget":{
},
"currentTarget":{
},
"handleObj":{
"type":"changeDate",
"origType":"changeDate",
"guid":52,
"namespace":""
}
}
*/
</script>

The ideal way is to get the date and convert it to a common format and utilize the same. (may passing to server or so.)
$("#datepicker").datepicker('getDate').toISOString()
so it will get the date in ISO stander.

All code is for Bootstrap Datepicker
var calendar = $('#calendar').datepicker("getDate"); // Ex: Tue Jun 29 2021 00:00:00 GMT+0600 (Bangladesh Standard Time)
or
var calendar = $('#calendar').data('datepicker').getFormattedDate('yyyy-mm-dd'); // Ex: 2021-06-30
if(calendar){
alert(calendar);
} else {
alert('null');
}

If you need it in specific format like '2021/09/28':
$.datepicker.formatDate('yy/mm/dd',
$('.date-picker-2').datepicker("getDate")
);

Here is how to get Date object from datepicker in the onSelect event:
$("#datepickerid").datepicker({
onSelect: function (dateText, inst) {
var date_obj = $(this).datepicker('getDate');
}
});
I find it strange that the onSelect caller would not return the date object by default.

Jquery function not working on the first click

i have added function for datepicker. but my date picker is not open on the first click.
here is my jsp code..
To
here is my query functions..
function addDate(idName) {
$(idName).datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 1,
dateFormat: "dd/mm/yy"
});
}function addTime(idName) {
$(idName).timepicker({`
ampm: true,
timeFormat: "hh:mmtt"
});
}
please help me.. thanks.

DatePickers and TimePickers are assigned to focus events automatically. You do not need to call $(object).datepicker() every time, just at initialization and it will open properly when focused.
A good approach is to assign the .datepicker class to every object you want to have the DatePicker assigned and, then, assign the DatePicker to all elements of that class.
$(document).ready(function() {
$(".datepicker").datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 1,
dateFormat: "dd/mm/yy"
});
});
Do the same thing with TimePickers.

Try this bellow and i don know what language your using?
#Html.TextBoxFor(model=> model.Filters.EndTime,new { #class = "date" })
$('.date').datepicker({ dateFormat: "yy/mm/dd", maxDate: '+0d', minDate: '-600d'});
above code is written in asp.net mvc

You need to call
addDate(idName)
on document ready like this
$(function() {
addDate(idName)
});

jQuery: datepicker, alert the dayname of the selected

How can i alert the selected days name? Example 'Monday'.
So when you pick 7th june 2011 it will alert "Tuesday"
<script>
$(function() {
$( "#date" ).datepicker({
dateFormat: 'dd/mm/yy',
onSelect: function(dateText, inst) {
// how can i grab the day name of the day, example "Monday" and alert it out?
// alert( ? );
}
});
});
</script>

The jQueryUI's Datepicker comes with a formatDate function that can do that for you. If you're using a localized version, it'll show the days in that language too.
onSelect: function(dateText, inst) {
var date = $(this).datepicker('getDate');
alert($.datepicker.formatDate('DD', date));
}
For more information on localization of on Dapicker's utility functions, have a look at http://jqueryui.com/demos/datepicker/.

<script>
$(function() {
$( "#date" ).datepicker({
dateFormat: 'dd/mm/yy',
onSelect: function(dateText, inst) {
var weekday=new Array(7);
weekday[0]="Sunday";
weekday[1]="Monday";
weekday[2]="Tuesday";
weekday[3]="Wednesday";
weekday[4]="Thursday";
weekday[5]="Friday";
weekday[6]="Saturday";
alert(weekday[inst.getDate().getDay()];
}
});
});
</script>

this will work if you don't mind showing the name of the day in the input box
if you dont like it you can use second hidden input (http://jqueryui.com/demos/datepicker/#alt-field)
$(function() {
$( "#date" ).datepicker({
dateFormat: 'DD, d MM, yy',
onSelect: function(dateText, inst) {
var stop = dateText.indexOf(',');
alert( dateText.substring(0, stop));
}
});
});
example at http://jsfiddle.net/aa74R/

You can parse a date like this (mm/dd/yyyy):
new Date(Date.parse("06/07/2011"))
and use the .getDay function. You could do this:
// parse data
var regexp = /(\d{2})\/(\d{2})\/(\d{2})/.exec("07/06/11");
//form date
var date = new Date(Date.parse(regexp[2] + "/" + regexp[1] + "/20" + regexp[3]));
alert(date.getDay()); // 2 -> Tuesday (starts at 0 = Sunday)

Use inbuilt function
$("#datepicker" ).datepicker({ onSelect: function(dateText, inst) {
alert($.datepicker._defaults.dayNames[new Date(dateText).getDay()]);
}});