📌  相关文章
📜  jQuery UI Datepicker defaultDate 选项(1)

📅  最后修改于: 2023-12-03 15:16:44.527000             🧑  作者: Mango

jQuery UI Datepicker defaultDate 选项

jQuery UI Datepicker 是一个强大的日期选择器插件，支持多种日期格式和多种自定义选项。其中之一的 defaultDate 选项允许我们设置默认选中的日期。

语法
$( ".selector" ).datepicker({
  defaultDate: new Date(2021, 5, 1)
});
说明

defaultDate 选项的值可以是一个日期对象，也可以是相对当前日期的天数。如果值为负数表示向前的天数，如果值为正数表示向后的天数。

//设置为当前日期
defaultDate: new Date()
//设置为当前日期往前3天
defaultDate: -3
//设置为当前日期往后一周
defaultDate: "+1w"
//设置为当前日期往后一个月
defaultDate: "+1m"
示例

以下示例展示了如何使用 defaultDate 选项设置默认选中日期。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Datepicker - Default date</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.12.4.js"></script>
  <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
    $( function() {
      $( "#datepicker" ).datepicker({
        defaultDate: "+1w" //设置为当前日期往后一周
      });
    } );
  </script>
</head>
<body>
 
<p>Date: <input type="text" id="datepicker"></p>
 
 
</body>
</html>
结论

通过 jQuery UI Datepicker 的 defaultDate 选项，我们可以轻松设置默认选中日期并提供更好的用户体验。我们可以使用日期对象或相对当前日期的天数来设置默认选中日期。