jquery-timepicker-addon动态显示使用

文档

需要分条件判断是否显示时间选择，而timepicker是单例模式，
初始化只有第一次生效，要想实时更新需要用到option选项设置

// #cond是条件选择select，带.selectDateInput的是两个时间选择输入框
$('#cond').change(function() {
  //设置默认显示
  var defaultOption = {
    timeFormat: "HH:mm:ss",
    dateFormat: "yy-mm-dd"
  };
  //获取分组对应时间(小时)，是否显示时间选择
  var startHour = 9;
  var enableTimePicker = true;

  //设置时间控件（防止直接输入时间）
  $('.selectDateInput').prop('readonly', 'readonly').val('');
  if (!enableTimePicker) { //不允许选择时间
    var startOption = {
      hour: startHour, //设置初始时间
      showHour: false,
      showMinute: false,
      timeInput: false, //是否允许时间编辑
      disabled: false, //是否禁用控件
      onSelect: function(selectedDateTime) {
        //选中后设置默认初始小时和结束时间（次日24小时后）
        selectedDateTime = selectedDateTime.split(' ')[0] + " 00:00:00";
        var startDate = (new Date(selectedDateTime));
        //setDate设置时间
        $(this).datetimepicker('setDate', selectedDateTime + " " + startHour + ":00:00");
        startDate.setTime(startDate.getTime() + 1000 * 3600 * (24 + startHour) - 1);
        //格式化时间显示
        var endDateStr = startDate.toLocaleString('zh-CN', {hour12: false})
                .replace(/\//g, '-')
                .replace(/\b\d\b/g, '0$&'); //添加前导零
        $('.selectDateInput:eq(1)').val(endDateStr);
      }
    };
    $('.selectDateInput:eq(0)').datetimepicker(defaultOption)
      .datetimepicker('option', startOption); //option更新（可实时刷新显示）

    $('.selectDateInput:eq(1)').datetimepicker()
      .datetimepicker('option', {
        disabled: true //禁用第二个时间选择输入框
      });
  } else { //时间选择显示
    $('.selectDateInput').datetimepicker(defaultOption)
      .datetimepicker('option', {
        showHour: true,
        showMinute: true,
        timeInput: true,
        disabled: false,
        onSelect: null
      });
  }
}).trigger('change');

为了实现动态显示折腾了好久，以后查资料还是要多看看官方api和 stackOverFlow 了。

附推荐js正则一篇

如有疑问，请文末留言交流或邮件：newbvirgil@gmail.com 本文链接 : https://newbmiao.github.io/2016/09/07/how-to-dynamic-show-jquery-timepicker-addon.html