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"
Related
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
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
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();
});
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.
I have a datepicker function which seems to be working but its onSelect function is not working i cannot see the alert()
$(function() {
var divContent = '<input type="text" placeholder="Enter date" class="dupInput" id="gl_img_datepicker" readonly=""><button id="gl_img_datepicker_init">Date</button>';
jQuery('body').on('click', '#gl_img_datepicker_init', function(e) {
jQuery("#gl_img_datepicker").datepicker('show');
});
//onselect datepicker function
jQuery('#gl_img_datepicker').datepicker('option', 'onSelect',
function(dateText, inst) {
alert('glImgExpiry-->' + dateText);
});
jQuery('body').on('click', '#mybutton', function(e) {
jQuery("#my_div").append(divContent)
jQuery("#gl_img_datepicker").datepicker();
});
});
Check my Fiddle
I have already seen below questions but it did not help.
Datepicker onSelect Not Firing
jquery datepicker onselect not working
Datepicker onSelect not working
jQuery Datepicker onSelect is not working
Thanks
You're trying to assign that event to the field that doesn't exist yet (meaning before the #gl_img_datepicker is being created and inserted into the document). Try it like this (here's the JSFiddle):
$(function() {
var divContent = '<input type="text" placeholder="Enter date" class="dupInput" id="gl_img_datepicker" readonly=""><button id="gl_img_datepicker_init">Date</button>';
jQuery('body').on('click', '#gl_img_datepicker_init', function(e) {
jQuery("#gl_img_datepicker").datepicker('show');
});
jQuery('body').on('click', '#mybutton', function(e) {
jQuery("#my_div").append(divContent)
jQuery("#gl_img_datepicker").datepicker();
// We have already appended the divContent to the document; we
// can continue with the actual datepicker event for that field
//onselect datepicker function
jQuery('#gl_img_datepicker').datepicker('option', 'onSelect',
function(dateText, inst) {
alert('glImgExpiry-->' + dateText);
});
});
});