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

Add custom classname to jquery calendar cell

I am using Jquery calendar. I am trying to insert a new class name to each cell of calendar. It gets added but it is getting removed as and when the calendar is clicked.
Basically it refreshes the calendar on every click so newly added class is getting removed on refresh.
How do I retain the class name?
here is my code
$(function() {
$('#custom-date-format').multiDatesPicker({
dateFormat: "y-m-d"
});
$('.ui-state-default').addClass("calendar_bg");
});
Demo

Use callback functions of Datepicker Widget
$('#DatePicker').datepicker({
//The calendar is recreated OnSelect for inline calendar
onSelect: function (date, dp) {
updateDatePickerCells();
},
onChangeMonthYear: function(month, year, dp) {
updateDatePickerCells();
},
beforeShow: function(elem, dp) { //This is for non-inline datepicker
updateDatePickerCells();
}
});
updateDatePickerCells();
function updateDatePickerCells(dp) {
/* Wait until current callstack is finished so the datepicker
is fully rendered before attempting to modify contents */
setTimeout(function () {
$('.ui-datepicker td > *').each(function (idx, elem) {
$(this).addClass("calendar_bg");
});
}, 0);
}
See Demo
For multiDatesPicker()
$(function() {
$('#from-input').multiDatesPicker({
beforeShow: function(elem, dp) {
updateDatePickerCells();
}
});
});

Why don't you suppose to override the existing .ut-state-default background-color instead of going for adding new one?
.ui-state-default{background: #ffeb3b !important}

It's a known tricky jQuery UI calendar issue, see this question jQuery ui - datepicker prevent refresh onSelect
Anyway, the fix is to add inst.inline = false; on select, like this
$('#custom-date-format').multiDatesPicker({
dateFormat: "y-m-d",
onSelect: function(date, inst){
inst.inline = false;
$('.ui-state-default').addClass("calendar_bg");
}
});
See a demo, note however, that it throws an error in multidatespicker.js. There seems to be an issue with this plugin.

It would be better to use the existing class name and override its default styling.
Add this style .ui-widget-content a.ui-state-default { background: #ffeb3b }
Here is the same demo

How to trigger a function on value set to a inputbox?

I have the code where I want to trigger a function on the date value selected to the input box. How can I achieve this using jQuery? Below is my code:
$("input.Degree_date").live('click', function() {
$("input.add").attr("hidden", true);
$("input.delete").attr("hidden", true);
alert();
});
$(document).on('input', '.Degree_date', function(){
alert();
});

If you are using a jquery datepicker to select your date it is easy:
$( "#datepicker" ).datepicker(
{ onSelect: function(dateText, inst) {
alert('this what you looking for?');
}
});

As live is depricated you should use on.
Then I hope you are using datepicker plugin. So when your clickevent is not on the input field. You should use oninput or onchange event handler.
$("input.Degree_date").on('input', function() {
$("input.add").attr("hidden", true);
$("input.delete").attr("hidden", true);
alert();
});

Input date,
<input type="date" id="date">
Function to be triggered,
var call = function() {
console.log('Trigger');
}
Jquery function on input date selection,
$('#date').on('input', function() {
call();
});

Jquery datepicker change event trigger and input's default change event

I have datepicker
<input type='text' class='inp'>
<script>
$('.inp').datepicker();
$(".inp").on("change",function (){
console.log('inp changed');
});
</script>
When I first change '.inp' manually type there a value, then immediately I click on datepicker's opened calendar. I get two 'change' event listeners. First from manual change, then from datepicker change.
How can I avoid this?

Set your input readOnly, it will help you to change the value of field through icon only.
<input type='text' class='inp' readOnly />
then use onSelect to get selected date, as following:
$(function() {
$(".inp").datepicker({
onSelect: function(dateText, inst) {
// alert(dateText);
}
});
});

Try using the onSelect function like:
$(function() {
$( ".datepicker" ).datepicker({
onSelect: function() {
//your code here
}});
This will be fired when they select a date from the calendar not when they are typing.

You can have onSelect trigger the change event on the text field. This way editing the date via the text box or via the date picker behave the same.
$('.inp').datepicker({
onSelect: function() {
return $(this).trigger('change');
}
});
$(".inp").on("change",function (){
console.log('inp changed');
});

If you are using the bootstrap datepicker you can do the following:
$('.datepicker').datepicker()
.on('changeDate', function(e){
# `e` here contains the extra attributes
});
For more details view: Bootstrap Datepicker events

Thanks! Everybody, but I could not make field readonly one, this is requirement. So I had to reasearch myself. So I posting my final solution. I did unbinding for 150 ms, then bind again.
I made a jquery plugin for this
function myfunc(that){
$(that).one('change', function(){
var that = this;
setTimeout(function(){myfunc(that);}, 150);
//some logic
}
)
}
myfunc(".inp");

Thank you everyone, this is what I used though,
function myfunction(x,x2){
var date1 = new Date(x);
var MyDateString;
MyDateString = date1.getFullYear()+ '/' + ('0' + (date1.getMonth()+1)).slice(-2) + '/' + ('0' + date1.getDate()).slice(-2);
x2.value= MyDateString;
}
x, being the datepicker value and x2 being the datepicker object

Try this
$(function() {
$("#birth_date").datepicker({
onSelect: function() {
console.log("You Code Here");
}});
});

If you are using datepiker ui you can also used following formate
<input type='text' class='inp'>
<script>
$('.inp').datepicker({
onSelect: function(date) {
$(this).change();
},
}).on("change",function (){
console.log('inp changed');
});
</script>

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" type="text/css"/>
<script src="js/jquery-1.12.4.js"></script>
<script src="js/jquery-ui.js"></script>
<script>
var j = jQuery.noConflict();
j(function() {
j("#datepickerFrom").datepicker({
changeMonth: true,
changeYear: true,
dateFormat: "yy/mm/dd",
onSelect: function () {
var date = $(this.value).selector;
document.getElementById("dateFrom").value = date;
},
}).on("change",function (){
var date = $(this.value).selector;
document.getElementById("dateFrom").value = date;
})
.datepicker("setDate",document.getElementById("dateFrom").value);
});
</script>
<input id="datepickerFrom"/>
<input type="hidden" name="dateFrom" id="dateFrom"/>

if you are using date picker of jquery there is no need of calender event fire.
you can fire the event on textbox "textchanged"

How to call a js function onSelect event of datepicker jquery?

Please anyone help me..
I have a js function
function updateAb(param){ some manipulation }
And i am calling a datepicker jquery onselect event like..
$( ".datepicker").datepicker({onSelect: function(dateText, inst) { ... }});
I want to call the js function in select, how to do that? My objective is to get the value onselect of date from the datepicker and setting the attribute value in input field. Can anyone help me???

Here goes ur code
$('.datepicker').datepicker({
dateFormat: 'dd-mm-yy',
numberOfMonths: 1,
onSelect: function(selected,evnt) {
updateAb(selected);
}
});
function updateAb(value){
$('#yourInputID').val(value);
}

$( ".datepicker").datepicker({
onSelect: function(dateText, inst) {
updateAb(dateText);
}
});
Even more simply, if you do want the dateText and inst parameters to be passed to updateAb
$( ".datepicker").datepicker({onSelect: updateAb});

$( ".datepicker").datepicker({
onSelect: function(dateText, inst) {
updateAb(dateText, inst);
}
});
In short
$( ".datepicker").datepicker({
onSelect: updateAb
});