Jquery datepicker add click event to prev next button
13,965
Try this
$(document).on('click', '.ui-datepicker-next', function () {
console.log('next');
})
$(document).on('click', '.ui-datepicker-prev', function () {
console.log('prev');
})
Author by
Henrique C.
Updated on June 06, 2022Comments
-
Henrique C. almost 2 years
I have this function that will set a datepicker for a given element id and i'm trying to add a click function to prev and next buttons. But nothing seems to work. I have searched the web for adding click events to these buttons but they are all giving an id.
What i'm doing wrong here ?
function setDatepicker(element,curdate,identifier){ //identifier is the element.id var minDateMaxDate = getCalendarsYearRange(1); var min = new Date(minDateMaxDate[0] * 1000); var max = new Date(minDateMaxDate[1] * 1000); $(element).datepicker({ id: identifier, firstDay: 1, showOtherMonths: false, selectOtherMonths: false, changeYear: true, changeMonth: true, yearRange: getCalendarsYearRange(0), monthNamesShort:monthNamesShort, dayNamesShort:dayNamesShort, minDate: min, maxDate: max, onClose: function (dateText, inst){ saveFieldsChanges(element,dateText,inst); getFieldsFromDialog(); } }); $(element).datepicker( "option", "dateFormat", "dd-mm-yy" ); $(element).datepicker( "option", "defaultDate", curdate ); $("#"+identifier+" .ui-datepicker-div .ui-datepicker-header .ui-datepicker-prev").live('click', function(){ console.log("prev"); }); $("#"+identifier+" .ui-datepicker-div .ui-datepicker-header .ui-datepicker-next").live('click', function(){ console.log("next"); }); }
Update
Html where i set the datepicker, this is part of a xsl template that is loaded, the input fields are the datepickers.
<div class="ferias-form-div"> <div class="labelfieldcontainer"> <div class="formlabels">Data início</div> <div class="formfields"> <input type="text" id="datainicioferias" onblur="saveFieldsChanges(this)" onkeyup="saveFieldsChanges(this)" name="datainicioferias" value="" class="textbox"/> <div class="errodialog" id="datainiciodialogferias"></div> </div> </div> <div class="labelfieldcontainer"> <div class="formlabels">Data fim</div> <div class="formfields"> <input type="text" id="datafinalferias" onblur="saveFieldsChanges(this)" onkeyup="saveFieldsChanges(this)" name="datafinalferias" value="" class="textbox"/> <div class="errodialog" id="datafimdialogferias"></div> </div> </div> ...
This is how i set the datepicker for example:
setDatepicker(inputelement,curdate,"datafinalferias");
UPDATE 2 - With answear
With the help from Alexander i added this option to the calendar
onChangeMonthYear: function (year, month, inst ) { var limites; var cal_date_string = month+'/'+year; limites = getCalendarsYearRange(2); //my calendar's navigation limits var end_date_string = limites[1]; //my calendar's navigation limits var start_date_string = limites[0]; //my calendar's navigation limits if(end_date_string == cal_date_string){ setTimeout( function(){ $(".ui-datepicker-next").attr( "onclick", 'mensagemLimite(1);' )},100); } if(start_date_string == cal_date_string){ setTimeout( function(){ $(".ui-datepicker-prev").attr( "onclick", 'mensagemLimite(0);' )},100); } }
This way when the prev/next button gets inactive it will get the onclick function i want.
-
Momin about 3 yearsHow can I prevents click effects on body, because whenever I click on arrow, my sidebar going to close Here is the video loom.com/share/a1f8bff0463e45d782b623f196d9ffce