jQuery UI日期选择器使用教程

轻量好用的日期选择器首推 jQuery UI 的 datepicker。它配置简单，功能却挺丰富，不光能选日期，连节假日标记、多月显示都能搞定。你只要引入 jQuery 和 jQuery UI，一个 $('#datePicker').datepicker() 就能跑起来。

日期选择器的初始化基本没门槛，一个 就能搞定，响应也快。页面加载后加上：

$(document).ready(function() {
  $('#datePicker').datepicker();
});

进阶玩法也不少，比如设置默认日期、改日期格式、禁用某些日子等等，配个对象参数就行：

$('#datePicker').datepicker({
  defaultDate: '+1w',
  changeMonth: true,
  numberOfMonths: 3,
  dateFormat: 'yy-mm-dd'
});

想让节假日高亮？用 beforeShowDay 搞定。比如你搞个节日数组，让这些日期加个特殊样式：

beforeShowDay: function(date) {
  var holidays = ['2025-01-01', '2025-05-01'];
  if (holidays.indexOf($.datepicker.formatDate('yy-mm-dd', date)) !== -1) {
    return [true, 'holiday', '节假日'];
  }
  return [true, '', ''];
}

事件也顺手，选完日期后触发 onSelect，还能配合表单自动填值，一点也不麻烦。

如果你项目里还在靠手输日期，真不如用 datepicker 来省事。要更多玩法，也可以看看这些参考：

• jQuery UI 实例_ 日期选择器 Datepicker
• jquery 日期选择 datepicker
• jquery_datepicker 包含多种类型
• jQuery ui Datepicker 插件
• datePicker 控件 with jquery

如果你用的是表单页面，或者用户输入频繁的管理后台，强烈建议加上这个插件，用户体验会好多。