日期时间选择器验证开始日期应小于结束日期不起作用答案

【问题标题】：Datetime picker validation start date should be less than end date not working日期时间选择器验证开始日期应小于结束日期不起作用
【发布时间】：2020-05-06 22:25:15
【问题描述】：

Jquery 日期时间选择器 验证开始日期应该小于结束日期，我当前的代码不起作用

$(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"/>

我无法验证 onselect 函数没有被触发

【问题讨论】：

它是否正常工作，因为当我在我的系统上运行它时，它没有显示这两个字段的任何日历（datetimepicker）。
首先加载 'jquery.min.js' 脚本，然后添加 'jquery-ui.js' 脚本。
您尚未加载“datetimepicker.js”。从plugins.jquery.com/datetimepicker下载

标签： jquery datetimepicker

【解决方案1】：

试试这个。它对我有用。

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"/>

【讨论】：

【解决方案4】：

$(document).ready(function () {
    bindCalendars();
    ....
});

function bindCalendars() {
    $('#startdate').unbind();
    $('#enddate').unbind();

    $('#startdate').datetimepicker({
        format: 'Y-m-d H:i:s'
    });
    $('#enddate').datetimepicker({
        format: 'Y-m-d H:i:s',
        useCurrent: false
    });
    $("#startdate").on("change.datetimepicker", function (e) {
        $('#enddate').datetimepicker('minDate', e.date);
    });
    $("#enddate").on("change.datetimepicker", function (e) {
        $('#startdate').datetimepicker('maxDate', e.date);
    });

【讨论】：