Jquery UI 日历控件

最新推荐文章于 2022-06-06 17:32:16 发布

qq_25853275

最新推荐文章于 2022-06-06 17:32:16 发布

阅读量433

点赞数

分类专栏： Js 前端工具文章标签： jquery-ui datapicker 日历控件

本文链接：https://blog.youkuaiyun.com/qq_25853275/article/details/44920865

版权

Js 同时被 2 个专栏收录

5 篇文章

订阅专栏

前端工具

2 篇文章

订阅专栏

本文介绍如何利用jQuery和jQuery UI库创建一个定制化的日期选择器。该选择器能够显示中文星期和月份，并且可以标记特定的国家法定假日。通过简单的HTML结构配合JavaScript代码，实现了用户友好的日期挑选功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="Scripts/jquery-ui.min.css" rel="stylesheet" />
    <script src="Scripts/jquery-1.10.2.min.js"></script>
    <script src="Scripts/jquery-ui.min.js"></script>
    <style>
        .ui-datepicker {
            width: 14em; /*改变datepicker的宽度*/
            font-size: 10pt;
        }
    </style>
    <script>
        $(function () {
            natDays = [[4, 7, 2015], [4, 8, 2015], [4, 9, 2015], [4, 10, 2015]];
            function nationalDays(date) {
                for (i = 0; i < natDays.length; i++) {
                    if (date.getFullYear() == natDays[i][2] && date.getMonth() == natDays[i][0] - 1
                    && date.getDate() == natDays[i][1]) {
                        return [false, natDays[i][2] + '_day'];
                    }
                }
                return [true, ''];
            }
            $(".myDatePicker").datepicker({
                dayNamesMin: ["日", "一", "二", "三", "四", "五", "六"],
                firstDay: 1,
                monthNames: ["1月", "2月", "3月", "4月", "5月", "6月",
                   "7月", "8月", "9月", "10月", "11月", "12月"],
                showMonthAfterYear: true,
                yearSuffix: "年",
                dateFormat: "yy年MMdd日",
                beforeShowDay: nationalDays
                //beforeShowDay: $.datepicker.noWeekends //周六周天不可以选择
            });
        });
    </script>
</head>
<body>
    <div style="height: 200px; width: 500px;">
        开始日期:
        <input type="text" id="datepicker1" class="myDatePicker" style="width: 500px; cursor: pointer;" readonly />
        结束日期:
        <input type="text" id="datepicker2" class="myDatePicker" style="width: 500px; cursor: pointer;" readonly />
    </div>
</body>
</html>