当前位置：首页 > jquery

jquery日历控件

2026-04-08 13:55:58jquery

jQuery 日历控件推荐与使用指南

1. jQuery UI Datepicker
jQuery UI 提供的 Datepicker 是最常用的日历控件之一，支持主题化、多语言和丰富的事件回调。

<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.min.js"></script>

<input type="text" id="datepicker">

<script>
  $(function() {
    $("#datepicker").datepicker();
  });
</script>

2. Bootstrap Datepicker
适用于 Bootstrap 项目的轻量级日历控件，支持范围选择和内联模式。

jquery日历控件

<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>

<input type="text" class="form-control" id="datepicker">

<script>
  $('#datepicker').datepicker({
    format: 'yyyy-mm-dd',
    autoclose: true
  });
</script>

3. FullCalendar
功能强大的交互式日历库，支持拖拽、事件管理和视图切换。

jquery日历控件

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@5.10.1/main.min.css">
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.10.1/main.min.js"></script>

<div id="calendar"></div>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');
    var calendar = new FullCalendar.Calendar(calendarEl, {
      initialView: 'dayGridMonth'
    });
    calendar.render();
  });
</script>

4. Flatpickr
轻量级、无依赖的现代日期选择器，支持时间选择和移动端优化。

<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="datepicker">

<script>
  flatpickr("#datepicker", {
    dateFormat: "Y-m-d",
    enableTime: true
  });
</script>

5. 自定义扩展建议

通过 beforeShowDay 回调禁用特定日期
使用 onSelect 事件处理日期选择逻辑
结合 AJAX 动态加载节假日数据

$("#datepicker").datepicker({
  beforeShowDay: function(date) {
    return [date.getDay() !== 0, ""]; // 禁用周日
  },
  onSelect: function(dateText) {
    console.log("Selected date: " + dateText);
  }
});