javascript - 验证时间选择器如何选择最小和最大时间？

Question

验证时间选择器如何选择最小和最大时间？

我正在创建一个日历日期单击显示时间输入，然后我必须单击添加按钮以显示动态行时间输入字段，以便我可以添加验证一个日期时间范围的最小和最大时间

var startDateTime = '09:30:20'
var dates = new Array();
var time = new Date();

function add30Min(oldTime) {
  // var newDateTime =  moment(oldTime, "HH:mm")
  //             .add(30, 'minutes')
  //             .format('HH:mm');
  return oldTime;
}

function minus30Min(oldTime) {
  // var newDateTime =  moment(oldTime, "HH:mm")
  //             .subtract(30, 'minutes')
  //             .format('HH:mm');
  return oldTime;
}

function checkTimeValidation(elm, date) {

}
// when start time change, update minimum for end timepicker
function tpStartSelect(time, endTimePickerInst) {
  // $('#timepicker_end').timepicker('option', {
  //     minTime: {
  //         hour: endTimePickerInst.hours,
  //         minute: endTimePickerInst.minutes
  //     }
  // });
}
// when end time change, update maximum for start timepicker
function tpEndSelect(time, startTimePickerInst) {
  // $('#timepicker_start').timepicker('option', {
  //     maxTime: {
  //         hour: startTimePickerInst.hours,
  //         minute: startTimePickerInst.minutes
  //     }
  // });
}
var myControl = {
  create: function(tp_inst, obj, unit, val, min, max, step) {
    $('<input class="ui-timepicker-input" value="' + val + '" style="width:50%">')
      .appendTo(obj)
      .spinner({
        min: min,
        max: max,
        step: step,
        change: function(e, ui) { // key events
          // don't call if api was used and not key press
          if (e.originalEvent !== undefined)
            tp_inst._onTimeChange();
          tp_inst._onSelectHandler();
        },
        spin: function(e, ui) { // spin events
          tp_inst.control.value(tp_inst, obj, unit, ui.value);
          tp_inst._onTimeChange();
          tp_inst._onSelectHandler();
        }
      });
    return obj;
  },
  options: function(tp_inst, obj, unit, opts, val) {
    if (typeof(opts) == 'string' && val !== undefined)
      return obj.find('.ui-timepicker-input').spinner(opts, val);
    return obj.find('.ui-timepicker-input').spinner(opts);
  },
  value: function(tp_inst, obj, unit, val) {
    if (val !== undefined)
      return obj.find('.ui-timepicker-input').spinner('value', val);
    return obj.find('.ui-timepicker-input').spinner('value');
  }
};

function setDefaultTime(time) {
  console.log('Selected Time is:' + time)
}

function setTimePickerDynamic() {
  $('.start_event_time_picker').timepicker({
    dateFormat: '',
    timeFormat: 'HH:mm',
    datepicker: false,
    controlType: myControl,
    ampm: true,
    dropdown: true,
    onClose: function(dateText, $i) {
      var id = $(this).attr('id');
      var endTimeId = $('#' + id).parents('.divTime').find('.end_event_time_picker').attr('id');
      var startDateTextBox = $('#' + endTimeId);
      // if(startDateTextBox.val() != '') {
      //    var testStartDate = new Date(startDateTextBox.val());
      //    var testEndDate = new Date(dateText);
      //    if(testStartDate > testEndDate){ 
      //                     startDateTextBox.val(add30Min(dateText));
      //                 }
      // } else {
      //    startDateTextBox.val(add30Min(dateText));

      // }
    },
    onSelect: function(dateText, el) {
      tpStartSelect();
      var id = $(this).attr('id');
      var element = $(this),
        text;
      // get access to this Timepicker instance
      var timepicker = element.timepicker();
      text = timepicker.format(dateText);

      $('#' + id).parents('.divTime').find('.end_event_time_picker').timepicker('option', {
        'minTime': text,
        'timeFormat': 'HH:mm'
      });
      setDefaultTime(dateText);

      // var this=$(this);
      // checkTimeValidation(this, dateText);               
    },
    beforeShow: function(dateText) {
      var id = $(this).attr('id');
      var split_id = id.split("_");
      var firstIndex = parseInt(split_id[3]);
      var secondIndex = parseInt(split_id[4]);
      var elm = $(this);
      // checkTimeValidation(elm, dateText);        
    },
  }).attr('readonly', 'readonly');
  $('.end_event_time_picker').timepicker({
    dateFormat: '',
    timeFormat: 'HH:mm',
    datepicker: false,
    controlType: myControl,
    ampm: true,
    onClose: function(dateText, $i) {
      var id = $(this).attr('id');
      var endTimeId = $('#' + id).parents('.divTime').find('.start_event_time_picker').attr('id');
      var startDateTextBox = $('#' + endTimeId);
      // if(startDateTextBox.val() != '') {
      //    var testStartDate = new Date(startDateTextBox.val());
      //    var testEndDate = new Date(dateText);
      //    if(testStartDate > testEndDate){
      //                     startDateTextBox.val(minus30Min(dateText));
      //                 }
      //             } else {
      //    startDateTextBox.val(minus30Min(dateText));
      // }


    },
    onSelect: function(dateText, el) {
      var id = $(this).attr('id');
      console.log($('#' + id).parents('.divTime').find('.start_event_time_picker').val());
      console.log(dateText);
      var timepicker = element.timepicker();
      text = timepicker.format(dateText);

      $('#' + id).parents('.divTime').find('.start_event_time_picker').timepicker('option', {
        'maxTime': text,
        'timeFormat': 'HH:mm'
      });


    },
    beforeShow: function(dateText) {
      var id = $(this).attr('id');
      var split_id = id.split("_");
      var firstIndex = parseInt(split_id[3]);
      var secondIndex = parseInt(split_id[4]);

    }
  }).attr('readonly', 'readonly');
}

function addDate(date) {
  if ($.inArray(date, dates) < 0) dates.push(date);
}

function removeDate(index, date) {
  $(".div" + date).remove();
  dates.splice($.inArray(date, dates), 1);
}

