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

Question

I know how to disable past days from current date. its working with jsfiddle

but my problem is how can I disable previous dates after select check in date.

my 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'
        });
    });

my view

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

any help please.

Answer 1

Have you tried like this

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

EDIT

For Format date

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

EDIT

Set From and To Dynamically

Please see jsfiddle

Answer 2

In case of https://tempusdominus.github.io/bootstrap-4/Options/

you can try set the range of allowed dates like

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,
});

Answer 3

just override the minDate property in your datetimepicker

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

Answer 4

I believe you want to control the end date to be greater than start date, if this is the case below code might help you, it's checking if the start date is less than or equal end date, and if end date is greater than or equal start date, then it sets the minimum time period for bookings, you can set it as you would like, or just set the .minDate('#start').val() to the end date, console log sections are commented out as they are only for debugging purposes:

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

If you want to add formatting (this is a date time picker), you can use this script:

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

    });

For only a date picker use as:

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

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