如何使用 jQuery DatePicker 预填充今天的日期？-JavaScript中文网-JavaScript教程资源分享门户

介绍

jQuery DatePicker 是一个流行的库，它提供了一种简单的方式来选择日期并将其写入文本框中。在某些情况下，您可能想要预先填充文本框以显示当前日期，这可以通过一些简单的代码实现。

步骤

以下是一些步骤和示例代码，演示如何将今天的日期预先填充到 jQuery DatePicker 文本框中。

首先，确保您的 HTML 页面中包含了必要的 JavaScript 和 CSS 文件，这些文件可以从 jQuery DatePicker 官方网站下载：

<head>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
  <script src="//code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="//code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>
</head>

创建一个文本框并将其转换为 DatePicker：

<input type="text" id="datepicker">
<script>
  $(function() {
    $("#datepicker").datepicker();
  });
</script>

使用以下代码将当前日期设置为默认值：

<input type="text" id="datepicker">
<script>
  $(function() {
    $("#datepicker").datepicker("setDate", new Date());
  });
</script>

解释

第一步确保我们已经添加了必要的依赖库，其中包括 jQuery 和 jQuery UI，以及相关的 CSS 文件。这些文件可以通过链接到官方网站上的 CDN 来获取。

第二步是创建一个文本框并将其转换为 DatePicker。在这个示例中，我们使用 ID 选择器选择该文本框并调用了 datepicker() 方法来将其转换为 DatePicker。

第三步是使用 setDate() 方法将当前日期设置为默认值。此方法需要一个 JavaScript Date 对象，我们使用 new Date() 来获取当前日期。

总结

在本文中，我们学习了如何使用 jQuery DatePicker 预填充文本框。我们介绍了必要的依赖库，演示了如何将文本框转换为 DatePicker，并给出了一个代码示例，其中包括了如何将当前日期设置为默认值。希望这篇文章对您有所帮助！

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/8919