如何在设置签入日期后禁用 Bootstrap datetimepicker 中的过去日期

Question

我知道如何禁用当前日期的过去几天。它与 jsfiddle

一起工作

但我的问题是如何在 select 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>

请帮忙。

Answer 1

只需覆盖日期时间选择器中的 minDate 属性

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

Answer 2

你试过这样吗

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

Answer 3

我相信您希望控制结束日期大于开始日期，如果是这种情况，下面的代码可能会对您有所帮助，它正在检查开始日期是否小于或等于结束日期，以及结束日期是否大于或等于开始日期，则它设置预订的最短时间段，您可以根据需要设置它，或者只设置 .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'
});

Answer 4

如果https://tempusdominus.github.io/bootstrap-4/Options/

您可以尝试设置允许的日期范围，例如

JS

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

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

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

如何在设置签入日期后禁用 Bootstrap datetimepicker 中的过去日期

How to disable past dates in Bootstrap datetimepicker after set check in date

jquery

bootstrap-datetimepicker