当前位置：首页 > jquery

jquery时间控件

2026-02-03 15:31:46jquery

jQuery 时间控件推荐与使用

1. 使用 jQuery UI Datepicker
jQuery UI 提供了一个简单易用的日期选择控件，支持主题定制和国际化。
引入 jQuery 和 jQuery UI 库后，初始化方式如下：

jquery时间控件

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

<input type="text" id="datepicker">
<script>
$(function() {
  $("#datepicker").datepicker();
});
</script>

2. 使用 Timepicker 插件
若需时间选择功能，可搭配 jquery-ui-timepicker-addon 扩展：

jquery时间控件

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.6.3/jquery-ui-timepicker-addon.min.js"></script>
<input type="text" id="datetimepicker">
<script>
$(function() {
  $("#datetimepicker").datetimepicker();
});
</script>

3. 轻量级插件 Flatpickr
Flatpickr 支持日期和时间选择，且不依赖 jQuery UI：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<input type="text" id="flatpickr-date">
<script>
  flatpickr("#flatpickr-date", {
    enableTime: true,
    dateFormat: "Y-m-d H:i"
  });
</script>

4. Bootstrap 风格的 Datetimepicker
适用于 Bootstrap 项目的插件：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<input type="text" id="bootstrap-datetime">
<script>
$(function() {
  $('#bootstrap-datetime').datetimepicker();
});
</script>