Question

我有两个时间选择器，一个用于开始时间，另一个用于结束时间，结束时间必须始终大于开始时间。我正在使用eonasdan datetimepicker。如果开始日期大于结束日期，则不应允许或我们需要弹出。请帮我解决这个问题

这是我到目前为止所做的事情

$('#starttime,#endtime').datetimepicker({
  format: 'HH:mm'
});

var start_time = $('#Start_Time').val();

var end_time = $('#End_Time').val();

if (Date.parse(start_time) > Date.parse(end_time)) {
  alert('start time should be smaller');
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker-standalone.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment-with-locales.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
  <div class="col-xs-6">
    <div class="form-group">
      <label for="start_time" class="col-form-label">Start Time</label>
      <div class='input-group date' id='starttime'>
        <input type='text' class="form-control" id="Start_Time" />
        <span class="input-group-addon">
            <span class="glyphicon glyphicon-time"></span>
        </span>
      </div>
    </div>
  </div>
  <div class="col-xs-6">
    <div class="form-group">
      <label for="end_time" class="col-form-label">End Time</label>
      <div class='input-group date' id='starttime'>
        <input type='text' class="form-control" id="End_Time" />
        <span class="input-group-addon">
            <span class="glyphicon glyphicon-time"></span>
        </span>
      </div>
    </div>
  </div>
</div>

Answer 1

您可能需要更新每个endTime.minDate事件的startTime.change。试着效仿我的例子：

function TimePickerCtrl($) {
  var startTime = $('#starttime').datetimepicker({
    format: 'HH:mm'
  });
  
  var endTime = $('#endtime').datetimepicker({
    format: 'HH:mm',
    minDate: startTime.data("DateTimePicker").date()
  });
  
  function setMinDate() {
    return endTime
      .data("DateTimePicker").minDate(
        startTime.data("DateTimePicker").date()
      )
    ;
  }
  
  var bound = false;
  function bindMinEndTimeToStartTime() {
  
    return bound || startTime.on('dp.change', setMinDate);
  }
  
  endTime.on('dp.change', () => {
    bindMinEndTimeToStartTime();
    bound = true;
    setMinDate();
  });
}

$(document).ready(TimePickerCtrl);

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker-standalone.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment-with-locales.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>

<div class="container" style="padding-top: 50px">

<div class="row">
  <div class="col-xs-6">
    <div class="form-group">
      <label for="start_time" class="col-form-label">Start Time</label>
      <div class='input-group date' id='starttime'>
        <input type='text' class="form-control" id="Start_Time" />
        <span class="input-group-addon">
            <span class="glyphicon glyphicon-time"></span>
        </span>
      </div>
    </div>
  </div>
  <div class="col-xs-6">
    <div class="form-group">
      <label for="end_time" class="col-form-label">End Time</label>
      <div class='input-group date' id='endtime'>
        <input type='text' class="form-control" id="Start_Time" />
        <span class="input-group-addon">
            <span class="glyphicon glyphicon-time"></span>
        </span>
      </div>
    </div>
  </div>
</div>
</div>

Answer 2

 var startDate = Date.parse($('#txtdatetimepicker1').val());
 var endDate = Date.parse($('#txtdatetimepicker2').val());
 if (startDate >= endDate) { alert("Please enter proper date") }

Answer 3

在end_time文本框中禁用过去的日期而不是开始日期。像这样的东西，请替换你的HTML代码中的文本框ID。

$( "#startDate" ).datepicker({
  onSelect: function(dateText, inst) {
    $('#endDate').datepicker('option', 'minDate', $(this).val());
  },
  minDate: 0
});
$( "#endDate" ).datepicker({
  onSelect: function(dateText, inst) {
    if($( "#startDate" ).val() == ''){
      $( "#endDate" ).val('');
    }
  },
})

Answer 4

我用timepicker做了一些事情

Fiddle Link Over here...!

https://fiddle.jshell.net/kxL0f1gc/

<link href="https://adminlte.io/themes/AdminLTE/plugins/timepicker/bootstrap-timepicker.min.css">

<script src="https://adminlte.io/themes/AdminLTE/plugins/timepicker/bootstrap-timepicker.min.js"></script>

试试此HTML代码

                   <div class="col-md-12">
                        <div class="row"> 
                          <div class="col-md-6">
                            <div class="form-group bootstrap-timepicker">
                                <label class="control-label">Start Time</label>
                                <input id="start" name="start" ng-model="start" type="text" required="required" class="form-control start" />
                            </div>
                          </div>
                          <div class="col-md-6">
                            <div class="form-group bootstrap-timepicker">
                                <label class="control-label">End Time</label>
                                <input id="end" name="end" ng-model="end" type="text" required="required" class="form-control end" />
                            </div>
                          </div>
                        </div>
                    </div>

$('.start, .end').timepicker({
  showInputs: false,
  minuteStep: 1,
});
$( "#end, #start" ).change(function() {
var time = $("#start").val();
var hours = Number(time.match(/^(\d+)/)[1]);
var minutes = Number(time.match(/:(\d+)/)[1]);
var AMPM = time.match(/\s(.*)$/)[1];
if(AMPM == "PM" && hours<12) hours = hours+12;
if(AMPM == "AM" && hours==12) hours = hours-12;
var sHours = hours.toString();
var sMinutes = minutes.toString();
if(hours<10) sHours = "0" + sHours;
if(minutes<10) sMinutes = "0" + sMinutes;
var time2 = $("#end").val();
if(time2=="")
  {
   var time2 = "00:00 AM";
  }
  var hours2 = Number(time2.match(/^(\d+)/)[1]);
  var minutes2 = Number(time2.match(/:(\d+)/)[1]);
  var AMPM2 = time2.match(/\s(.*)$/)[1];
  if(AMPM2 == "PM" && hours2<12) hours2 = hours2+12;
  if(AMPM2 == "AM" && hours2==12) hours2 = hours2-12;
  var sHours2 = hours2.toString();
  var sMinutes2 = minutes2.toString();
  if(hours2<10) sHours2 = "0" + sHours2;
  if(minutes2<10) sMinutes2 = "0" + sMinutes2;
  var comparehour = sHours2-sHours;
  var comparemin = sMinutes2-sMinutes;
  if(comparehour<0)
  {
   $("#end").val(time);
  }
 else if((comparehour==0) && (comparemin<0))
  {
   $("#end").val(time);
  }
  });

Answer 5

使用AM和PM设置时间验证

   var startTime = $('.StartTime').datetimepicker({ 
     "allowInputToggle": true,
     "showClose": true,
     "showClear": true,
     "showTodayButton": true,
     "format": ' hh:mm A',
     "useCurrent": false 
   })

   var endTime =  $('.EndTime').datetimepicker({ 
    "allowInputToggle": true,
    "showClose": true,
    "showClear": true,
    "showTodayButton": true,
    "format": ' hh:mm A',
    "useCurrent": false })
   .on("dp.change", function (e) {
        minDate: startTime.data("DateTimePicker").date()
        bindMinEndTimeToStartTime(startTime);
        bound = true;
        setMinDate(endTime,startTime);
    });


    function setMinDate(endTime,startTime) {
        return 
        endTime.data("DateTimePicker").minDate(startTime.data("DateTimePicker").date()
      );
   }

  function bindMinEndTimeToStartTime(startTime) {
      var bound = false;
      return bound || startTime.on('dp.change', setMinDate);
  }

结束时间应大于开始时间

5 个答案: