jQuery Datepicker onSelect is not working

问题:

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");