用JavaScript写一个可先择的时间输入框

以下是一个简单的 JavaScript 代码示例，用于创建一个可选择时间的输入框：

HTML：

<label for="time-input">选择时间：</label>
<input type="text" id="time-input" placeholder="请选择时间">

JavaScript：

// 初始化时间选择器
var timePicker = new Picker(document.getElementById('time-input'), {
  format: 'HH:mm',  // 时间格式
  text: {
    title: '请选择时间',  // 弹出框标题
    cancel: '取消',  // 取消按钮文本
    confirm: '确定'  // 确定按钮文本
  },
  cols: [
    {
      value: (new Date()).getHours(),  // 当前小时数
      textAlign: 'center',
      displayValues: getHours()  // 获取小时数列表
    },
    {
      divider: true,  // 分隔线
      content: ':'
    },
    {
      value: (new Date()).getMinutes(),  // 当前分钟数
      textAlign: 'center',
      displayValues: getMinutes()  // 获取分钟数列表
    }
  ]
});

// 获取小时数列表
function getHours() {
  var hours = [];
  for (var i = 0; i < 24; i++) {
    hours.push({
      text: i < 10 ? ('0' + i) : i,  // 格式化小时数
      value: i
    });
  }
  return hours;
}

// 获取分钟数列表
function getMinutes() {
  var minutes = [];
  for (var i = 0; i < 60; i++) {
    minutes.push({
      text: i < 10 ? ('0' + i) : i,  // 格式化分钟数
      value: i
    });
  }
  return minutes;
}

该代码使用了一个名为 Picker 的库来创建时间选择器，可以自定义弹出框的标题、按钮文本和时间格式等。在代码中，通过 getHours() 和 getMinutes() 函数分别获取小时数和分钟数列表，用于在时间选择器中显示可选项。最后，将时间选择器绑定到指定的输入框上（本例中为 id 为 "time-input" 的输入框）。