jQuery datepicker设置：禁止选择小于当前日期

该资源主要介绍如何在使用jQuery Datepicker插件时，设置日期选择器不允许用户选择小于当前日期的日期。通过JavaScript代码实现这一功能。 在网页开发中，经常需要使用日期选择器来帮助用户方便地选取日期，jQuery Datepicker是一个常用的插件。在某些场景下，如预订系统或表单填写，我们可能需要限制用户只能选择当前日期或之后的日期，而不能选择过去的日期。本示例就展示了如何实现这个功能。 首先，为了使用jQuery Datepicker，需要引入相关的CSS和JS文件。在示例代码中，引用了以下资源： ```html <link rel="stylesheet" type="text/css" href="resource/css/jquery.datepick.css" /> <script type="text/javascript" src="resource/js/common/jquery-1.4.2.js"></script> <script type="text/javascript" src="resource/js/common/jquery.datepick.js"></script> ``` 这些文件提供了Datepicker的样式和核心功能。注意，这可能需要根据实际项目路径进行调整。 接着，我们使用jQuery的`$(document).ready()`函数确保在页面加载完成后执行相关代码： ```javascript $(document).ready(function() { // 设置区域设置为中文 $.datepick.setDefaults($.datepick.regional['zh-CN']); // 初始化 "#startDate" 的日期选择器 $("#startDate").datepick({ dateFormat: 'yyyy-mm-dd', onSelect: customStartRange }); // 获取当前选定的日期 $("#startDate").datepick('getDate'); }); ``` 在日期选择器的配置中，`dateFormat`属性指定了日期的显示格式，这里是年-月-日（'yyyy-mm-dd'）。`onSelect`回调函数会在用户选择一个日期后触发，我们可以在这里添加逻辑来检查所选日期是否小于当前日期。 `customStartRange`是一个自定义函数，通常会用于设置日期范围的限制。在示例中并未给出完整的`customStartRange`函数，但可以假设它包含以下逻辑： ```javascript function customStartRange(date) { var today = new Date(); if (date < today) { // 如果所选日期小于今天，取消选择并给出提示 alert('请选择当前或之后的日期'); return false; } // 否则，允许选择 return true; } ``` 这段代码将比较用户选择的日期和当前日期，如果用户选择的日期早于当前日期，会弹出警告并取消选择，从而达到不让用户选择小于当前日期的效果。 需要注意的是，实际项目中可能还需要处理其他情况，例如多个日期选择器间的关联限制，或者根据服务器时间而非本地时间来判断日期等。此外，`$.datepick.setDefaults`可以用来设置全局默认的Datepicker选项，这样所有日期选择器都会继承这些设置，除非个别选择器有特定的配置。 jQuery Datepicker提供了一种简单的方式去定制日期选择行为，通过设置`onSelect`回调和自定义函数，我们可以实现各种复杂的日期选择规则，包括禁止选择小于当前日期的功能。