当前位置：首页 > jquery

jquery日期插件

2026-04-08 09:45:38jquery

以下是几款常用的 jQuery 日期插件，适用于不同的场景需求：

jQuery UI Datepicker

jQuery UI 提供的官方日期选择插件，功能稳定且兼容性好。支持主题定制、多语言和日期范围限制。

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
  $(function() {
    $("#datepicker").datepicker();
  });
</script>
<input type="text" id="datepicker">

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>

Flatpickr

轻量级且无依赖的日期选择器，支持时间选择、多选和移动端优化。

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

Pikaday

简洁的纯 JavaScript 日期选择器，可与 jQuery 结合使用。

<script src="https://cdn.jsdelivr.net/npm/pikaday/pikaday.js"></script>
<script>
  new Pikaday({
    field: document.getElementById('datepicker'),
    format: 'YYYY-MM-DD'
  });
</script>

daterangepicker

适用于选择日期范围的插件，常用于报表筛选等场景。

jquery日期插件

<script src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<script>
  $('#daterange').daterangepicker({
    opens: 'right'
  });
</script>

选择时可根据项目需求考虑插件体积、功能扩展性及移动端适配性。