如何动态设置jQuery UI DateTimePicker的showSeconds选项

我之前也遇到过类似的需求，要根据动态标志切换DateTimePicker的秒数滑块显示/隐藏，这里分享两种靠谱的实现方式，你可以根据场景选择：

方式一：轻量更新（推荐，适合频繁切换） #

DateTimePicker作为jQuery UI的扩展组件，支持通过option方法直接修改配置项，配合refresh方法就能实时更新UI，不需要重新初始化控件，效率更高：

步骤1：初始化控件 #

先设置默认的秒滑块状态，比如默认隐藏：

// 初始化DateTimePicker，默认隐藏秒滑块
$('#your-datetime-input').datetimepicker({
  showSecond: false,
  timeFormat: 'HH:mm', // 初始格式不含秒
  // 其他你的配置，比如dateFormat、minDate等
});

步骤2：动态切换函数 #

写一个通用函数，根据传入的标志值切换秒滑块：

function toggleSecondsSlider(shouldShow) {
  // 更新showSecond配置
  $('#your-datetime-input').datetimepicker('option', 'showSecond', shouldShow);
  // 同步修改timeFormat：显示秒时要包含ss，否则滑块不会出现
  $('#your-datetime-input').datetimepicker('option', 'timeFormat', shouldShow ? 'HH:mm:ss' : 'HH:mm');
  // 刷新控件，确保UI立刻更新
  $('#your-datetime-input').datetimepicker('refresh');
}

调用示例 #

比如根据某个标志变量切换：

// 假设flag是你的动态标志值，true显示秒滑块，false隐藏
const flag = true;
toggleSecondsSlider(flag);

方式二：销毁后重新初始化（适合复杂配置场景） #

如果遇到某些极端情况（比如旧版本组件不支持option实时更新），可以先销毁现有控件，再重新初始化并传入新的showSecond值：

function updateDateTimePicker(showSeconds) {
  // 先销毁已存在的控件
  $('#your-datetime-input').datetimepicker('destroy');
  
  // 重新初始化，传入最新配置
  $('#your-datetime-input').datetimepicker({
    showSecond: showSeconds,
    timeFormat: showSeconds ? 'HH:mm:ss' : 'HH:mm',
    // 保留你原来的所有其他配置项
    dateFormat: 'yy-mm-dd',
    stepMinute: 5
  });
}

注意事项 #

• 一定要配合timeFormat的修改：如果showSecond设为true，但timeFormat里没有ss，秒滑块依然不会显示，因为组件不知道要在哪里渲染秒数输入框。
• 优先使用方式一，因为销毁再初始化会丢失当前输入的临时值，用户体验不如直接更新配置。

内容的提问来源于stack exchange，提问作者Rob