Restricting date input with jQueryUI date picker

We are currently in the process of some post-launch tweaks to a web application we recently launched for a client. The application handles their B2B orders via a new web portal which we designed and built from the from the ground up using Ruby on Rails (3.2), Twitter Bootstrap, jQuery, and jQuery UI.

One of the new requirements for the app was to add the following restrictions to the pickup date for their orders:

  • No pickup is allowed on weekends
  • Pickup date must be, at minimum, two business days following the order date

Initially I thought it would be easy. The datepicker offers a minDate parameter to set an offset from the current day, and a beforeShowDay parameter which can filter out selected days, coupled with very helpful datepicker.noWeekends function for disabling selection of weekends. My first solution was this:

dateFormat: 'yy-mm-dd',
minDate : 2, //Set two business Days Restriction
beforeShowDay: $.datepicker.noWeekends //Disable Weekends

I soon realized that this solution, while working very well, was incomplete – it allows dates to be selected without the ‘2 business days’ minimum around weekends. This is because the minDate and beforeShowDay parameters are ignorant of each other, so for example an order placed friday could be scheduled for pickup Monday, when it should be Tuesday at minimum instead.

My final solution was to build a custom function that would set the minimum offset dynamically based on the current day of the week – this would map Sunday to Wednesday, Thursday to Monday, etc. I built this function using a switch statement so it was most readable, even though this might not be the succinct or optimized form. The result of my work is below:

Comments Off on Restricting date input with jQueryUI date picker

Tags: ,