-2

我想问一下如何从选定的日期限制mindate/maxdate。

例如，我有两个 datepicker，picker_A 和 picker_B。

我在picker_A中选择了2020/01/29。然后，我需要限制picker_B中的日期范围，只允许在picker_B中选择“2020/01/29”之前/之后的10天。

非常感谢。

4

2 回答 2

0

此代码使用 jquery datepicker 方法将 datepicker 分配给您的控件。

我使用 minDate 和 maxDate 属性来设置日期范围。

在选定日期前 10 天计算：

var minDate = new Date(maxDate - (10 * 86400000));

1 小时 = 3600 秒 24 小时 = 86400 秒。

但我们需要毫秒。所以：86400 * 1000 = 86400000 毫秒。10 * 86400000 = 10 天

于 2020-01-29T08:54:50.500 回答
-1 

    $(function () {
        $("#From").datepicker({
            format: 'yyyy-mm-dd',
            constrainInput: true,
            onSelect: function (date) {
                var maxDate = new Date(date);
                var minDate = new Date(maxDate - (10 * 86400000));
                $('#To').datepicker('destroy').datepicker({
                    format: 'yyyy-mm-dd',
                    minDate: minDate,
                    maxDate: maxDate,
                    onSelect: function (date) {
                        console.log(date);
                    }
                }).datepicker('setDate', maxDate);
            }
        }).datepicker('setDate', new Date());
        var maxDate = new Date();
        var minDate = new Date(maxDate - (10 * 86400000));
        $('#To').datepicker({
            format: 'yyyy-mm-dd',
            minDate: minDate,
            maxDate: maxDate,
            onSelect: function (date) {
                console.log(date);
            }
        }).datepicker('setDate', maxDate);
    });
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

    <link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet" type="text/css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.6.5/datepicker.css" rel="stylesheet"
        type="text/css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
</head>

<body>

    <p>
        <input id="From" type="text" />
        <input id="To" type="text" />
    </p>

</body>
</html>

于 2020-01-28T22:34:29.490 回答