1 files changed, 49 insertions, 11 deletions

diff --git a/toolkit/content/widgets/datekeeper.js b/toolkit/content/widgets/datekeeper.js
index 9777ee647..9517e2154 100644
--- a/toolkit/content/widgets/datekeeper.js
+++ b/toolkit/content/widgets/datekeeper.js
@@ -45,18 +45,21 @@ function DateKeeper(props) {
      * @param  {Number} day
      * @param  {String} min
      * @param  {String} max
+     * @param  {Number} step
+     * @param  {Number} stepBase
      * @param  {Number} firstDayOfWeek
      * @param  {Array<Number>} weekends
      * @param  {Number} calViewSize
      */
-    init({ year, month, day, min, max, firstDayOfWeek = 0, weekends = [0], calViewSize = 42 }) {
+    init({ year, month, day, min, max, step, stepBase, firstDayOfWeek = 0, weekends = [0], calViewSize = 42 }) {
       const today = new Date();
       const isDateSet = year != undefined && month != undefined && day != undefined;
 
       this.state = {
-        firstDayOfWeek, weekends, calViewSize,
+        step, firstDayOfWeek, weekends, calViewSize,
         min: new Date(min != undefined ? min : MIN_DATE),
         max: new Date(max != undefined ? max : MAX_DATE),
+        stepBase: new Date(stepBase),
         today: this._newUTCDate(today.getFullYear(), today.getMonth(), today.getDate()),
         weekHeaders: this._getWeekHeaders(firstDayOfWeek, weekends),
         years: [],
@@ -192,33 +195,50 @@ function DateKeeper(props) {
      *         }
      */
     getDays() {
-      // TODO: add step support
       const firstDayOfMonth = this._getFirstCalendarDate(this.state.dateObj, this.state.firstDayOfWeek);
       const month = this.month;
       let days = [];
 
       for (let i = 0; i < this.state.calViewSize; i++) {
-        const dateObj = this._newUTCDate(firstDayOfMonth.getUTCFullYear(), firstDayOfMonth.getUTCMonth(), firstDayOfMonth.getUTCDate() + i);
+        const dateObj = this._newUTCDate(firstDayOfMonth.getUTCFullYear(),
+                                         firstDayOfMonth.getUTCMonth(),
+                                         firstDayOfMonth.getUTCDate() + i);
         let classNames = [];
         let enabled = true;
-        if (this.state.weekends.includes(dateObj.getUTCDay())) {
+
+        const isWeekend = this.state.weekends.includes(dateObj.getUTCDay());
+        const isCurrentMonth = month == dateObj.getUTCMonth();
+        const isSelection = this.state.selection.year == dateObj.getUTCFullYear() &&
+                            this.state.selection.month == dateObj.getUTCMonth() &&
+                            this.state.selection.day == dateObj.getUTCDate();
+        const isOutOfRange = dateObj.getTime() < this.state.min.getTime() ||
+                             dateObj.getTime() > this.state.max.getTime();
+        const isToday = this.state.today.getTime() == dateObj.getTime();
+        const isOffStep = this._checkIsOffStep(dateObj,
+                                               this._newUTCDate(dateObj.getUTCFullYear(),
+                                                                dateObj.getUTCMonth(),
+                                                                dateObj.getUTCDate() + 1));
+
+        if (isWeekend) {
           classNames.push("weekend");
         }
-        if (month != dateObj.getUTCMonth()) {
+        if (!isCurrentMonth) {
           classNames.push("outside");
         }
-        if (this.state.selection.year == dateObj.getUTCFullYear() &&
-            this.state.selection.month == dateObj.getUTCMonth() &&
-            this.state.selection.day == dateObj.getUTCDate()) {
+        if (isSelection && !isOutOfRange && !isOffStep) {
           classNames.push("selection");
         }
-        if (dateObj.getTime() < this.state.min.getTime() || dateObj.getTime() > this.state.max.getTime()) {
+        if (isOutOfRange) {
           classNames.push("out-of-range");
           enabled = false;
         }
-        if (this.state.today.getTime() == dateObj.getTime()) {
+        if (isToday) {
           classNames.push("today");
         }
+        if (isOffStep) {
+          classNames.push("off-step");
+          enabled = false;
+        }
         days.push({
           dateObj,
           classNames,
@@ -229,6 +249,24 @@ function DateKeeper(props) {
     },
 
     /**
+     * Check if a date is off step given a starting point and the next increment
+     * @param  {Date} start
+     * @param  {Date} next
+     * @return {Boolean}
+     */
+    _checkIsOffStep(start, next) {
+      // If the increment is larger or equal to the step, it must not be off-step.
+      if (next - start >= this.state.step) {
+        return false;
+      }
+      // Calculate the last valid date
+      const lastValidStep = Math.floor((next - 1 - this.state.stepBase) / this.state.step);
+      const lastValidTimeInMs = lastValidStep * this.state.step + this.state.stepBase.getTime();
+      // The date is off-step if the last valid date is smaller than the start date
+      return lastValidTimeInMs < start.getTime();
+    },
+
+    /**
      * Get week headers for calendar
      * @param  {Number} firstDayOfWeek
      * @param  {Array<Number>} weekends