异常教程

jQuery UI 实例 – 日期选择器（Datepicker）（超详细）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

  • 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
  • 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

在现代网页开发中，表单交互的友好性直接影响用户体验。jQuery UI 实例 – 日期选择器（Datepicker） 作为 jQuery UI 库的核心组件之一，凭借其直观的界面和灵活的配置能力，成为开发者处理日期输入的常用工具。无论是预订系统的日期选择、活动日程的安排，还是用户生日的录入，Datepicker 都能提供高效的解决方案。本文将从基础到进阶，结合代码示例，逐步解析如何利用这一工具提升开发效率，并深入探讨其核心功能与应用场景。

一、环境准备与基本概念

1.1 jQuery UI 的定位

jQuery UI 是基于 jQuery 的扩展库，专注于提供丰富的用户界面组件（如拖拽、对话框、滑块等）。日期选择器（Datepicker） 是其中最经典的组件之一，它通过简洁的 API 将普通的输入框转化为可交互的日历界面，减少用户手动输入的繁琐操作。

1.2 环境搭建

要使用 Datepicker，需先引入 jQuery 和 jQuery UI 的资源文件。推荐通过 CDN 引入，代码如下：

<!-- 引入 jQuery -->  
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>  

<!-- 引入 jQuery UI 核心库 -->  
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">  
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>

1.3 基础用法

最简单的 Datepicker 集成仅需两步：

  1. HTML 结构：创建一个文本输入框作为触发器。 
    <input type="text" id="datepicker">
  2. 初始化脚本：通过 jQuery 选择器绑定 Datepicker。 
    $(function() {  
  $("#datepicker").datepicker();  
});

此时，点击输入框即可弹出日历面板，用户可直接选择日期。

二、核心功能详解：配置与自定义

2.1 日期格式化

默认情况下，Datepicker 会以 mm/dd/yy 格式返回日期。通过 dateFormat 参数可自定义输出格式，例如：

$("#datepicker").datepicker({  
  dateFormat: "yy-mm-dd" // 输出格式：2024-08-20  
});

常见格式符包括：

  • d：日（不带前导零）
  • dd：带前导零的日
  • m：月（不带前导零）
  • mm：带前导零的月
  • yy：四位年份
  • yy：两位年份

2.2 日期范围限制

若需限制用户可选择的日期范围，可用 minDate 和 maxDate 参数：

$("#datepicker").datepicker({  
  minDate: new Date(), // 仅允许选择今天及之后的日期  
  maxDate: "+1M"       // 允许选择最多一个月后的日期  
});

此外，beforeShowDay 函数支持更复杂的条件判断。例如，仅允许选择周末：

$("#datepicker").datepicker({  
  beforeShowDay: function(date) {  
    return [date.getDay() === 0 || date.getDay() === 6, ""];  
  }  
});

此处 getDay() 返回 0（周日）到 6（周六），通过条件筛选后返回布尔值，控制日期是否可选。

2.3 多语言支持

Datepicker 默认使用英文界面。若需切换语言，需引入对应的语言包，并通过 option 方法配置：

// 引入中文语言包  
<script src="https://code.jquery.com/ui/1.13.2/datepicker-zh-CN.js"></script>  

// 初始化时设置语言  
$("#datepicker").datepicker({  
  regional: "zh-CN" // 中文  
});

通过这种方式，日期标签（如月份名称）将自动适配目标语言。

三、进阶技巧：事件与动态交互

3.1 事件监听

Datepicker 提供了多个事件钩子，用于在特定时刻执行自定义逻辑。例如，当用户选择日期后触发 onSelect 事件：

$("#datepicker").datepicker({  
  onSelect: function(dateText, inst) {  
    console.log("选择的日期是：" + dateText);  
    // 可在此处更新其他表单字段或提交数据  
  }  
});

其他常用事件包括：

  • beforeShow：在日历弹出前触发
  • beforeShowDay：在渲染每个日期前执行（已覆盖）
  • onChangeMonthYear：当月份或年份切换时触发

3.2 动态更新配置

若需在运行时修改 Datepicker 的参数（如动态调整 minDate），可通过 .datepicker("option", key, value) 方法：

// 将最小日期设为当前日期  
$("#datepicker").datepicker("option", "minDate", new Date());

此方法支持批量更新，例如：

$("#datepicker").datepicker("option", {  
  dateFormat: "yy-mm",  
  showButtonPanel: true // 显示按钮面板  
});

四、实际案例：航班日期选择器

4.1 场景描述

假设需为一个航班预订页面设计日期选择器，要求：

  1. 用户选择出发日期后，返回日期必须晚于出发日期；
  2. 默认显示中文界面；
  3. 禁用周末日期。

4.2 实现步骤

步骤1：HTML 结构

<div class="date-picker-container">  
  <label>出发日期：</label>  
  <input type="text" id="departure-date">  

  <label>返回日期：</label>  
  <input type="text" id="return-date">  
</div>

步骤2：初始化出发日期选择器

$("#departure-date").datepicker({  
  regional: "zh-CN",  
  minDate: 0, // 最小日期为今天  
  beforeShowDay: function(date) {  
    return [date.getDay() !== 0 && date.getDay() !== 6, ""]; // 禁用周末  
  },  
  onSelect: function(selectedDate) {  
    // 设置返回日期的最小日期为出发日期的次日  
    $("#return-date").datepicker("option", "minDate", selectedDate);  
  }  
});

步骤3：初始化返回日期选择器

$("#return-date").datepicker({  
  regional: "zh-CN",  
  beforeShowDay: function(date) {  
    return [date.getDay() !== 0 && date.getDay() !== 6, ""];  
  },  
  defaultDate: "+1w" // 默认选择一周后的日期  
});

最终效果

用户选择出发日期后，返回日期的日历会自动将可选范围限定在出发日期之后，并且周末日期不可点击。界面语言为中文，符合国际化需求。

五、性能优化与注意事项

5.1 避免重复初始化

若页面通过 AJAX 动态加载包含 Datepicker 的元素，需确保初始化代码仅执行一次。可通过以下方式检查：

if ($("#datepicker").datepicker("instance")) {  
  // 已存在实例，无需重复初始化  
} else {  
  $("#datepicker").datepicker();  
}

5.2 响应式布局适配

Datepicker 默认采用固定样式，可能在移动端显示异常。可通过 CSS 调整容器宽度，或使用 showOn 参数控制触发方式：

$("#datepicker").datepicker({  
  showOn: "button", // 点击按钮触发，而非输入框  
  buttonImage: "calendar.png", // 自定义按钮图标  
  buttonImageOnly: true  
});

六、结论

jQuery UI 实例 – 日期选择器（Datepicker） 凭借其易用性和高度可定制性，成为处理日期输入的高效工具。从基础的日期选择到复杂的条件限制，开发者可通过灵活配置满足多样化需求。无论是初学者还是中级开发者，掌握这一组件都能显著提升表单交互的友好性与开发效率。

通过本文的案例与代码示例，读者应能快速上手 Datepicker，并根据实际场景进行扩展。建议在项目中结合业务逻辑进一步探索高级功能（如动态日期加载、与后端 API 集成等），以实现更强大的日期选择体验。

（全文共计约 1,680 字）

最新发布

查看更多文章