How to disable all the dates that comes before the selected date?

Question

I am a newbie to the Jquery and I am developing an Hotel application, where the users are allowed to select the 'check-in' and 'check-out' dates, and I am using a datepicker for these fields. Logically, the 'check-out' date can either be equal to or more than the 'check-in'. I have written an validation that can check this condition but, I want to restrict the user on the UI itself, to select date for 'check-out' that are only equal to or more than 'check-in' date, by disabling all the dates that fall before 'check-in' in the date picker for 'check-out'.. I have browsed a lot, but no luck for this criteria.

Jquery UI datepicker. Disable array of Dates

I have referred the above, but the problem is, they have defined a small array of dates for which they have disabled the select. But, in my case, I want to disable all the dates that fall before 'check-in' date in the 'check-out' date picker.

How can I do that? Can someone help me please......

Thanks in Advance....

Harish Singh · Answer 1 · 2013-10-17T07:04:33.477

set your seleted date as mindate like as

$( ".selector" ).datepicker({ minDate: 'selected-date' });

It will disable all dates before min date.

for example:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>datepicker demo</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
</head>
<body>
<div id="check-in"></div>
<div id="check-out"></div>
<script>
    $( "#check-out" ).datepicker({
    minDate: new Date()
});

$( "#check-in" ).datepicker({
    minDate: new Date(),
    onSelect: function(dateText, inst) {
        var selectedDate = $( this ).datepicker( "getDate" );
        $( "#check-out" ).datepicker( "option", "minDate", selectedDate );
    }
});
</script>
</body>
</html>

Is selected-date a keyword? or should I set its value somewhere Harish? — user2771399, Oct 17 '13 at 06:34
you can get the selected date from check-in $(".checkin[name=checkin]").datepicker('getDate'); and replace 'selected-date' with selected date — Harish Singh, Oct 17 '13 at 06:47

score 2 · Accepted Answer · answered Oct 17 '13 at 05:41

2

Read date range with DEMO

js

$(function () {
    $("#from").datepicker({
        defaultDate: "+1w",
        changeMonth: true,
        numberOfMonths: 3,
        onClose: function (selectedDate) {
            $("#to").datepicker("option", "minDate", selectedDate);
        }
    });
    $("#to").datepicker({
        defaultDate: "+1w",
        changeMonth: true,
        numberOfMonths: 3,
        onClose: function (selectedDate) {
            $("#from").datepicker("option", "maxDate", selectedDate);
        }
    });
});

HTML

<label for="from">From</label>
<input type="text" id="from" name="from" />
<label for="to">to</label>
<input type="text" id="to" name="to" />

Also Read

http://api.jqueryui.com/datepicker/#option-minDate

http://api.jqueryui.com/datepicker/#option-maxDate

http://api.jqueryui.com/datepicker/#option-onClose

answered Oct 17 '13 at 05:41

Tushar Gupta - curioustushar

58,085
24
103
107

Hello Tushar, the demo link was excellent. That is what i needed. But still in my case, it isnt working as expected. Can you please tell me if any script file is specific for sucha functionality? – user2771399 Oct 17 '13 at 06:42
@user2771399 You need to include [jQuery Library](http://jquery.com/download/) and [jQueryUI Library](http://jqueryui.com/) – Tushar Gupta - curioustushar Oct 17 '13 at 06:47
Is JqueryUI Library also a must? The demo works fine only with jquery-1.9.1 when tried it in jsfiddle..? – user2771399 Oct 17 '13 at 07:17
yeah it is must show your fiddle ? – Tushar Gupta - curioustushar Oct 17 '13 at 07:30
Can you please tell me, from where is the selectedDate coming from? should I set it somewhere?.. like shown in Harish's answer?.. – user2771399 Oct 17 '13 at 08:39
@user2771399 in my code `onClose: function (selectedDate) {` selectedDate comes from datepicker . – Tushar Gupta - curioustushar Oct 17 '13 at 08:44
when i attached a debugger, it always shows 'undefined'..... I have included all the required library also Tushar....;'( – user2771399 Oct 17 '13 at 08:48
@user2771399 is your code online ?? – Tushar Gupta - curioustushar Oct 17 '13 at 08:48
Sorry, What do you mean by online?... – user2771399 Oct 17 '13 at 08:50
@user2771399 i mean it's uploaded on server or live website ?? – Tushar Gupta - curioustushar Oct 17 '13 at 08:50
For ur kind information, i have exactly the same code as urs, with my specific id's, and the onClose attribute. I have not included the other attributes. – user2771399 Oct 17 '13 at 08:51
No no... its in my local m/c only. Its a small app that Im doing in mvc4 in my local. – user2771399 Oct 17 '13 at 08:52
1

Hello Tushar, my problem was that, I had already bound the datepicker to set the style of date, so when i again bind it with this, 'from and to' dates, i was not getting it. Thanks for ur demo link. IT WAS A EXCELENT HELP. – user2771399 Oct 17 '13 at 14:07
@user2771399 Thank god :) You figured it out :) Welcome Happy to help :) – Tushar Gupta - curioustushar Oct 17 '13 at 15:02

How to disable all the dates that comes before the selected date?

2 Answers2