Как отключить прошлые даты в Bootstrap datetimepicker после установки даты возврата

ProgramBox

Как отключить прошлые даты в Bootstrap datetimepicker после установки даты возврата

Post author:admin
Запись опубликована:16 мая, 2023
Post category:Вопросы по программированию

#jquery #bootstrap-datetimepicker

Вопрос:

Я знаю, как отключить прошлые дни с текущей даты. работает с jsfiddle

но моя проблема в том, как я могу отключить предыдущие даты после выбора check in даты.

мой jquery

 $(function () {

        $('#datetimepicker1').datetimepicker({
            format: 'YYYY-MM-DD'
        });
        $('#datetimepicker2').datetimepicker({
            format: 'YYYY-MM-DD'
        });
        $('#from_date').datetimepicker({
            format: 'YYYY-MM-DD'
        });
        $('#to_date').datetimepicker({
            format: 'YYYY-MM-DD'
        });
    });

мой взгляд

 <div class='col-md-offset-2 col-sm-3 col-xs-6'>
    <div class="form-group">
        <div class='input-group date' id='datetimepicker1'>
            <input type='text' name="from_date" id="from_date" class="form-control" />
            <span class="input-group-addon">
                <span class="glyphicon glyphicon-calendar"></span>
            </span>
        </div>
    </div>
</div>

<div class='col-sm-3 col-xs-6'>
    <div class="form-group">
        <div class='input-group date' id='datetimepicker2'>
            <input type='text' name="to_date" id="to_date" class="form-control" />
            <span class="input-group-addon">
                <span class="glyphicon glyphicon-calendar"></span>
            </span>
        </div>
    </div>
</div>

<div class='col-sm-1 col-xs-12'>
    <button class="btn btn-info" id="search">SEARCH</button>
</div>

пожалуйста, любая помощь.

Ответ №1:

Вы пробовали подобное

 $('#datetimepicker').datetimepicker({  minDate:new Date('2016-10-25')}); //set check in date here

Редактировать

Для форматирования даты

 $('#datetimepicker').datetimepicker({  
    format: 'YYYY-MM-DD',
    minDate:new Date('2016-10-25')
});

Редактировать

Устанавливается от и До Динамически

Пожалуйста, смотрите jsfiddle

1. да, я пробовал, но если я настрою minDate:new Date('2016-10-25') , календарь не будет отображаться.

2. пожалуйста, дайте ссылку на jsfiddle

3. спасибо, но если я установлю его, как я могу добавить format: 'YYYY-MM-DD' этот формат даты, важный для моей работы.

4. спасибо, Как я могу изменить 2016-10-25 на selected check in date в календаре проверки.

5. Пожалуйста, посмотрите Мой обновленный ответ и посмотрите ссылку на скрипку, добавленную последней в моем ответе

Ответ №2:

В случае https://tempusdominus.github.io/bootstrap-4/Options /

вы можете попробовать установить диапазон разрешенных дат, например

 var tomorrow = new Date();
tomorrow.setDate(tomorrow.getDate()   1);

var yesterday = new Date();
yesterday.setDate(yesterday.getDate() - 1);

$('#datetimepicker1').datetimepicker({
    minDate: yesterday,
    maxDate: tomorrow,
});

Ответ №3:

просто переопределите свойство minDate в вашем datetimepicker

 var checkin = '2016-10-24';
$('#datetimepicker1').data("DateTimePicker").minDate(checkin);

Ответ №4:

Я полагаю, вы хотите настроить конечную дату так, чтобы она была больше даты начала, если это так, приведенный ниже код может вам помочь, он проверяет, меньше ли дата начала или равна конечной дате, и если конечная дата больше или равна начальной дате, то он устанавливает минимальный период времени для бронирований, вы можете установить его по своему усмотрению или просто установите .minDate(‘#start’).val() на конечную дату, журнал консоли разделы закомментированы, поскольку они предназначены только для целей отладки:

 $('#Start').on("dp.change",
                  function(e)
                  {
                        if (dateSorter($('#End').val(), $(this).val()) === -1 || dateSorter($('#End').val(), $(this).val()) === 0)
                            // if ($('#End').val() < $(this).val())
                        {
                         //   console.log("End date " $('#End').val()  " is beofre start date: "  $(this).val() " Setting minimum booking period");
                            $('#End').data("DateTimePicker").date(e.date.add(30, 'minutes'));
                        }

                    });
$('#End').on("dp.change",
                 function(e)
                  {
                     if (dateSorter($('#Start').val(), $(this).val()) === 1 || dateSorter($('#Start').val(), $(this).val()) === 0)
                     // if ($('#Start').val() >= $(this).val())
                     {
                        //   console.log("Start date "   $('#Start').val()   " is after end date: "   $(this).val() " Setting minimum booking period");
                        $(this).data("DateTimePicker").date(e.date.add(30, 'minutes'));
                     }                       
               });

Если вы хотите добавить форматирование (это средство выбора даты и времени), вы можете использовать этот скрипт:

  $(".datePickerTime").datetimepicker({
        defaultDate: false,
        useCurrent: false,
        showClear: true,
        showClose: true,
        locale: "en-au",
        format: "YYYY-MM-DD hh:mm A",
        sideBySide: true,
        toolbarPlacement: "bottom"

    });

Только для средства выбора даты используйте как:

  $(".datePicker").datetimepicker({
        defaultDate: false,
        useCurrent: false,
        showClear: true,
        showClose: true,

    locale: 'en-au',
    format: 'YYYY-MM-DD'
});