Question

Hi I found the following code from this page JQuery UI DatePicker using 2 date fields trying to get date difference

However I don’t understand the datepicker ui enough to be able to stop the first datepicker from letting you only select from todays date. Im sure its simple but can someone please help!

<script type="text/javascript">
    var DatePicked = function() {
            var departure = $("#CheckIn");
            var arrival = $("#CheckOut");
            var nights = $("#Nights");

            var triggeringElement = $(this);

            var minArrivalDate = new Date();

            var departureDate = departure.datepicker("getDate");

            if (departureDate != null) {
                    minArrivalDate.setDate(departureDate.getDate() + 1);
            } else {
                    minArrivalDate.setDate(minArrivalDate.getDate() + 1);
            }
            arrival.datepicker('option', 'minDate', minArrivalDate);

            var arrivalDate = arrival.datepicker("getDate");

            if (departureDate != null && arrivalDate != null && triggeringElement.attr("id") != "Nights") {
                    var oneDay = 1000*60*60*24;
                    var difference = Math.ceil((arrivalDate.getTime() - departureDate.getTime()) / oneDay);
                    nights.val(difference);
            } else if (departureDate != null && triggeringElement.attr("id") == "Nights") {
                    var nightsEntered = parseInt(nights.val());
                    if (nightsEntered >= 1) {
                            var newArrivalDate = new Date();
                            newArrivalDate.setDate(departureDate.getDate() + nightsEntered);
                            arrival.datepicker("setDate", newArrivalDate);
                    } else {
                            alert("Nights must be greater than 1.");
                    }
            }
    }
    $(function() {
            $("#CheckIn, #CheckOut").datepicker({
                    onSelect: DatePicked
            });
            $("#Nights").change(DatePicked);
            DatePicked();
    });
</script>

Form:

<form class="enquiry" action="assets/scripts/booking.php" method="get" name="Booking">
<div class="Widget_Form_Spacer">
<label for="CheckIn">Check-In</label>
<input id="CheckIn" name="CheckIn" type="text" class="tF bL" value="<?php echo date("m/d/Y"); ?>" />
</div>
<div class="Widget_Form_Spacer Right">
<label for="CheckOut">Check-Out</label>
<input id="CheckOut" name="CheckOut" type="text" class="tF bL" value="" />
</div>
<div class="Widget_Form_Spacer Short">
<label for="Nights">Nights</label>
<input id="Nights" name="Nights" type="text" class="tF nL" value="1" onclick="clickclear(this, '1')" onblur="clickrecall(this,'1')" />
</div>
<div class="Widget_Form_Spacer Short">
<label for="Adults">Adults</label>
<input name="Adults" type="text" class="tF nL" value="1" onclick="clickclear(this, '1')" onblur="clickrecall(this,'1')" />
</div>
<div class="Widget_Form_Spacer Long">
<input name="Check" type="submit" value="Check Availability" />
</div>
</form>

Answer 1

You can use the minDate jquery UI datepicker option:

$("#date").datepicker({ minDate: new Date() });

Live DEMO