feat(datepicker)!: Make from/to dates inclusive

Author: mst101

docs/guide/DisabledDates/README.md

@@ -25,7 +25,7 @@ var state = {
 }
 ```
 
-All dates before 2016-01-05 are disabled.
+2016-01-05 and all earlier dates are disabled.
 
 ## Disable from a specific date
 
@@ -37,7 +37,7 @@ var state = {
 }
 ```
 
-All dates after 2016-01-26 are disabled.
+2016-01-26 and all later dates are disabled.
 
 ## Disable specific days of the week
 
@@ -102,7 +102,7 @@ var state = {
 }
 ```
 
-The dates from 2016-12-26 to 2016-12-29 (inclusive) and 2017-02-13 to 2017-03-24
+The dates from 2016-12-25 to 2016-12-30 (inclusive) and 2017-02-12 to 2017-03-25
 (inclusive) are disabled.
 
 ## Disable based on custom logic

docs/guide/HighlightedDates/README.md

@@ -23,7 +23,7 @@ var state = {
 }
 ```
 
-Everything before 2016-01-05 is highlighted.
+2016-01-05 and all earlier dates are highlighted.
 
 ## Highlight from a specific date
 
@@ -35,7 +35,7 @@ var state = {
 }
 ```
 
-Everything after 2016-01-26 is highlighted.
+2016-01-26 and all later dates are highlighted.
 
 ## Highlight specific days of the week
 

docs/guide/Migration/README.md

@@ -1,7 +1,12 @@
 # Migration
 
+## 5.x.x to 6.x.x
+
+- disabled and highlighted `to`/`from` dates are now **inclusive** e.g. `<DatePicker :disabled-dates="{ from: new Date(2023, 6, 15) }" />` now disables 15th July 2023 and all dates beyond.
+
 ## 4.x.x to 5.x.x
 
+- the datepicker now supports Vue 3. Please use version 4.x.x for Vue 2 compatibility.
 - the `selected` event has been deprecated in favour of `input`. You should therefore listen to `input` events on the datepicker, or simply bind your date via v-model: `<DatePicker v-model="myDate" />`
 - a `typeable` datepicker no longer selects the date each time the input string can be parsed to a date. Instead, a typed date is only selected - and an `input` event fired - when the input field is focused and the `enter` key is pressed, or when the datepicker loses focus entirely.
 - a new `changed` event is emitted whenever the selected date deviates from its previous value.

src/components/PickerDay.vue

@@ -204,11 +204,7 @@ export default {
         return false
       }
 
-      const { from } = this.disabledConfig
-      const disabledFromMonth = this.utils.monthYearDate(from.year, from.month)
-      const pageMonth = this.utils.monthYearDate(this.pageYear, this.pageMonth)
-
-      return disabledFromMonth <= pageMonth
+      return this.latestPossibleDate < this.firstOfNextMonth
     },
     /**
      * Is the previous month disabled?
@@ -219,11 +215,15 @@ export default {
         return false
       }
 
-      const { to } = this.disabledConfig
-      const disabledToMonth = this.utils.monthYearDate(to.year, to.month)
-      const pageMonth = this.utils.monthYearDate(this.pageYear, this.pageMonth)
-
-      return disabledToMonth >= pageMonth
+      return this.earliestPossibleDate > this.lastOfPreviousMonth
+    },
+    /**
+     * The first day of the next page's month.
+     * @return {Date}
+     */
+    lastOfPreviousMonth() {
+      const d = new Date(this.pageDate)
+      return new Date(this.utils.setDate(d, 0))
     },
     /**
      * Returns the current page's month as an integer.

src/components/PickerMonth.vue

@@ -103,7 +103,7 @@ export default {
       if (!this.disabledConfig.has.from) {
         return false
       }
-      return this.disabledConfig.from.year <= this.pageYear
+      return this.latestPossibleDate <= new Date(this.pageYear, 11, 31)
     },
     /**
      * Is the previous year disabled?
@@ -113,7 +113,7 @@ export default {
       if (!this.disabledConfig.has.to) {
         return false
       }
-      return this.disabledConfig.to.year >= this.pageYear
+      return this.earliestPossibleDate >= new Date(this.pageYear, 0, 1)
     },
     /**
      * Display the current page's year as the title.

src/components/PickerYear.vue

@@ -113,7 +113,8 @@ export default {
       if (!this.disabledConfig.has.from) {
         return false
       }
-      return this.disabledConfig.from.year <= this.pageDecadeEnd
+      const firstDayOfNextDecade = new Date(this.pageDecadeEnd + 1, 0, 1)
+      return this.latestPossibleDate < firstDayOfNextDecade
     },
     /**
      * Is the previous decade disabled?
@@ -123,7 +124,8 @@ export default {
       if (!this.disabledConfig.has.to) {
         return false
       }
-      return this.disabledConfig.to.year >= this.pageDecadeStart
+      const lastDayOfPreviousDecade = new Date(this.pageDecadeStart - 1, 11, 31)
+      return this.earliestPossibleDate > lastDayOfPreviousDecade
     },
     /**
      * The year at which the current yearRange starts

src/utils/DateUtils.js

@@ -390,18 +390,6 @@ const utils = {
     )
   },
 
-  /**
-   * Create a date object from a month and year, using UTC or not
-   * @param {Number} year
-   * @param {Number} monthIndex
-   * @return {Date}
-   */
-  monthYearDate(year, monthIndex) {
-    return this.useUtc
-      ? new Date(Date.UTC(year, monthIndex, 1))
-      : new Date(year, monthIndex, 1)
-  },
-
   /**
    * Return a new date object with hours/minutes/seconds/milliseconds removed.
    * Defaults to today's date, if no parameter is provided

src/utils/DisabledDate.js

@@ -42,10 +42,10 @@ export default class DisabledDate {
 
     return {
       to: () => {
-        return has.to && date < disabledDates.to
+        return has.to && date <= disabledDates.to
       },
       from: () => {
-        return has.from && date > disabledDates.from
+        return has.from && date >= disabledDates.from
       },
       range: () => {
         if (!has.ranges) return false
@@ -58,7 +58,7 @@ export default class DisabledDate {
           const hasTo = u.isDefined(thisRange, 'to')
 
           return (
-            hasFrom && hasTo && date < thisRange.to && date > thisRange.from
+            hasFrom && hasTo && date <= thisRange.to && date >= thisRange.from
           )
         })
       },

src/utils/HighlightedDate.js

@@ -50,10 +50,10 @@ export default class HighlightedDate {
 
     return {
       to: () => {
-        return has.to && date < highlightedDates.to
+        return has.to && date <= highlightedDates.to
       },
       from: () => {
-        return has.from && date > highlightedDates.from
+        return has.from && date >= highlightedDates.from
       },
       range: () => {
         if (!has.ranges) return false

test/e2e/specs/CellNavigation.feature

@@ -43,8 +43,8 @@ Feature: Cell Navigation
 
     Examples:
       | # | openDate   | direction | view  | toOrFrom | disabled   | page     | focusedCell |
-      | 1 | 2020-01-01 | up        | day   | to       | 2019-12-26 | previous | 26          |
-      | 2 | 2020-01-31 | down      | day   | from     | 2020-02-05 | next     | 5           |
+      | 1 | 2020-01-01 | up        | day   | to       | 2019-12-25 | previous | 26          |
+      | 2 | 2020-01-31 | down      | day   | from     | 2020-02-06 | next     | 5           |
       | 3 | 2020-01-01 | up        | month | to       | 2019-12-01 | previous | December    |
       | 4 | 2019-12-31 | down      | month | from     | 2020-01-31 | next     | January     |
       | 5 | 2022-01-01 | up        | year  | to       | 2019-01-01 | previous | 2019        |
@@ -59,8 +59,8 @@ Feature: Cell Navigation
 
     Examples:
       | # | openDate   | direction | view  | toOrFrom | disabled   | focusedCell |
-      | 1 | 2020-01-15 | left      | day   | to       | 2020-01-14 | 14          |
-      | 2 | 2020-01-15 | right     | day   | from     | 2020-01-16 | 16          |
+      | 1 | 2020-01-15 | left      | day   | to       | 2020-01-13 | 14          |
+      | 2 | 2020-01-15 | right     | day   | from     | 2020-01-17 | 16          |
       | 3 | 2020-06-01 | left      | month | to       | 2020-05-15 | May         |
       | 4 | 2020-06-01 | right     | month | from     | 2020-07-15 | July        |
       | 5 | 2023-01-01 | left      | year  | to       | 2022-06-01 | 2022        |