Datepicker 是一个常用的日期选择器插件，它可以让用户方便地从日历中选择日期。在使用 Datepicker 的过程中，经常需要为其设置一个默认的日期作为初始值。本文将介绍如何使用 jQuery 设置 Datepicker 的初始值，并提供相关实例代码。
基本设置
要使用 Datepicker 插件，首先需要引入相关的 CSS 和 JavaScript 文件。在 HTML 文档中添加以下代码：
<!-- 引入 jQuery 和 Datepicker 的 CSS 文件 --> <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <!-- 引入 jQuery 和 Datepicker 的 JavaScript 文件 --> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
然后，在 JavaScript 中初始化 Datepicker：
$(function() {
$( "#datepicker" ).datepicker();
});这样就可以在页面上创建一个基本的 Datepicker 输入框。
设置初始值
为 Datepicker 设置初始值非常简单。只需要在初始化函数中通过 defaultDate 参数指定即可。例如：
$(function() {
$( "#datepicker" ).datepicker({
defaultDate: "2023-04-07"
});
});上面的代码将 Datepicker 的初始日期设置为当前日期。
还可以使用 JavaScript 的 Date 对象来设置初始日期。例如：
$(function() {
var initialDate = new Date(2023, 3, 7);
$( "#datepicker" ).datepicker({
defaultDate: initialDate
});
});上面的代码将 Datepicker 的初始日期设置为 2023 年 4 月 7 日。
如果需要在多个页面中使用相同的初始值，可以将初始值保存在一个变量中，在不同的页面中引用。例如：
-- -------------------- ---- -------
-- - --------- ---
--- ----------- - --- ---------- -- ---
-- --- ---------- ------
------------ -
-- ------------- --------------
------------ -----------
---
---指定日期格式
默认情况下，Datepicker 显示的日期格式是 MM/DD/YYYY。如果需要显示其他格式的日期，可以通过 dateFormat 参数来指定。例如：
$(function() {
var initialDate = new Date(2023, 3, 7);
$( "#datepicker" ).datepicker({
defaultDate: initialDate,
dateFormat: "yy-mm-dd"
});
});上面的代码将 Datepicker 显示的日期格式设置为 YYYY-MM-DD。
示例代码
最后，我们提供一个完整的示例代码，包括所有的设置和样式：
-- -------------------- ---- -------
--------- -----
----- -------------
------
----- ----------------
----------------------
----- ---------------- -------------------------------------------------------------------
-------
-------------- -
---------- -----
-
--------------------- -
----------------- -----
------ -----
---------- -----
-
----------------------- -- - -
------ -----
-
--------
-------
------
------ ------------------------------
------ ----------- ----------------
------- -----------------------------------------------------------
------- ------------------------------------------------------------------
--------
------------ -
--- ----------- - --- ---------- -- ---
-- ------------- --------------
------------ ------------
----------- ----------
---
---
---------
-------
-------在实际使用中，可以根据具体需求调整样式和参数。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/27289