CODEWITHSUNDEEP
jquerybootstrap-datetimepicker
Menaka Kariyawasam
Menaka Kariyawasam

Reputation: 618

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

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>

enter image description here any help please.

Upvotes: 1

Views: 3879

Answers (4)

NoWar
NoWar

Reputation: 37633

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

Upvotes: 2

Rakesh Sojitra
Rakesh Sojitra

Reputation: 3658

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

Upvotes: 1

InkHeart
InkHeart

Reputation: 880

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

Upvotes: 0

Beginner
Beginner

Reputation: 4153

just override the minDate property in your datetimepicker 

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

Upvotes: 0

Related Questions