Как я могу предотвратить выбор нескольких дат в html ввода даты? - PullRequest
Новая
       17

Как я могу предотвратить выбор нескольких дат в html ввода даты?

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

Разрабатываю веб-сайт бронирования, где люди выбирают регистрацию и оформление заказа, поэтому давайте предположим, что выбранная комната занята с 20 до 30.

мой ввод будет выглядеть как 

<input id="check_in" name="check_in" type="date"   value="" class="form-control" placeholder="Check-in"   required min="30" >

am. пытается запретить пользователю выбирать между 20 и 30

, но все, что я могу сделать в этом теге html, не позволяет выбрать до 30.

, а также предполагает, что комната может быть занята от 1 до 20-30, как разрешить пользователю выбирать между 10 и 20?

1 Ответ

1 голос
/ 08 января 2020

Либо вы можете использовать это ... 

 <input type="date" min="2020-01-01" max="2020-01-19"/>

, либо, если это не работает, ниже приведена настройка для ограничения даты, вы можете изменить ее динамически, установив максимальное и минимальное значение в javascript. 

        $(function () {          

            $("#departure").igDatePicker({
                minValue: new Date(2020, 0, 1),
                maxValue: new Date(2020, 0, 19),
                dateDisplayFormat: "yy/MM/dd dddd"
            });
            
        });
<!DOCTYPE html>
<html>
<head>
    <!-- Ignite UI Required Combined CSS Files -->
    <link href="http://cdn-na.infragistics.com/igniteui/2019.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="http://cdn-na.infragistics.com/igniteui/2019.2/latest/css/structure/infragistics.css" rel="stylesheet" />
    <style>
        h3 {
            font-size: 20px;
            margin-bottom: 20px;
        }

        .group-fields {
            margin-bottom: 10px;
        }

        .group-fields label {
            display: block;
            line-height: 18px;
        }

        .group-fields .inline {
            display: inline;
        }

        .group-fields .ui-igcheckbox-normal {
            margin-right: 5px;
            float: left;
        }

        .group-fields .ui-igedit-container {
            width: 230px;
        }

        .clearfix:after {
            content: "";
            display: table;
            clear: both;
        }

        .group-fields.clearfix > div {
            float: left;
            margin-right: 10px;
        }
    </style>

    <script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>

    <!-- Ignite UI Required Combined JavaScript Files -->
    <script src="http://cdn-na.infragistics.com/igniteui/2019.2/latest/js/infragistics.core.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2019.2/latest/js/infragistics.lob.js"></script>
</head>
<body>
   
    <div class="group-fields clearfix">
        <div>
            <label for="departure">Please enter date between 1 Jan to 19 Jan 2020</label>
            <input id="departure" />
        </div>
      
    
    </body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...