如何让时间选择器仅显示15分钟间隔的分钟选项？

你当前使用原生<input type="time">的step="900"只能控制输入步进，无法隐藏非目标分钟选项。结合你已引入的gijgo库，直接用它的TimePicker组件就能实现精准控制下拉列表显示的分钟值，具体修改如下：

1. 修改HTML结构 #

将原生时间输入框改为普通文本输入框（gijgo会自动渲染为时间选择器）：

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Week Ending View</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
  <link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.7.0/css/all.css'>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script src="https://unpkg.com/gijgo@1.9.14/js/gijgo.min.js" type="text/javascript"></script>
  <link href="https://unpkg.com/gijgo@1.9.14/css/gijgo.min.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <div class="field">
    <label class="form-label">Start Time</label>
    <div class="input-group mb-3">
      <!-- 移除type="time"和step属性 -->
      <input id="timeInput" class="form-control" placeholder="Time To Enter" aria-label="time to enter" aria-describedby="basic-addon1">
    </div>
  </div>
</body>

2. 初始化gijgo时间选择器 #

替换原来的input事件监听代码，用gijgo的配置直接指定可选分钟：

// 初始化gijgo时间选择器
$('#timeInput').timepicker({
    minutes: [0, 15, 30, 45], // 仅显示这些分钟值
    step: 15, // 确保时间步进为15分钟
    format: 'HH:mm', // 时间格式
    defaultTime: '00:00' // 默认显示的时间（可选）
});

效果说明 #

这样配置后，时间选择器的分钟下拉列表只会显示00、15、30、45四个选项，完全符合你截图中的需求，同时不需要额外的自动调整逻辑——用户只能选择指定的时间值，避免了手动输入非目标时间的情况。

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