【亲测免费】 jQuery Timepicker 插件使用教程

项目介绍

jQuery Timepicker 是一个轻量级的、可自定义的时间选择器插件，灵感来源于 Google Calendar。它支持鼠标和键盘导航，并且压缩后大小仅为 5.5kb。该插件需要 jQuery 3.0 及以上版本。

项目快速启动

安装

首先，克隆项目仓库到本地：

git clone https://github.com/jonthornton/jquery-timepicker.git

进入项目目录并安装开发依赖：

cd jquery-timepicker
npm install

引入文件

在 HTML 文件中引入必要的 CSS 和 JavaScript 文件：

<link rel="stylesheet" href="jquery.timepicker.min.css">
<script src="jquery.min.js"></script>
<script src="jquery.timepicker.min.js"></script>

基本使用

在页面中添加一个输入框，并初始化时间选择器：

<input type="text" id="basicExample">
<script>
  $(document).ready(function() {
    $('#basicExample').timepicker();
  });
</script>

应用案例和最佳实践

设置默认滚动位置

如果未选择时间，可以将滚动位置设置为当前时间：

<input type="text" id="scrollDefaultExample">
<script>
  $(document).ready(function() {
    $('#scrollDefaultExample').timepicker({
      'scrollDefault': 'now'
    });
  });
</script>

动态设置时间

使用 JavaScript Date 对象动态设置时间：

<input type="text" id="setTimeExample">
<button id="setTimeButton">设置当前时间</button>
<script>
  $(document).ready(function() {
    $('#setTimeExample').timepicker();
    $('#setTimeButton').on('click', function() {
      $('#setTimeExample').timepicker('setTime', new Date());
    });
  });
</script>

步长设置

生成不同精度的下拉选项：

<input type="text" id="stepExample1">
<input type="text" id="stepExample2">
<script>
  $(document).ready(function() {
    $('#stepExample1').timepicker({
      'step': 15
    });
    $('#stepExample2').timepicker({
      'step': function(i) {
        return (i % 2 === 0) ? 15 : 45;
      }
    });
  });
</script>

典型生态项目

Datepair 插件

jQuery Timepicker 可以与 jquery-datepair 插件一起使用，以实现日期和时间的联动选择：

<p id="datepairExample">
  <input type="text" class="date start">
  <input type="text" class="time start">
  to
  <input type="text" class="time end">
  <input type="text" class="date end">
</p>
<script src="datepair.min.js"></script>
<script src="jquery.datepair.min.js"></script>
<script>
  $(document).ready(function() {
    $('#datepairExample').datepair();
  });
</script>

通过以上步骤，您可以快速上手并使用 jQuery Timepicker 插件，实现灵活的时间选择功能。