当前位置：首页 > jquery

jquery日期插件

2026-02-03 16:36:06jquery

jQuery 日期插件推荐

以下是一些流行的 jQuery 日期插件，适用于不同的场景和需求：

1. jQuery UI Datepicker

官方 jQuery UI 组件，功能丰富且稳定。
支持主题化，与 jQuery UI 其他组件风格统一。
提供日期选择、范围限制、本地化等基础功能。
文档完善，社区支持广泛。

<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>
<script>
$(function() {
  $("#datepicker").datepicker();
});
</script>
<input type="text" id="datepicker">

2. Bootstrap Datepicker

专为 Bootstrap 设计的日期选择器。
响应式设计，适配移动设备。
支持时间选择、范围选择和多种日期格式。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<script>
$('#datepicker').datepicker({
    format: 'yyyy-mm-dd',
    autoclose: true
});
</script>
<input type="text" id="datepicker">

3. Flatpickr

轻量级且高度可定制的日期时间选择器。
无依赖（可独立使用或与 jQuery 集成）。
支持多语言、时间选择、范围选择和内联模式。

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

4. Pikaday

jquery日期插件

轻量级（仅 5KB 压缩后）且简洁的日期选择器。
无依赖，但可与 jQuery 集成。
支持键盘导航和移动设备适配。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pikaday/1.8.0/css/pikaday.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/pikaday/1.8.0/pikaday.min.js"></script>
<script>
new Pikaday({
    field: document.getElementById('datepicker'),
    format: 'YYYY-MM-DD'
});
</script>
<input type="text" id="datepicker">