jQuery 将当前日期设置为默认日期的方法

在本文中，我们将介绍如何使用 jQuery 来将当前日期设置为 jQuery UI datepicker 插件的默认日期。datepickers 是网站中常见的日期选择工具，它们在表单和用户界面设计中起着重要的作用。

阅读更多：jQuery 教程

选择 jQuery UI datepicker 插件

为了使用 jQuery UI datepicker 插件，首先我们需要通过以下方式引入该插件的库文件：

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

设置默认日期的代码

下面是将当前日期设置为默认日期的示例代码：

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

<script>
    (document).ready(function() {
        var currentDate = new Date();("#datepicker").datepicker("setDate", currentDate);
    });
</script>

在上面的代码中，我们首先创建了一个 input 元素，其 ID 为 “datepicker”。接下来，我们将日期选择器插件应用于该 input 元素，并使用 currentDate 变量存储当前日期。最后，通过调用 $("#datepicker").datepicker("setDate", currentDate) 将 currentDate 设置为日期选择器的默认日期。

设置默认日期的说明

上面的示例代码中有几个关键点需要注意：
– 我们使用了 $(document).ready 函数来确保页面加载完毕后再执行代码。这样可以确保我们能够正确地选择日期选择器的 input 元素。
– 我们使用了 new Date() 来获取当前日期。根据用户所在的时区和操作系统配置，这个日期可能会有所不同。因此，建议在使用之前，先进行日期格式的调整。
– 通过 $("#datepicker").datepicker("setDate", currentDate) 将 currentDate 设置为日期选择器的默认日期。在这里，我们使用了日期选择器的 setDate 方法，该方法用于设置日期选择器的当前日期。

示例

假设今天是 2022 年 3 月 15 日，我们将使用上面的代码在页面中显示一个日期选择器，并将默认日期设置为当前日期。

首先，在 HTML 中添加以下代码：

<p>请选择一个日期：</p>
<input type="text" id="datepicker">

然后，在 JavaScript 中添加以下代码：

$(document).ready(function() {
    var currentDate = new Date();
    $("#datepicker").datepicker("setDate", currentDate);
});

最终，当页面加载完成时，你将看到一个日期选择器，其默认日期为 2022 年 3 月 15 日。你可以点击输入框来选择其他日期。

总结

在本文中，我们介绍了如何使用 jQuery 将当前日期设置为 jQuery UI datepicker 插件的默认日期。通过使用 $("#datepicker").datepicker("setDate", currentDate) 来设置默认日期，我们可以为用户提供方便的日期选择体验。

要注意的是，日期选择器是在用户的操作系统时区的基础上进行配置的。因此，请确保在使用之前进行适当的日期格式处理和调整时区，以便得到正确的默认日期。