如何将日期限制为某个日期的某个天数？答案

【问题标题】：How can I restrict dates to some number of days from some date?如何将日期限制为某个日期的某个天数？
【发布时间】：2020-01-28 19:40:19
【问题描述】：

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

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

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

非常感谢。

【问题讨论】：

标签： javascript jquery datepicker maxdate mindate

【解决方案1】：

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

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

在所选日期前 10 天计算：

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

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

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

【讨论】：

【解决方案2】：

    $(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>

【讨论】：

我认为这个答案可以更清晰一些。只是对您的代码如何工作的一个小解释。