使用JavaScript时间选择器可以更好地控制用户输入的时间输入。

秒、分钟还是小时？有了这个用户友好的时间选择器jQuery插件，访问者将能够在自定义步骤中选择一个小时以及分钟和秒。自动完成功能将建议与之前输入的值最匹配。

如何使用它:

1.在页面上包括必要的jQuery库和jQuery UI的自动完成小部件。

<link rel="stylesheet" href="/path/to/cdn/jquery-ui.min.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/cdn/jquery-ui.min.js"></script>

2.加载jQuery timeAutocomplete插件的文件。

<!-- Core -->
<script src="./src/jquery.timeAutocomplete.js"></script>

<!-- AM/PM extension -->
<script src="./src/formatters/ampm.js"></script>

<!-- 24hr extension -->
<script src="./src/formatters/24hr.js"></script>

<!-- French time format extension -->
<script src="./src/formatters/french.js"></script>

3.将时间选择器连接到输入字段。就是这样。

<input type="text" id="example" />

$('#example').timeAutocomplete({
  // options here
});

4.使用启动小时和结束小时选项。

$('#example').timeAutocomplete({
  start_hour: 0,
  end_hour: 24,
});

5.创建一个智能时间范围选择器。我们使用来自选择器“到”字段上的一组选项中的选项。这使得时间自动完成能够意识到其他字段中的时间。如果“from”字段为“8:00 AM”，并且我们开始在“to”字段中键入“4”，它将显示4个“PM”选项的列表，而不是4个“AM”选项。

<input type="text" id="from-ampm" />
<input type="text" id="to-ampm" />

$('#from-ampm').timeAutocomplete({
  increment: 5,
  value: '08:00:00'
});

$('#to-ampm').timeAutocomplete({
  increment: 5,
  from_selector: '#from-ampm',
  value: '17:30:00'
});

6.指定您希望时间下拉列表出现的增量（5、10、15、30、60）。15分钟的增量将产生：[上午7:15，上午7:30，上午7:45]。

$('#example').timeAutocomplete({
  increment: 5
});

7.设置要使用的时间格式化程序：ampm、24hr或french。

$('#example').timeAutocomplete({
  formatter: '24hr',
});

8.更多插件选项。

$('#example').timeAutocomplete({

  // jQuery UI Autocomplete Options
  auto_complete: {
    delay: 0,
    autoFocus: true,
    minLength: 0
  },

  // injects the current time as a value
  auto_value: true,

  // populates the time field with the default value
  blur_empty_populate: true,

  // allows you to pass in a 24hr (H:i:s) time to be formatted and displayed in the field. 
  value: '',

  // AM/PM text
  pm_text: 'PM',
  am_text: 'AM',

  // over-ride if not using built-in populator
  times: [], 

  // the default empty value
  empty: {
    h: '12',
    m: '00',
    sep: ':',
    postfix: ' PM'
  }
  
});

9.API方法。

$('#example').timeAutocomplete({
  formatter: '24hr',
});

预览截图

自动完成功能 用户友好时间选择器 jQuery时间自动完成