一个快速、可访问、用户友好、与Bootstrap兼容的时间选择器插件,可生成小时/分钟选择框和AM/PM按钮,以便更轻松地选择时间。
1.在文档中加载最新版本的jQuery库和Bootstrap(可选但推荐)。
<!-- Bootstrap Stylesheet --> <link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" /> <!-- jQuery --> <script src="/path/to/cdn/jquery.slim.min.js"></script>
2.创建一个容器来容纳时间选择器。
<div id="timePicker"></div>
3.调用容器元素上的函数来生成一个基本的时间选择器。
$(function(){ $("#timePicker").timepicker(); });
4.设置时间选择器的初始值。
$("#timePicker").timepicker({ value: "08:45 PM" });
5.确定是否禁用时间选择器。默认值:false。
$("#timePicker").timepicker({ disabled: true, });
6.选择一个时间后触发一个功能。
$("#timePicker").timepicker({ onChange: function(value){ alert(value); } });
7.获取所选时间。
$("#timePicker").timepicker().getValue();
8.设置时间。
$("#timePicker").timepicker().setValue("10:10 PM");
9.启用/禁用时间选择器。
$("#timePicker").timepicker().setDisabled(); $("#timePicker").timepicker().setEnabled();