如何用jQuery UI 日期选择器设置默认日期？

用jQuery UI 日期选择器设置日期选择器文本框的默认日期

问题

我们在使用日期选择器组件时，经常需要设置一个默认日期，例如当前日期或某一个固定日期。本文将介绍如何使用 jQuery UI 日期选择器插件来实现这一功能。

解决方法

要设置日期选择器文本框的默认日期，可以使用 jQuery UI 日期选择器插件的 defaultDate 选项。该选项接受一个 Date 对象或一个字符串（遵循特定日期格式）。

设置当前日期为默认值

以下代码将设置日期选择器文本框的默认日期为当前日期：

$("#datepicker").datepicker({
  defaultDate: new Date()
});

设置特定日期为默认值

以下代码将设置日期选择器文本框的默认日期为 2023 年 3 月 8 日：

$("#datepicker").datepicker({
  defaultDate: "03/08/2023"
});

设置相对日期为默认值

以下代码将设置日期选择器文本框的默认日期为当前日期的前 7 天：

$("#datepicker").datepicker({
  defaultDate: "-7d"
});

其他注意事项

• defaultDate 选项还可以接受一个函数，该函数返回一个 Date 对象或一个字符串。
• 如果没有指定 defaultDate 选项，日期选择器将使用当前日期作为默认值。
• 还可以使用 setDate() 方法在初始化后设置日期选择器的默认日期。

示例代码

以下是设置日期选择器文本框的默认日期为当前日期的完整示例代码：

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

<script>
  $(function() {
    $("#datepicker").datepicker({
      defaultDate: new Date()
    });
  });
</script>

结论

使用 jQuery UI 日期选择器插件，可以轻松地设置日期选择器文本框的默认日期。本文介绍了如何设置当前日期、特定日期和相对日期为默认值。

常见问题解答

1. 如何设置日期选择器的最小和最大日期？

   可以使用 minDate 和 maxDate 选项来设置日期选择器的最小和最大日期。

2. 如何禁用日期选择器中的某些日期？

   可以使用 beforeShowDay 事件回调来禁用日期选择器中的某些日期。

3. 如何格式化日期选择器中的日期？

   可以使用 dateFormat 选项来格式化日期选择器中的日期。

4. 如何使用日期选择器选择日期范围？

   可以使用 onSelect 事件回调来检测日期选择器中的日期范围选择。

5. 如何自定义日期选择器的外观？

   可以使用 jQuery UI 主题来自定义日期选择器的外观。