From 79b28eb851ce3a83e124505269838d732005f722 Mon Sep 17 00:00:00 2001
From: Miles Pool <miles@landinsight.io>
Date: Mon, 17 Aug 2020 23:10:10 +0100
Subject: [PATCH] Add strict month and year selection limits.

---
 README.md                                     |  4 +++
 src/App.vue                                   | 18 ++++++----
 .../_subs/CustomButton/index.vue              | 12 +++++--
 .../DatePicker/_subs/YearMonthSelector.vue    | 35 +++++++++++++++++++
 .../_subs/DatePicker/index.vue                |  9 ++++-
 .../_subs/PickersContainer/index.vue          |  1 +
 src/VueCtkDateTimePicker/index.vue            |  9 ++++-
 7 files changed, 77 insertions(+), 11 deletions(-)

diff --git a/README.md b/README.md
index bc6e2926..fffd4853 100644
--- a/README.md
+++ b/README.md
@@ -223,6 +223,9 @@ The default value for this object is:
 
 ```js
 {
+  date: {
+    strictDateLimits: false;
+  },
   time: {
     nearestIfDisabled: true;
   }
@@ -243,6 +246,7 @@ To override those values, pass a new object with the values you want to override
 
 | Behaviour              | Description                                                                                                                                                                                                                                                                                                                                                                       | Type    | Default |
 | ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ------- |
+| date.strictDateLimits  | When `true`, selection of months and years will be disabled outside of any supplied limits (`min-date` – `max-date`). Set to `false`, all months and years will be selectable, even if all days are out of range.                                                                                                                                                                 | Boolean | false   |
 | time.nearestIfDisabled | If `true`, it will select the nearest available hour in the timepicker, if the current selected hour is disabled. Per example, if the hour is 12 but all the hours have been disabled until 14, then the 14 will be selected by default. Set `false` to disable this behaviour; the current hour will remain selected even if it has been disabled. The user cannot re-select it. | Boolean | true    |
 
 # Events API
diff --git a/src/App.vue b/src/App.vue
index 35b0a6da..13b0d034 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -221,6 +221,11 @@
                 :disabled-weekly="demo.options.disabledWeekly"
                 :right="demo.options.right"
                 :no-clear-button="demo.options.noClearButton"
+                :behaviour="{
+                  date: {
+                    strictDateLimits: demo.options.strictDateLimits
+                  }
+                }"
               >
                 <input
                   v-if="demo.options && demo.options.slot && demo.options.slot.type === 'input'"
@@ -256,7 +261,7 @@
         booleanOptions: [
           'noHeader', 'autoClose', 'error', 'dark', 'overlay', 'noWeekendDays', 'noShortcuts',
           'noButton', 'onlyDate', 'range', 'onlyTime', 'inline', 'persistent', 'disabled', 'noButtonNow', 'noValueToCustomElem',
-          'noKeyboard', 'right', 'noClearButton', 'noLabel'
+          'noKeyboard', 'right', 'noClearButton', 'noLabel', 'strictDateLimits'
         ],
         stringOptions: [
           'id', 'label', 'hint', 'color', 'buttonColor', 'position', 'format', 'formatted', 'outputFormat',
@@ -385,16 +390,17 @@
           },
           {
             id: '7',
-            title: 'Min and Max date with time in 24h-format',
-            description: 'minDate: 2019-03-03 20:10, maxDate: 2019-06-24 09:14',
+            title: 'Strict Min and Max date with time in 24h-format',
+            description: 'minDate: 2010-03-03 20:10, maxDate: 2022-06-24 09:14',
             initial: '2019-03-04 20:26',
             value: '2019-03-04 20:26',
             editOption: false,
             options: {
               format: 'YYYY-MM-DD HH:mm',
               id: 'DateTimePicker',
-              minDate: '2019-03-03 20:10',
-              maxDate: '2019-06-24 09:14'
+              minDate: '2010-03-03 20:10',
+              maxDate: '2022-06-24 09:14',
+              strictDateLimits: true
             }
           },
           {
@@ -408,7 +414,7 @@
               format: 'YYYY-MM-DD h:mm a',
               id: 'DateTimePicker',
               minDate: '2019-03-03 8:10 pm',
-              maxDate: '2019-03-24 9:14 am'
+              maxDate: '2019-06-24 9:14 am'
             }
           },
           {
diff --git a/src/VueCtkDateTimePicker/_subs/CustomButton/index.vue b/src/VueCtkDateTimePicker/_subs/CustomButton/index.vue
index d62615af..06845b9d 100644
--- a/src/VueCtkDateTimePicker/_subs/CustomButton/index.vue
+++ b/src/VueCtkDateTimePicker/_subs/CustomButton/index.vue
@@ -6,8 +6,10 @@
       'with-border': withBorder,
       'is-hover': hover,
       'is-selected': selected,
+      'is-disabled': disabled,
       'round': round
     }"
+    :disabled="disabled"
     tabindex="-1"
     type="button"
     @click.stop="$emit('click')"
@@ -38,14 +40,18 @@
       withBorder: { type: Boolean, default: false },
       hover: { type: Boolean, default: false },
       selected: { type: Boolean, default: false },
+      disabled: { type: Boolean, default: false },
       round: { type: Boolean, default: false }
     },
     computed: {
       colorStyle () {
-        const color = this.dark ? 'white' : this.color
+        const color = this.dark ? 'white'
+          : this.disabled ? '#424242'
+            : this.color
         return {
           color: color,
-          fill: color
+          fill: color,
+          opacity: this.disabled ? 0.5 : 1
         }
       },
       bgStyle () {
@@ -97,7 +103,7 @@
     &.with-border {
       border: 1px solid #eaeaea;
     }
-    &:hover, &.is-hover {
+    &:hover:enabled, &.is-hover {
       border: 1px solid transparent !important;
       .custom-button-effect {
         transform: scale(1);
diff --git a/src/VueCtkDateTimePicker/_subs/PickersContainer/_subs/DatePicker/_subs/YearMonthSelector.vue b/src/VueCtkDateTimePicker/_subs/PickersContainer/_subs/DatePicker/_subs/YearMonthSelector.vue
index 97743687..e5d449ba 100644
--- a/src/VueCtkDateTimePicker/_subs/PickersContainer/_subs/DatePicker/_subs/YearMonthSelector.vue
+++ b/src/VueCtkDateTimePicker/_subs/PickersContainer/_subs/DatePicker/_subs/YearMonthSelector.vue
@@ -21,6 +21,7 @@
         :key="index"
         :color="color"
         :selected="currentMonth === index"
+        :disabled="strictLimits && isMonthDisabled(index)"
         :dark="dark"
         class="month-button"
         with-border
@@ -34,6 +35,7 @@
         :color="color"
         :dark="dark"
         :selected="currentYear === year"
+        :disabled="strictLimits && isYearDisabled(year)"
         with-border
         @click="selectYear(year)"
       >
@@ -44,6 +46,7 @@
 </template>
 
 <script>
+  import moment from 'moment'
   import { getMonthsShort } from '@/VueCtkDateTimePicker/modules/month'
   import CustomButton from '@/VueCtkDateTimePicker/_subs/CustomButton'
 
@@ -64,6 +67,9 @@
       dark: { type: Boolean, default: null },
       color: { type: String, default: null },
       mode: { type: String, default: null },
+      minDate: { type: String, default: null },
+      maxDate: { type: String, default: null },
+      strictLimits: { type: Boolean, default: false },
       month: { type: Object, default: null }
     },
     data () {
@@ -81,6 +87,12 @@
       },
       isMonthMode () {
         return this.mode === 'month'
+      },
+      minYear () {
+        return this.minDate && moment(this.minDate, 'YYYY-MM-DD').year()
+      },
+      maxYear () {
+        return this.maxDate && moment(this.maxDate, 'YYYY-MM-DD').year()
       }
     },
     mounted () {
@@ -91,6 +103,29 @@
       }
     },
     methods: {
+      isYearDisabled (year) {
+        return (this.minDate && this.isBeforeMinYear(year)) ||
+          (this.minDate && this.isAfterMaxYear(year))
+      },
+      isBeforeMinYear (year) {
+        return year < this.minYear
+      },
+      isAfterMaxYear (year) {
+        return year > this.maxYear
+      },
+      isMonthDisabled (month) {
+        return !this.currentYear ||
+          (this.minDate && this.isBeforeMinMonth(this.currentYear, month)) ||
+          (this.minDate && this.isAfterMaxMonth(this.currentYear, month))
+      },
+      isBeforeMinMonth (year, month) {
+        return this.isBeforeMinYear(year) ||
+          (year === this.minYear && month < moment(this.minDate, 'YYYY-MM-DD').month())
+      },
+      isAfterMaxMonth (year, month) {
+        return this.isAfterMaxYear(year) ||
+          (year === this.maxYear && month > moment(this.maxDate, 'YYYY-MM-DD').month())
+      },
       getMonths () {
         this.years = null
         this.months = getMonthsShort(this.locale)
diff --git a/src/VueCtkDateTimePicker/_subs/PickersContainer/_subs/DatePicker/index.vue b/src/VueCtkDateTimePicker/_subs/PickersContainer/_subs/DatePicker/index.vue
index 080161be..19a88881 100644
--- a/src/VueCtkDateTimePicker/_subs/PickersContainer/_subs/DatePicker/index.vue
+++ b/src/VueCtkDateTimePicker/_subs/PickersContainer/_subs/DatePicker/index.vue
@@ -143,6 +143,9 @@
         :dark="dark"
         :mode="selectingYearMonth"
         :month="month"
+        :min-date="minDate"
+        :max-date="maxDate"
+        :strict-limits="strictDateLimits"
         @input="selectYearMonth"
         @back="selectingYearMonth = null"
       />
@@ -185,7 +188,8 @@
       noShortcuts: { type: Boolean, default: null },
       firstDayOfWeek: { type: Number, default: null },
       customShortcuts: { type: Array, default: () => ([]) },
-      visible: { type: Boolean, default: null }
+      visible: { type: Boolean, default: null },
+      behaviour: { type: Object, default: () => ({}) }
     },
     data () {
       return {
@@ -220,6 +224,9 @@
       },
       weekDays () {
         return getWeekDays(this.locale, this.firstDayOfWeek)
+      },
+      strictDateLimits () {
+        return this.behaviour && this.behaviour.date && this.behaviour.date.strictDateLimits
       }
     },
     methods: {
diff --git a/src/VueCtkDateTimePicker/_subs/PickersContainer/index.vue b/src/VueCtkDateTimePicker/_subs/PickersContainer/index.vue
index e4b1c9ff..af4f1dad 100644
--- a/src/VueCtkDateTimePicker/_subs/PickersContainer/index.vue
+++ b/src/VueCtkDateTimePicker/_subs/PickersContainer/index.vue
@@ -52,6 +52,7 @@
             :custom-shortcuts="customShortcuts"
             :no-keyboard="noKeyboard"
             :locale="locale"
+            :behaviour="behaviour"
             @change-month="changeMonth"
             @change-year-month="changeYearMonth"
             @close="$emit('close')"
diff --git a/src/VueCtkDateTimePicker/index.vue b/src/VueCtkDateTimePicker/index.vue
index 230df953..4ad36016 100644
--- a/src/VueCtkDateTimePicker/index.vue
+++ b/src/VueCtkDateTimePicker/index.vue
@@ -111,6 +111,9 @@
    * @const defaultBehaviour
    */
   const defaultBehaviour = {
+    date: {
+      strictDateLimits: false
+    },
     time: {
       nearestIfDisabled: true
     }
@@ -199,9 +202,13 @@
        * @returns {Object}
        */
       _behaviour () {
-        const { time } = defaultBehaviour
+        const { date, time } = defaultBehaviour
 
         return {
+          date: {
+            ...date,
+            ...this.behaviour.date
+          },
           time: {
             ...time,
             ...this.behaviour.time