问题
I am using the onSelect
event in order to set the minimum value of the EndDate
equal to the value set as a StartDate
. I have the same code in several pages but in one of them it does not work. If I select a value in the StartDate
, datepicker does not show when I go in the EndDate
field. The pages are loaded and handled with ajax.
My Code is as follows:
$(document).ready(function() {
$("#strStartDate").datepicker({
dateFormat: 'dd/mm/yy',
constrainInput: true,
firstDay: 1,
hideIfNoPrevNext: true,
onSelect: function(){
$("#strEndDate").datepicker( "option", "minDate", $("#strStartDate").val());
}
});
$("#strEndDate").datepicker({
dateFormat: 'dd/mm/yy',
constrainInput: true,
firstDay: 1,
hideIfNoPrevNext: true
});
});
Any help is much appreciated. Thank you in advance.
Using the ideas behind your comments I manage to do almost the thing I want
$("#strStartDate").datepicker({
dateFormat: 'dd/mm/yy',
constrainInput: true,
firstDay: 1,
hideIfNoPrevNext: true,
});
$("#strEndDate").datepicker({
dateFormat: 'dd/mm/yy',
constrainInput: true,
firstDay: 1,
hideIfNoPrevNext: true,
beforeShow: function (input, inst) {
inst.settings.minDate = $("#strStartDate").val();
}
});
The above code restricts user from putting an end date smaller than the start date however if there was already a value in end date, and you change the start date to a value bigger than the end date it should set the end date equal to the start date. This is what I was trying to do with the code below in my early code
onSelect: function(){
$("#strEndDate").datepicker( "option", "minDate", $("#strStartDate").val());
}
Any idea how to do this using the instance and not initialize again?
回答1:
Ok guys...Good news...at least for me:)
$("#strStartDate").datepicker({
dateFormat: 'dd/mm/yy',
constrainInput: true,
firstDay: 1,
hideIfNoPrevNext: true,
onSelect: function(){
if ($("#strStartDate").val() > $("#strEndDate").val()){
$("#strEndDate").val($("#strStartDate").val());
}
}
});
$("#strEndDate").datepicker({
dateFormat: 'dd/mm/yy',
constrainInput: true,
firstDay: 1,
hideIfNoPrevNext: true,
beforeShow: function (input, inst) {
inst.settings.minDate = $("#strStartDate").val();
}
});
This is the final code. It only creates one instance of each datepicker, and perform the necessary validation when you want to use it as a date range picker.
Thanks again for your guidelines
回答2:
I'm not sure this will solve your problem but try this:
$("#strStartDate").datepicker({
dateFormat: 'dd/mm/yy',
constrainInput: true,
firstDay: 1,
hideIfNoPrevNext: true,
onSelect: function(selectedDate){
$("#strEndDate").datepicker("option", "minDate",selectedDate);
}
});
回答3:
This should do what you need:
function fromTo(startDate, endDate) {
$(startDate + ", " + endDate).datepicker({
onClose: function (dateText, inst) {
if ("#" + inst.id === startDate) {
$(endDate).datepicker("option", "minDate", $(startDate).val());
}
},
beforeShow: function (input, inst) {
if (inst.id == $(endDate).get(0).id) {
inst.settings.minDate = $(startDate).val();
}
},
dateFormat: 'mm/dd/yy',
constrainInput: true,
firstDay: 1,
hideIfNoPrevNext: true
});
}
Use fromTo("#startdate", "#enddate");
来源:https://stackoverflow.com/questions/4249012/jquery-datepicker-onselect-is-not-working