Jquery ui datepicker设置日期范围，如只能隔3天【实现代码】

JQuery UI Datepicker 提供了许多实用的功能，例如可以设置日期范围。在某些情况下，我们希望用户选择的日期只能是特定的日期或特定日期的范围。下面详细介绍Jquery ui datepicker设置日期范围，如只能隔3天的实现过程和代码。

步骤一：引入 jQuery UI 和 Datepicker CSS 和 JS 文件

在页面头部引入 jQuery UI 和 Datepicker 相应的 CSS 和 JS 文件

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

步骤二：设置 Datepicker

在body中添加代码：

<p>Date: <input type="text" id="datepicker"></p>

下面是设置Jquery ui datepicker只能选择隔三天的代码：

$(function () {
    $("#datepicker").datepicker({
        minDate: 0,
        maxDate: '+3D',
        //设置只能选择隔三天的日期
        beforeShowDay: function (date) {
            var day = date.getDay();
            return [(day == 1 || day == 4 || day == 7)];
        },
    });
});

在上述代码中，minDate 设置为 0 表示可以选择的日期从今天开始，而 maxDate 设置为 '+3D' 表示最大只能选择三天后的日期。beforeShowDay 函数中的逻辑用于设置只能选择隔三天的日期，此处通过获取日期中的星期数来判断日期是否合法，1,4,7分别代表星期二，星期五，星期日。

示例说明一：

在这个示例中，用户只能选择从今天开始的三天内的日期，且只能选择星期二、星期五、星期日三天。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Example</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <link rel="stylesheet" href="/resources/demos/style.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>

<p>Date: <input type="text" id="datepicker"></p>

<script>
    $(function () {
        $("#datepicker").datepicker({
            minDate: 0,
            maxDate: '+3D',
            //设置只能选择隔三天的日期
            beforeShowDay: function (date) {
                var day = date.getDay();
                return [(day == 1 || day == 4 || day == 7)];
            },
        });
    });
</script>

</body>
</html>

示例说明二：

在这个示例中，用户只能选择从今天开始的五天内的日期，且只能选择星期二、星期四、星期六三天。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Example</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <link rel="stylesheet" href="/resources/demos/style.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>

<p>Date: <input type="text" id="datepicker"></p>

<script>
    $(function () {
        $("#datepicker").datepicker({
            minDate: 0,
            maxDate: '+5D',
            //设置只能选择隔三天的日期
            beforeShowDay: function (date) {
                var day = date.getDay();
                return [(day == 2 || day == 4 || day == 6)];
            },
        });
    });
</script>

</body>
</html>

以上就是 Jquery ui datepicker 设置日期范围，如只能隔 3 天的完整攻略和代码实现。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Jquery ui datepicker设置日期范围，如只能隔3天【实现代码】 - Python技术站