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

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?
Mike MillerSoftware EngineerAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
Why not set To min date to today's date as well.
0
Brian TaoSenior Business Solutions ConsultantCommented:
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.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Mike MillerSoftware EngineerAuthor Commented:
That's actually perfect Brian, thank you!
0
Brian TaoSenior Business Solutions ConsultantCommented:
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

0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.