Question

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功能是否被触发

Answer 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');
                             }
             }
              });

Answer 2

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

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

Answer 3

＆＃13;

$(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);
    }
  });
});

＆＃13;

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

＆＃13;

Answer 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);
    });

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

4 个答案: