时间戳

首页 > 解决方案 > 如何在 datetimepicker 中显示时间范围？

jquery - 如何在 datetimepicker 中显示时间范围？

问题描述

我正在努力解决 datetimepicker 插件中的一个问题。因为我需要允许用户选择具有一定时间范围的日期。例如：

2019/08/29 07:30 - 08:30

但我目前的实现2019/08/29 07:30只允许我选择日期时间。下面是我的 Jquery 代码：

<script type="text/javascript">
  text_12 = '07:30';
  $('#quote_pre_order_date').datetimepicker({
    dateFormat: 'dd/mm/yy',
    timeFormat: 'hh:mm a',
     allowTimes:[
       '07:30', '08:00','08:30', '09:00','09:30',
       '10:00','10:30', '11:00','11:30', '12:00','12:30', '13:00','13:30', '14:00'
     ],
     minDate: date,
     maxDate: someDate,
     useCurrent: false,
     defaultTime: text_12,
     icons: {

      up: "fa fa-chevron-circle-up",
      down: "fa fa-chevron-circle-down",
      next: 'fa fa-chevron-circle-right',
      previous: 'fa fa-chevron-circle-left'
    },
     disabledWeekDays: [0]
  });
</script>

以下是我当前的 datetimepicker 的外观： 在此处输入图像描述

但我想将时间格式显示为07:30 - 08:30. 我尝试了很多方法，但都没有成功。如果有人可以，请提供帮助，或者如果您能推荐一些可以解决我的问题的插件，它也会更好。

谢谢

标签： jquerydatetimepicker

解决方案

对于您的用例，我将使用jQuery UI Timepicker插件：

这是一个 jQuery UI 时间选择器插件，可与其他官方 jQuery UI 小部件匹配。基于现有的日期选择器，它将与您的表单很好地融合并使用您选择的 jQuery UI 主题。该插件很容易集成到您的表单中以输入时间（小时/分钟）。

有一个示例与您使用插件的两个实例利用时间范围的用例相匹配：

$(document).ready(function() {
   $('#timepicker_start').timepicker({
       showLeadingZero: false,
       onSelect: tpStartSelect,
       maxTime: {
           hour: 7, minute: 30
       }
   });
   $('#timepicker_end').timepicker({
       showLeadingZero: false,
       onSelect: tpEndSelect,
       minTime: {
           hour: 14, minute: 30
       }
   });
});

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

推荐阅读