Add restricted weeks to jQuery UI weekpicker

lugolabs · May 26, 2018 · e339839 · e339839
1 parent c35d4d8
commit e339839
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 10 deletions.
diff --git a/week-picker/README.md b/week-picker/README.md
@@ -1,4 +1,4 @@
 jQuery weekpicker
 -----------------
 
-Turn the [jQuery UI datepicker](http://jqueryui.com/datepicker) into a weekpicker. Check the [walkthrough](http://lugolabs.com/articles/87-turn-jquery-ui-datepicker-into-a-weekpicker) at Lugo Labs.
+Turn the [jQuery UI datepicker](http://jqueryui.com/datepicker) into a weekpicker. Check the [walkthrough](https://www.lugolabs.com/articles/turn-jquery-ui-datepicker-into-a-weekpicker) at Lugo Labs.
diff --git a/week-picker/index.html b/week-picker/index.html
@@ -23,15 +23,15 @@ <h1>jQuery weekpicker</h1>
   <script src="jquery-weekpicker.js"></script>
   <script>
     $(function() {
-      var dateText = '12/20/2015',
+      var dateText = '05/26/2018',
         display = $('#week-start');
       display.text(dateText);
-
       $('#weekpicker').weekpicker({
         currentText: dateText,
         onSelect: function(dateText, startDateText, startDate, endDate, inst) {
           display.text(startDateText);
-        }
+        },
+        restrictWeeks: ['06/10/2018', '06/24/2018', '07/15/2018']
       });
     });
   </script>

diff --git a/week-picker/jquery-weekpicker.js b/week-picker/jquery-weekpicker.js
@@ -11,6 +11,7 @@
       this._dateFormat = this.options.dateFormat || $.datepicker._defaults.dateFormat;
       var date = this._initialDate();
       this._setWeek(date);
+      this._extendRestrictedWeeks();
       var onSelect = this.options.onSelect;
       this._picker = $(this.element).datepicker($.extend(this.options, this._weekOptions, {
         onSelect: function(dateText, inst) {
@@ -45,22 +46,45 @@
     },
 
     _showDay: function(date) {
+      var dt       = jQuery.datepicker.formatDate(this._dateFormat, date);
+      var show     = this._restrictDates.indexOf(dt) < 0;
       var cssClass = date >= this._startDate && date <= this._endDate ? 'ui-datepicker-current-day' : '';
-      return [true, cssClass];
+      return [show, cssClass];
     },
 
     _setWeek: function(date) {
-      var year = date.getFullYear(),
-        month = date.getMonth(),
-        day   = date.getDate() - date.getDay();
-      this._startDate = new Date(year, month, day);
-      this._endDate   = new Date(year, month, day + 6);
+      var explodedDate = this._explodeDate(date);
+      this._startDate = new Date(explodedDate.year, explodedDate.month, explodedDate.day);
+      this._endDate   = new Date(explodedDate.year, explodedDate.month, explodedDate.day + 6);
     },
 
     _selectCurrentWeek: function() {
       $('.ui-datepicker-calendar')
         .find('.ui-datepicker-current-day a')
         .addClass('ui-state-active');
+    },
+
+    _extendRestrictedWeeks: function() {
+      this._restrictDates = [];
+      if (this.options.restrictWeeks && this.options.restrictWeeks.length) {
+        var date, explodedDate;
+        for (var i = 0; i < this.options.restrictWeeks.length; i++) {
+          date = $.datepicker.parseDate(this._dateFormat, this.options.restrictWeeks[i]);
+          for (var j = 0; j < 7; j++) {
+            explodedDate = this._explodeDate(date);
+            date = new Date(explodedDate.year, explodedDate.month, explodedDate.day + j);
+            this._restrictDates.push(jQuery.datepicker.formatDate(this._dateFormat, date));
+          }
+        }
+      }
+    },
+
+    _explodeDate: function(date) {
+      return {
+        year:  date.getFullYear(),
+        month: date.getMonth(),
+        day:   date.getDate() - date.getDay()
+      };
     }
   });