jQuery datetimepicker选时间时不显示分钟选项如何解决

问题现象 #

项目中使用jQuery datetimepicker插件实现仅选时间、不选日期的功能，点击绑定输入框后控件仅展示hours（小时）选择项，没有分钟选择入口，无法选择分钟。
原有初始化代码：

$(document).ready(function() {
    $.datetimepicker.setDateFormatter('moment');
    $(".timepicker").datetimepicker({
        datepicker: false,
        minuteStepping: 15,
        format: 'hh:mm tt',
        pickTime: true,
        defaultDate: new Date(1979, 0, 1, 8, 0, 0, 0),
        language: 'en',
        use24hours: true,
        timeOnly: true,
    });
})

运行效果：

问题根因 #

配置项存在逻辑冲突：

• 开启了use24hours: true（24小时制模式）
• 但format配置用了12小时制的格式规则：hh代表12小时制小时、tt代表12小时制的AM/PM上下午标识
  格式配置和时制配置不匹配，会导致插件时间选择视图渲染异常，无法正常加载分钟选择列。
  另外补充：部分新版本插件中，分钟步长的配置参数为step，旧版的minuteStepping在新版本中不会生效。

修复方案 #

根据实际需要的时制，二选一调整配置即可：

• 方案1：使用24小时制
  把format改为24小时制对应格式，同步将分钟步长参数改为兼容新版本的step，修正后代码：

  $(document).ready(function() {
      $.datetimepicker.setDateFormatter('moment');
      $(".timepicker").datetimepicker({
          datepicker: false,
          step: 15,
          format: 'HH:mm',
          pickTime: true,
          defaultDate: new Date(1979, 0, 1, 8, 0, 0, 0),
          language: 'en',
          use24hours: true,
          timeOnly: true
      });
  })
  

• 方案2：使用12小时制（带AM/PM标识）
  删除use24hours: true配置，同步修正步长参数，修正后代码：

  $(document).ready(function() {
      $.datetimepicker.setDateFormatter('moment');
      $(".timepicker").datetimepicker({
          datepicker: false,
          step: 15,
          format: 'hh:mm tt',
          pickTime: true,
          defaultDate: new Date(1979, 0, 1, 8, 0, 0, 0),
          language: 'en',
          timeOnly: true
      });
  })
  

调整后刷新页面，控件就会正常展示小时、分钟两列选择项，分钟会按照设置的15分钟间隔生成选项。

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