jQuery中的时间选择器

在前端开发中，经常要处理时间相关的问题，例如日期选择、时间戳转换等等。而jQuery中提供了很多方便快捷的时间选择器，本文将介绍其中的几款。

datepicker

datepicker是jQuery UI中的一个组件，可以实现对日期的选择。使用方法如下：

1. 引入jQuery和jQuery UI库

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

2. 控件初始化

$(function() {
  $('#datepicker').datepicker();
});

其中，#datepicker为需要绑定datepicker的input元素的id。

效果图如下：

datetimepicker

datetimepicker是jQuery UI的datetimepicker组件，可以实现对日期和时间的选择。使用方法如下：

1. 引入jQuery、jQuery UI库和datetimepicker库

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.min.css" integrity="sha512-FIF+1zrCEZdASbRDFWJ8gZWdfPjYWx+edocSaJwBkSkU0OhV+DbZ6Uv7VWioQ8n5a5FZA+w5/5I5w+2dmbcxg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js" integrity="sha512-g5wtwcw0QfvyPbTVzLHvYjsXH/+GGMJ/bfDgQL6IGpEMe7ZZw8xad/23VPLpcu6FWB+j9lLW8n+Ux7yubtm2vQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

2. 控件初始化

$(function() {
  $('#datetimepicker').datetimepicker();
});

其中，#datetimepicker为需要绑定datetimepicker的input元素的id。

效果图如下：

timepicker

timepicker是jQuery插件的一个组件，可以实现对时间的选择。使用方法如下：

1. 引入jQuery和timepicker库

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.13.18/jquery.timepicker.min.css" integrity="sha512-eKZXZQxi5oTZwRoAI5iOFfCMg5BYL+9XH22GtwfCoZKBBzZo/z/RN7GwHc+ysf7LnUnncCvU9X54W8CbuUkFwg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.13.18/jquery.timepicker.min.js" integrity="sha512-kbe68u3q1D8dKwUKsMX44eGYyTT9hezMbTcRl0rCY+WpO1AFkbInM24GmRi4xIfo87yF4ekqYtgyzbzIGNKiSg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

2. 控件初始化

$(function() {
  $('#timepicker').timepicker();
});

其中，#timepicker为需要绑定timepicker的input元素的id。

效果图如下：

以上就是jQuery中几款常用的时间选择器的介绍。使用起来相对简单，只需引入相应的库并初始化即可。如果你有更好的时间选择器推荐，欢迎留言讨论。