Datetime picker validation start date should be less than end date not working

问题

Jquery Date time picker validation start date should be less than end date, and my current code is not working

$(document).ready(function(){
  $("#startdate").datetimepicker({
    format:'Y-m-d H:i:s',
    onSelect: function (selected) {
      var dt = new Date(selected);
      dt.setDate(dt.getDate() + 1);
 $("#enddate").datetimepicker("option", "minDate", dt);
}                                 
});
  $("#enddate").datetimepicker({
    format:'Y-m-d H:i:s',
    onSelect: function (selected) {
      var dt1 = new Date(selected);
      dt1.setDate(dt1.getDate() - 1);
      $("#startdate").datetimepicker("option", "maxDate", dt1);
    }
  });
});

<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label >Starts ON</label>
<input id="startdate" type="text" placeholder="YYYY-MM-DD HH:MM:SS" class="linecons-calendar"/>
<label>Ends ON</label>
<input id="enddate" type="text" placeholder="YYYY-MM-DD HH:MM:SS" class="linecons-calendar"/>

I am not able to validate onselect function is not getting triggered

回答1:

Try this. Its working for me.

var startDate;
         $("#startdate").datetimepicker({
                     timepicker:true,
                     closeOnDateSelect:false,
                     closeOnTimeSelect: true,
                     initTime: true,
                     format: 'd-m-Y H:m',
                     minDate: 0,
                     roundTime: 'ceil',
                     onChangeDateTime: function(dp,$input){
                               startDate = $("#startdate").val();
                                                           }
                                                           });
        $("#enddate").datetimepicker({
                     timepicker:true,
                     closeOnDateSelect:false,
                     closeOnTimeSelect: true,
                     initTime: true,
                     format: 'd-m-Y H:m',
                     onClose: function(current_time, $input){
                            var endDate = $("#enddate").val();
                            if(startDate>endDate){
                                   alert('Please select correct date');
                             }
             }
              });

回答2:

function datetimepicker()
{
    var startdate = $('#startdate').val();
    var enddate = $('#enddate').val();

    $("#startdate").datetimepicker('setEndDate', enddate);
    $("#enddate").datetimepicker('setStartDate', startdate);
}
$(document).ready(function(){
    datetimepicker();
});

回答3:

$(document).ready(function(){
  $("#startdate").datetimepicker({
    format:'Y-m-d H:i:s',
    onSelect: function (selected) {
      var dt = new Date(selected);
      dt.setDate(dt.getDate() + 1);
 $("#enddate").datetimepicker("option", "minDate", dt);
}                                 
});
  $("#enddate").datetimepicker({
    format:'Y-m-d H:i:s',
    onSelect: function (selected) {
      var dt1 = new Date(selected);
      dt1.setDate(dt1.getDate() - 1);
      $("#startdate").datetimepicker("option", "maxDate", dt1);
    }
  });
});

<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label >Starts ON</label>
<input id="startdate" type="text" placeholder="YYYY-MM-DD HH:MM:SS" class="linecons-calendar"/>
<label>Ends ON</label>
<input id="enddate" type="text" placeholder="YYYY-MM-DD HH:MM:SS" class="linecons-calendar"/>

来源：https://stackoverflow.com/questions/30589514/datetime-picker-validation-start-date-should-be-less-than-end-date-not-working

标签

jquery

datetimepicker