How to disable dates in second datetimepicker based on selection in the first one

Question

I am using moment.js and bootstrap-datetimepicker by eonasdan. I have two datetimepicker in my page. One is for startdate of arrival and the other one is for enddate.

I would like to disable all dates on datetimepicker 2 before selected date on datetimepicker 1.

<form id="form" name="form" class="form-inline">
<div class="form-group">
    <label for="startDate">Start Date</label>
    <input id="startDate" name="startDate" type="text" class="form-control" 
/>
    &nbsp;
    <label for="endDate">End Date</label>
    <input id="endDate" name="endDate" type="text" class="form-control" />
</div>
</form>

And the javascript block:

$(window).load(function(){
    $('#startDate').datetimepicker({
        minDate: moment()
    });
    $('#endDate').datetimepicker({
        maxDate:  moment() 
    });
});

Surya · Accepted Answer · 2017-11-06 12:00:56Z

1

Like below, u can set second date picker value

$("#startDate").datepicker({
             showOtherMonths: true,
             selectOtherMonths: true,
             dateFormat: 'dd-M-yy',
             onSelect: function (selectedDate) {            
                 var date = $(this).datepicker("getDate"); 
                 $("#endDate").datepicker("option", "minDate", selectedDate);
             }
     });

answered Nov 6, 2017 at 12:00

Surya

2651 gold badge3 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

G_One Over a year ago

Thanks! This is working with datepicker. What do i need to do so it will also work with dateTimepicker.

Expressingx · Accepted Answer · 2017-11-06 12:05:06Z

0

Add property daysOfWeekDisabled and pass an array containing which days to be disabled, where 0 is Sunday and 6 is Saturday.

Note that you disable Days and not Dates

If you want to disable all of them:

$('#endDate').datetimepicker({
    maxDate:  moment(),
    daysOfWeekDisabled: [0, 1, 2, 3, 4, 5, 6] 
});

And when the user selects date from the first datepicker simply remove the property from the second datepicker

https://eonasdan.github.io/bootstrap-datetimepicker/#disabled-days-of-the-week

answered Nov 6, 2017 at 12:05

Expressingx

1,5923 gold badges18 silver badges48 bronze badges

Collectives™ on Stack Overflow

How to disable dates in second datetimepicker based on selection in the first one

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related