jquery时间控件

以下是关于 jQuery 时间控件的常用解决方案和实现方法：

使用 jQuery UI Datepicker

jQuery UI 提供了一个功能丰富的日期选择控件，支持时间选择需结合插件或扩展。

引入 jQuery 和 jQuery UI 库：

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

基础日期选择：

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

结合 Timepicker 插件

jQuery UI Datepicker 默认不支持时间选择，需额外引入 jquery-ui-timepicker-addon。

引入插件：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.6.3/jquery-ui-timepicker-addon.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.6.3/jquery-ui-timepicker-addon.min.css">

实现日期时间选择：

$(function() {
  $("#datetimepicker").datetimepicker({
    dateFormat: "yy-mm-dd",
    timeFormat: "HH:mm"
  });
});

使用 Bootstrap DateTimePicker

基于 Bootstrap 的 bootstrap-datetimepicker 提供更现代化的界面。

引入依赖：

<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/moment.js/2.29.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>

初始化控件：

$(function() {
  $('#datetimepicker1').datetimepicker({
    format: 'YYYY-MM-DD HH:mm'
  });
});

移动端优化方案

jQuery Mobile Datepicker 或 Flatpickr 更适合移动设备。

引入 Flatpickr：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

初始化：

flatpickr("#datepicker", {
  enableTime: true,
  dateFormat: "Y-m-d H:i"
});

自定义时间范围限制

多数插件支持设置最小/最大时间：

$("#datepicker").datepicker({
  minDate: new Date(2023, 0, 1),
  maxDate: "+1M +10D"
});

本地化支持

通过加载语言文件实现本地化：

$.datepicker.setDefaults($.datepicker.regional['zh-CN']);

注意事项：

• 确保加载正确的 jQuery 版本（建议 1.12+ 或 3.x）
• 时间格式需与插件文档保持一致
• 移动端优先考虑触摸友好的控件
• 复杂场景可考虑付费插件如 dhtmlxScheduler