如何在datetimepicker中实现时间范围的选择与显示？

看起来你需要的是时间段选择而非单个时间点，现有配置只能选单个时间，这里给你两个可行的方案：

方案一：使用专门的时间范围选择插件（推荐） #

最省心的方式是换用原生支持时间范围的插件，比如daterangepicker，它能直接生成29/08/2019 07:30 - 08:30这类格式的结果，还能轻松自定义可选时间间隔和预设范围，完美匹配你的需求。

下面是适配你场景的示例代码：

// 初始化daterangepicker
$('#quote_pre_order_date').daterangepicker({
  timePicker: true,
  timePickerIncrement: 30, // 匹配你的半小时间隔需求
  startDate: moment().format('DD/MM/YYYY') + ' 07:30',
  endDate: moment().format('DD/MM/YYYY') + ' 08:30',
  minDate: date, // 复用你现有minDate变量
  maxDate: someDate, // 复用你现有maxDate变量
  locale: {
    format: 'DD/MM/YYYY HH:mm',
    separator: ' - ',
    daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'],
    monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
    firstDay: 1
  },
  opens: 'right',
  disabledDates: [moment().day(0)], // 禁用周日，对应你的disabledWeekDays: [0]
  timePicker24Hour: false, // 保持12小时制
  ranges: {
    // 可添加常用预设时间段，方便用户快速选择
    '07:30 - 08:30': [moment().set({hour:7, minute:30}), moment().set({hour:8, minute:30})],
    '08:30 - 09:30': [moment().set({hour:8, minute:30}), moment().set({hour:9, minute:30})],
    '09:30 - 10:30': [moment().set({hour:9, minute:30}), moment().set({hour:10, minute:30})]
    // 其他需要的时间段可继续添加
  }
}, function(start, end, label) {
  // 选择完成后的回调，可按需做额外逻辑处理
  console.log(`已选择时间段: ${start.format('DD/MM/YYYY HH:mm')} - ${end.format('DD/MM/YYYY HH:mm')}`);
});

方案二：改造现有Datetimepicker实现范围选择 #

如果你不想更换插件，可以通过两个独立的datetimepicker组件分别选择开始/结束时间，再拼接成范围格式：

1. 先调整HTML结构，添加两个用于选择的输入框和一个展示结果的只读输入框：

<input type="text" id="start_time" placeholder="选择开始时间">
<input type="text" id="end_time" placeholder="选择结束时间">
<input type="text" id="quote_pre_order_date" readonly placeholder="已选时间段">

2. 初始化两个datetimepicker并实现联动逻辑：

var text_12 = '07:30';
var date = // 你的现有date变量;
var someDate = // 你的现有someDate变量;

// 初始化开始时间选择器
$('#start_time').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],
  onSelect: function(selectedDate) {
    // 设置结束时间的最小阈值为已选开始时间
    const startDate = $(this).datetimepicker('getDate');
    $('#end_time').datetimepicker('option', 'minDate', startDate);
    // 更新结果展示
    updateTimeRange();
  }
});

// 初始化结束时间选择器
$('#end_time').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: '08:30',
  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],
  onSelect: function(selectedDate) {
    // 更新结果展示
    updateTimeRange();
  }
});

// 拼接开始/结束时间为范围格式
function updateTimeRange() {
  const start = $('#start_time').val();
  const end = $('#end_time').val();
  if (start && end) {
    $('#quote_pre_order_date').val(`${start} - ${end}`);
  }
}

总结 #

如果追求开发效率和原生体验，优先选方案一的daterangepicker；如果必须保留现有插件栈，方案二的改造方式也能满足你的需求。

内容的提问来源于stack exchange，提问作者Ravi Kumar SIngh