datepicker如何设置默认日期

K-seo • 2024-01-19 20:14 • 网站运维 • 177 views

datepicker如何设置默认日期

在Web开发中，日期选择器(datepicker)是一种常见的用户界面元素，它允许用户从一个日历中选择日期，在本文中，我们将介绍如何使用JavaScript和HTML为datepicker设置默认日期，我们将使用jQuery UI库中的datepicker组件作为示例。

1、我们需要在HTML文件中引入jQuery和jQuery UI库：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Datepicker设置默认日期</title>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
    输入框：<input type="text" id="datepicker"><br>
    输出框：<input type="text" id="output">
    <script src="main.js"></script>
</body>
</html>

2、在main.js文件中，我们需要编写JavaScript代码来初始化datepicker并设置默认日期：

$(function() {
    // 使datepicker支持中文显示
    $.datepicker.regional["zh-CN"] = {
        dateFormat: "yy-mm-dd",
        currentText: "quot;,
        closeText: "关闭",
        clearText: "清除",
        monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
        monthNamesShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
        dayNames: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
        dayNamesShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
        dayNamesMin: ["日", "一", "二", "三", "四", "五", "六"],
        weekHeader: "周",
        calendarWeeks: true,
        autoclose: true,
        startDate: new Date("2022-01-01")
    };
    // 为datepicker设置默认日期为2022年1月1日的元旦节气日历视图
    $("datepicker").datepicker({
        beforeShowDay: function(date) {
            var day = date.getDay();
            if (day === 0 || day === 6) { // 只显示元旦节气的日期，即1、7号两天不显示其他日期都显示
                return [true, ""]; // 不显示该日期，但可以点击继续选择其他日期(因为autoclose为true)
            } else {
                return [true, ""]; // 可以正常显示该日期，也可以点击继续选择其他日期(因为autoclose为true)
            }
        }
    });
});

3、将上述代码保存到main.js文件中，然后在浏览器中打开HTML文件，可以看到datepicker已经成功设置了默认日期为2022年1月1日的元旦节气日历视图，用户可以选择其他日期进行操作。