jquery UI Datepicker时间控件的使用方法（终结版）

近期项目中使用了 jQuery UI Datepicker 时间控件，体验极佳，特此分享给大家。在此，我设定的时间范围为开始至结束，跨度不得超过三天，同时配置了清空时间和重新选择时间的功能。

第一步，你需要引入两个控件 js 文件，即 jquery.js 和 jquery-ui-datepicker.js，以及样式文件。代码如下：

```html

```

第二步，创建一个文本输入框用于选择时间。这里有两个文本输入框，分别用于选择开始时间和结束时间，并各配备一个“清空”按钮。以下是相关代码：

```html

开始时间

必选

结束时间

必选

```

当页面加载完成后，对应的日期控件会开始运行。我们首先获取了关于开始日期和结束日期的输入框对象，准备对这些日期控件进行优化。设定目标日期范围是为了确保用户在选择日期时，能够明确知道开始日期和结束日期的有效范围。当用户在日期选择器中选定日期后，会触发`onSelect`事件。

在这个事件处理函数中，我们首先判断选中的是开始日期还是结束日期。对于选中的日期，我们将其转换为时间戳格式，便于后续操作。如果选中的是开始日期，我们会设置其最小可选日期为刚刚选中的日期，并设置结束日期的最大可选日期为选中日期加上三天的毫秒数。反之，如果选中的是结束日期，我们会相应地设置其最大可选日期和开始日期的最小可选日期。这样的设定确保了用户选择的日期始终在一个有效的范围内，即不超过三天的时间跨度。我们也对其他日期控件进行了相应的设置，确保它们符合当前选择的日期的限制条件。

第三步，我们要重点关注那个神秘的“清空按钮”。这个按钮的作用非同小可，它能够将时间选择框中的值一扫而空。实现这个功能其实相当简单。

现在让我们来深入了解一下如何清空日历控件。有一个名为“cleaPrevInput”的函数，它专门用于处理清空操作。当你点击这个函数时，它会立即清除输入框中的值。但这仅仅是清空了表面上的值，时间控件的选值限制仍然保留在原地。这是如何做到的呢？

当我们的视线聚焦在特定的输入框时，比如开始时间和结束时间这两个输入框，如果它们都被清空了，这时就应该意味着选择的框中没有时间限制，也就是说，用户可以随心所欲地选择日期。在这种情况下，我们可以调用datepicker封装的api。使用这样的代码：“dates.datepicker("option", "minDate", null); dates.datepicker("option", "maxDate", null);”，刚刚设置的开始时间和结束时间就会被清空，从而允许用户选择任意日期。

对于普通用户来说，如果只是使用控件而不需要设置时间限制的话，上面的代码基本上可以满足需求了。如果有特殊需求的话，还需要自己去查找api进行更深入的设置。当时我在处理清空日期控件中的值时，就是依靠这句代码：“dates.datepicker("option", "maxDate", null)”，这真的让我查找了半天的api。只要你有足够的耐心和毅力，相信你一定能够克服任何困难。

至此，关于jquery UI Datepicker时间控件的全部内容就介绍完毕了。暂时先画上一个圆满的句号。如果以后还有相关的文章，我会第一时间与大家分享。让我们一起期待更多的精彩内容吧！让我们一起成长、一起进步！