jQuery UI datepicker: startDate / endDate - Stopping selectable dates based on day of the week

Mike Miller
Mike Miller used Ask the Experts™
on
Using some code now to prevent selecting an "End Date" before a "Start Sate"...

            var dateFormat = "mm/dd/yy";
            var from = $("#StartDate").datepicker({
                changeMonth: true,
                numberOfMonths: 1
            }).on("change", function () {
                to.datepicker("option", "minDate", getDate(this));
            });

            var to = $("#EndDate").datepicker({
                changeMonth: true,
                numberOfMonths: 1
            }).on("change", function () {
                from.datepicker("option", "maxDate", getDate(this));
            });

            function getDate(element) {
                var date;
                try {
                    date = $.datepicker.parseDate(dateFormat, element.value);
                } catch (error) {
                    date = null;
                }

                return date;
            }

Open in new window


I need to change this to also only allow a date to be selected up to the next sunday. i.e. looking at a current 2017 calendar, if I were to select today (Friday, March 10) as a "Start Date" then i would only be able to select dates through March 12, which is the next Sunday. (So only March 10, 11, and 12, would be available for "End Date"

Another example would be April 3 (Monday) is the start date.
April 4 (Tuesday)
April 5 (Wednesday)
April 6 (Thursday)
April 7 (Friday)
April 8 (Saturday)
April 9 (Sunday)
would be the only selectable options for "End Date"

How would I do this?
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
Why not set To min date to today's date as well.
Senior Business Solutions Consultant
Top Expert 2014
Commented:
You don't need to define your own "getDate" function, as datepicker has a built-in one.
The following code will work:
<script>
var dateFormat = "mm/dd/yy";
$(document).ready(function(){
  var from = $("#StartDate").datepicker({
    changeMonth: true,
    dateFormat: dateFormat,
    numberOfMonths: 1,
    onSelect: function(dt, inst){
      var fromDt = $(this).datepicker("getDate");
      var nextSunday = new Date();
      nextSunday.setDate(fromDt.getDate() + 7 - fromDt.getDay());

      to.datepicker("option", "minDate", dt);
      to.datepicker("option", "maxDate", nextSunday);
    }
  });

  var to = $("#EndDate").datepicker({
    changeMonth: true,
    dateFormat: dateFormat,
    numberOfMonths: 1,
    onSelect: function(dt, inst){
      from.datepicker("option", "maxDate", dt);
    }
  });
});
</script>

Open in new window


A reminder though, that it'd be better to check "StartDate must be earlier than EndDate" when submitting the form, otherwise if the user wants to select a period later than the current selected EndDate, he would have to first move EndDate to a later date and only then he can reselect StartDate to the wished date.
So, setting the "onSelect" event for "from" is good, while setting the one for "to" is not.
Mike MillerSoftware Engineer

Author

Commented:
That's actually perfect Brian, thank you!
Brian TaoSenior Business Solutions Consultant
Top Expert 2014

Commented:
You're welcome. One modification, line #10, #11 in my previous code should be:
      var nextSunday = new Date(fromDt.getTime());
      nextSunday.setDate(nextSunday.getDate() + 7 - fromDt.getDay());

Open in new window

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial