Как я могу ограничить даты некоторым количеством дней от некоторой даты? - PullRequest
Новая
       57

Как я могу ограничить даты некоторым количеством дней от некоторой даты?

0 голосов
/ 28 января 2020

Я хотел бы спросить, как ограничить Mindate / MaxDate от выбранной даты.

Например, у меня есть два datepicker, picker_A и picker_B.

Я выбрал 2020/01 / 29 в сборщике. Затем мне нужно ограничить диапазон дат в picker_B, чтобы разрешить только 10 дней до / после того, как в picker_B можно выбрать «2020/01/29».

Большое спасибо.

Ответы [ 2 ]

0 голосов
/ 29 января 2020

этот код использует jquery метод datepicker для назначения datepicker вашим элементам управления.

Я использую свойства minDate и maxDate для установки диапазона дат.

для вычисления за 10 дней до выбранной даты: 

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

1 час = 3600 секунд 24 часа = 86400 секунд.

но нам нужны миллисекунды. итак: 86400 * 1000 = 86400000 мс. 10 * 86400000 = 10 дней

0 голосов
/ 29 января 2020 

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