function printArray(date) {
  var printArr = new String;
  var j = 0;
  dates.forEach(function(val, i) {
    var id = $("#event_dates" + val);
    if (id.length == 0) {
      ++j;
      printArr += '<div class="dynamicDivDate mb-4 div' + val + '" id="div_' + (i) + '"><div class="row mt-2 mb-2"><div class="col-md-5"><p>event_dates_times[scheduling_date_' + i + '][date]</p><input class="form-control" id="event_dates' + val + '" type="text" required="required" readonly="readonly" name="event_dates_times[scheduling_date_' + i + '][date]" value=' + val + '></div></div>' + '<div class="dynamicAddRemoveMain divTime row" id="dynamicTime_' + j + '"><div class="col-md-5"><input id="start_event_time_' + (j) + '_' + (j + i) + '" type="text" required class="form-control start_event_time_picker" autocomplete="off" placeholder="Select start Time"  name="event_dates_times[scheduling_date_' + i + '][time][scheduling_time_' + (j) + '][start_time]"></div>' + '<div class="col-md-5"><input id="end_event_time_' + (j) + '_' + (j + i) + '" type="text" class="form-control end_event_time_picker" required autocomplete="off" placeholder="Select end Time" name="event_dates_times[scheduling_date_' + i + '][time][scheduling_time_' + (j) + '][end_time]"></div><div class=" col-lg-2 col-md-2 col-sm-2 col-2"><button type="button" name="add" id="add-btn-date" required class="btn_add_mtinput_time"><i class="fas fa-plus"></i></button></div></div></div>';
    }
  });
  $('#show_calender_div').append(printArr);
  setTimePickerDynamic();
}
// Adds a date if we don't have it yet, else remove it
function addOrRemoveDate(date) {
  var index = $.inArray(date, dates);
  if (index >= 0) {
    removeDate(index, date);
  } else {
    addDate(date);
    printArray(date);
  }
}
// Takes a 1-digit number and inserts a zero before it
function padNumber(number) {
  var ret = new String(number);
  if (ret.length == 1) ret = "0" + ret;
  return ret;
}
$("#mdp-demo").multiDatesPicker({
  dateFormat: 'dd-mm-yy',
  maxPicks: 5,
  minDate: 0,
  onSelect: function(dateText) {
    addOrRemoveDate(dateText);
  },
  beforeShowDay: function(date) {
    var year = date.getFullYear();
    // months and days are inserted into the array in the form, e.g "01/01/2009", but here the format is "1/1/2009"
    var month = padNumber(date.getMonth() + 1);
    var day = padNumber(date.getDate());
    // This depends on the datepicker's date format
    var dateString = month + "-" + day + "-" + year;
    var gotDate = $.inArray(dateString, dates);
    if (gotDate >= 0) {
      // Enable date so it can be deselected. Set style to be highlighted
      return [true, "ui-state-highlight"];
    }
    // Dates not in the array are left enabled, but with no extra style
    return [true, ""];
  }
});
$(document).on('click', '.btn_add_mtinput_time', function() {
  // $(".btn_add_mtinput").click(function(e){
  var max = 3;
  var total = $(this).parents(".dynamicDivDate").children('.divTime').length;
  var lastid = $(this).parents(".dynamicDivDate").children(".divTime:last").attr("id");
  var checkinput = $(this).parents(".dynamicDivDate").children(".divTime:last");
  if (checkinput.find('.start_event_time_picker').val() == '' || checkinput.find('.end_event_time_picker').val() == '') {
    // alert('Please select time then add new fields');
    // return false;
  }
  var split_id = lastid.split("_");
  var nextindex = Number(split_id[1]) + 1;
  // console.log($(this).parents(".dynamicAddRemoveMain").siblings('.divTime').length);
  if (total < max) {
    var id = $(this).parents(".dynamicAddRemoveMain").parents('.dynamicDivDate').attr('id');
    var split_id = id.split("_");
    var getindex = parseInt(split_id[1]) + 1;
    $(this).parents(".dynamicAddRemoveMain").parents('.dynamicDivDate').append('<div class="row mt-2 mb-2 divTime" id="dynamicTime_' + nextindex + '"><div class="col-lg-5 col-md-5 col-sm-5 col-5"><input id="start_event_time_' + getindex + '_' + (nextindex) + '" type="text" class="form-control start_event_time_picker" required autocomplete="off" placeholder="Select start Time" name="event_dates_times[scheduling_date_' + split_id[1] + '][time][scheduling_time_' + (nextindex) + '][start_time]"></div>' + '<div class="col-lg-5 col-md-5 col-sm-5 col-5"><input id="end_event_time_' + getindex + '_' + (getindex) + '" type="text" required class="form-control end_event_time_picker" autocomplete="off" placeholder="Select end Time" name="event_dates_times[scheduling_date_' + split_id[1] + '][time][scheduling_time_' + (nextindex) + '][end_time]"></div><div class="col-lg-2 col-md-2 col-sm-2 col-2"><button type="button" class="btn_remove_mtinput btn_remove_mtinput_time"><i class="far fa-trash-alt"></i></button></div></div>');
    setTimePickerDynamic();
  } else {
    alert("Maximum limit 3");
  }
});
$(document).on('click', '.btn_remove_mtinput_time', function() {
  $(this).parents('.divTime').remove();
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>

<link href="https://code.jquery.com/ui/1.12.1/themes/pepper-grinder/jquery-ui.css" rel="stylesheet" />
<link href="https://cdn.rawgit.com/dubrox/Multiple-Dates-Picker-for-jQuery-UI/master/jquery-ui.multidatespicker.css" rel="stylesheet" />

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.4.5/jquery-ui-timepicker-addon.min.css">


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js" crossorigin="anonymous"></script>


<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.11.1.js"></script>
<script src="https://cdn.rawgit.com/dubrox/Multiple-Dates-Picker-for-jQuery-UI/master/jquery-ui.multidatespicker.js"></script>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.4.5/jquery-ui-timepicker-addon.min.js"></script>




<div id="mdp-demo"></div>
<div id="show_calender_div"></div>

此日历选择多个日期，然后显示带有输入开始和结束时间的新行。然后单击添加按钮显示所选日期开始时间和结束时间的新行如何验证每个新行和前一行的开始时间和结束时间。

标签： javascripthtmljqueryvalidationtimepicker