From e8b7199ffce3fd3f56f9f3a76f4e6d4748f8a64f Mon Sep 17 00:00:00 2001
From: Phyzical <phyzicaly@hotmail.com>
Date: Mon, 23 Nov 2020 16:25:59 +0800
Subject: [PATCH 1/9] feature/date-check-function: added disabled datetime
 checker function prop

---
 src/Datetime.vue            |  5 +++++
 src/DatetimeCalendar.vue    |  6 +++++-
 src/DatetimeMonthPicker.vue |  6 +++++-
 src/DatetimePopup.vue       |  8 ++++++++
 src/DatetimeTimePicker.vue  | 19 +++++++++++++++++--
 src/DatetimeYearPicker.vue  |  6 +++++-
 6 files changed, 45 insertions(+), 5 deletions(-)

diff --git a/src/Datetime.vue b/src/Datetime.vue
index a8d9e99..505bacc 100644
--- a/src/Datetime.vue
+++ b/src/Datetime.vue
@@ -23,6 +23,7 @@
           :phrases="phrases"
           :use12-hour="use12Hour"
           :hour-step="hourStep"
+          :datetime-disabled-checker="datetimeDisabledChecker"
           :minute-step="minuteStep"
           :min-datetime="popupMinDatetime"
           :max-datetime="popupMaxDatetime"
@@ -119,6 +120,10 @@ export default {
       type: String,
       default: null
     },
+    datetimeDisabledChecker: {
+      type: Function,
+      default: (year, month, day, hour, minute, second) => true
+    },
     auto: {
       type: Boolean,
       default: false
diff --git a/src/DatetimeCalendar.vue b/src/DatetimeCalendar.vue
index b34bb40..e67cbc5 100644
--- a/src/DatetimeCalendar.vue
+++ b/src/DatetimeCalendar.vue
@@ -43,6 +43,10 @@ export default {
     disabled: {
       type: Array
     },
+    datetimeDisabledChecker: {
+      type: Function,
+      default: (year, month, day, hour, minute, second) => true
+    },
     minDate: {
       type: DateTime,
       default: null
@@ -79,7 +83,7 @@ export default {
       return monthDays(this.newYear, this.newMonth, this.weekStart).map(day => ({
         number: day,
         selected: day && this.year === this.newYear && this.month === this.newMonth && this.day === day,
-        disabled: !day || monthDayIsDisabled(this.minDate, this.maxDate, this.newYear, this.newMonth, day)
+        disabled: !day || monthDayIsDisabled(this.minDate, this.maxDate, this.newYear, this.newMonth, day) || this.datetimeDisabledChecker(this.newYear, this.newMonth, day)
       }))
     }
   },
diff --git a/src/DatetimeMonthPicker.vue b/src/DatetimeMonthPicker.vue
index 279f8a0..4a6edb0 100644
--- a/src/DatetimeMonthPicker.vue
+++ b/src/DatetimeMonthPicker.vue
@@ -28,6 +28,10 @@ export default {
     maxDate: {
       type: DateTime,
       default: null
+    },
+    datetimeDisabledChecker: {
+      type: Function,
+      default: (year, month, day, hour, minute, second) => true
     }
   },
 
@@ -37,7 +41,7 @@ export default {
         number: ++index,
         label: month,
         selected: index === this.month,
-        disabled: !index || monthIsDisabled(this.minDate, this.maxDate, this.year, index)
+        disabled: !index || monthIsDisabled(this.minDate, this.maxDate, this.year, index) || this.datetimeDisabledChecker(this.year, month)
       }))
     }
   },
diff --git a/src/DatetimePopup.vue b/src/DatetimePopup.vue
index 5f62913..ef5b4a7 100644
--- a/src/DatetimePopup.vue
+++ b/src/DatetimePopup.vue
@@ -11,12 +11,14 @@
           @change="onChangeYear"
           :min-date="minDatetime"
           :max-date="maxDatetime"
+          :datetime-disabled-checker="datetimeDisabledChecker"
           :year="year"></datetime-year-picker>
       <datetime-month-picker
           v-if="step === 'month'"
           @change="onChangeMonth"
           :min-date="minDatetime"
           :max-date="maxDatetime"
+          :datetime-disabled-checker="datetimeDisabledChecker"
           :year="year"
           :month="month"></datetime-month-picker>
       <datetime-calendar
@@ -27,6 +29,7 @@
           :day="day"
           :min-date="minDatetime"
           :max-date="maxDatetime"
+          :datetime-disabled-checker="datetimeDisabledChecker"
           :week-start="weekStart"
       ></datetime-calendar>
       <datetime-time-picker
@@ -37,6 +40,7 @@
           :use12-hour="use12Hour"
           :hour-step="hourStep"
           :minute-step="minuteStep"
+          :datetime-disabled-checker="datetimeDisabledChecker"
           :min-time="minTime"
           :max-time="maxTime"></datetime-time-picker>
     </div>
@@ -85,6 +89,10 @@ export default {
         }
       }
     },
+    datetimeDisabledChecker: {
+      type: Function,
+      default: (year, month, day, hour, minute, second) => true
+    },
     type: {
       type: String,
       default: 'date'
diff --git a/src/DatetimeTimePicker.vue b/src/DatetimeTimePicker.vue
index cc9775f..6a001c3 100644
--- a/src/DatetimeTimePicker.vue
+++ b/src/DatetimeTimePicker.vue
@@ -15,6 +15,7 @@
 
 <script>
 import { hours, minutes, pad, timeComponentIsDisabled } from './util'
+import { DateTime } from 'luxon'
 
 export default {
   props: {
@@ -34,6 +35,14 @@ export default {
       type: Number,
       default: 1
     },
+    datetimeDisabledChecker: {
+      type: Function,
+      default: (year, month, day, hour, minute, second) => true
+    },
+    currentDateTime: {
+      type: DateTime,
+      default: () => DateTime.utc()
+    },
     minuteStep: {
       type: Number,
       default: 1
@@ -50,6 +59,9 @@ export default {
 
   computed: {
     hours () {
+      const year = this.currentDateTime.c.year
+      const month = this.currentDateTime.c.month
+      const day = this.currentDateTime.c.day
       return hours(this.hourStep).filter(hour => {
         if (!this.use12Hour) {
           return true
@@ -63,14 +75,17 @@ export default {
       }).map(hour => ({
         number: pad(hour),
         selected: hour === this.hour,
-        disabled: timeComponentIsDisabled(this.minHour, this.maxHour, hour)
+        disabled: timeComponentIsDisabled(this.minHour, this.maxHour, hour) || this.datetimeDisabledChecker(year, month, day, hour)
       }))
     },
     minutes () {
+      const year = this.currentDateTime.c.year
+      const month = this.currentDateTime.c.month
+      const day = this.currentDateTime.c.day
       return minutes(this.minuteStep).map(minute => ({
         number: pad(minute),
         selected: minute === this.minute,
-        disabled: timeComponentIsDisabled(this.minMinute, this.maxMinute, minute)
+        disabled: timeComponentIsDisabled(this.minMinute, this.maxMinute, minute) || this.datetimeDisabledChecker(year, month, day, this.hour, minute)
       }))
     },
     minHour () {
diff --git a/src/DatetimeYearPicker.vue b/src/DatetimeYearPicker.vue
index a817543..b33f7d4 100644
--- a/src/DatetimeYearPicker.vue
+++ b/src/DatetimeYearPicker.vue
@@ -24,6 +24,10 @@ export default {
     maxDate: {
       type: DateTime,
       default: null
+    },
+    datetimeDisabledChecker: {
+      type: Function,
+      default: (year, month, day, hour, minute, second) => true
     }
   },
 
@@ -32,7 +36,7 @@ export default {
       return years(this.year).map(year => ({
         number: year,
         selected: year === this.year,
-        disabled: !year || yearIsDisabled(this.minDate, this.maxDate, year)
+        disabled: !year || yearIsDisabled(this.minDate, this.maxDate, year) || this.datetimeDisabledChecker(year)
       }))
     }
   },

From 1ff970ab02db29981ae4756c568fcafdb695aead Mon Sep 17 00:00:00 2001
From: Phyzical <phyzicaly@hotmail.com>
Date: Tue, 5 Jan 2021 21:35:22 +0800
Subject: [PATCH 2/9] feature/date-check-function: Added default validation
 change

---
 src/Datetime.vue           | 2 +-
 src/DatetimeCalendar.vue   | 2 +-
 src/DatetimeTimePicker.vue | 2 +-
 src/DatetimeYearPicker.vue | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/Datetime.vue b/src/Datetime.vue
index 505bacc..14f7d97 100644
--- a/src/Datetime.vue
+++ b/src/Datetime.vue
@@ -122,7 +122,7 @@ export default {
     },
     datetimeDisabledChecker: {
       type: Function,
-      default: (year, month, day, hour, minute, second) => true
+      default: (year, month, day, hour, minute, second) => false
     },
     auto: {
       type: Boolean,
diff --git a/src/DatetimeCalendar.vue b/src/DatetimeCalendar.vue
index e67cbc5..2956f15 100644
--- a/src/DatetimeCalendar.vue
+++ b/src/DatetimeCalendar.vue
@@ -45,7 +45,7 @@ export default {
     },
     datetimeDisabledChecker: {
       type: Function,
-      default: (year, month, day, hour, minute, second) => true
+      default: (year, month, day, hour, minute, second) => false
     },
     minDate: {
       type: DateTime,
diff --git a/src/DatetimeTimePicker.vue b/src/DatetimeTimePicker.vue
index 6a001c3..ffc4636 100644
--- a/src/DatetimeTimePicker.vue
+++ b/src/DatetimeTimePicker.vue
@@ -37,7 +37,7 @@ export default {
     },
     datetimeDisabledChecker: {
       type: Function,
-      default: (year, month, day, hour, minute, second) => true
+      default: (year, month, day, hour, minute, second) => false
     },
     currentDateTime: {
       type: DateTime,
diff --git a/src/DatetimeYearPicker.vue b/src/DatetimeYearPicker.vue
index b33f7d4..0ff26e7 100644
--- a/src/DatetimeYearPicker.vue
+++ b/src/DatetimeYearPicker.vue
@@ -27,7 +27,7 @@ export default {
     },
     datetimeDisabledChecker: {
       type: Function,
-      default: (year, month, day, hour, minute, second) => true
+      default: (year, month, day, hour, minute, second) => false
     }
   },
 

From 9e85cce9fde2c23b6c1b08b5709f320dc476a490 Mon Sep 17 00:00:00 2001
From: Phyzical <phyzicaly@hotmail.com>
Date: Tue, 5 Jan 2021 21:35:47 +0800
Subject: [PATCH 3/9] feature/date-check-function: Added readme and demo fixes

---
 README.md       |  2 +-
 demo/index.html |  1 +
 demo/src/app.js | 72 ++++++++++++++++++++++++++++++++++++++++++++++---
 3 files changed, 71 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index c680923..f2c0425 100644
--- a/README.md
+++ b/README.md
@@ -121,7 +121,7 @@ flow | `Array` | Depends of *type* | Customize steps flow, steps available: time
 title | `String` | `''` | Popup title.
 hide-backdrop | `Boolean` | `false` | Show/Hide backdrop.
 backdrop-click | `Boolean` | `true` | Enable/Disable backdrop click to cancel (outside click).
-
+datetime-disabled-checker | `Function` | `(year, month, day, hour, minute, second) => false` |  For each possible option selection the appropriate date parts are provided to allow for a custom validation function for allowed selections
 Input inherits all props not defined above but `style` and `class` will be inherited by root element. [See inheritAttrs option](https://vuejs.org/v2/api/#inheritAttrs)
 
 The component is based on [Luxon](https://github.com/moment/luxon), check out [documentation](https://moment.github.io/luxon/docs/index.html) to set [time zones](https://moment.github.io/luxon/docs/manual/zones.html) and [format](https://moment.github.io/luxon/docs/manual/formatting.html).
diff --git a/demo/index.html b/demo/index.html
index 8876b66..3be2c8e 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -115,6 +115,7 @@ <h2>Complete demo</h2>
           :minute-step="15"
           :min-datetime="minDatetime"
           :max-datetime="maxDatetime"
+          :datetime-disabled-checker="datetimeDisabledChecker"
           :week-start="7"
           use12-hour
           auto
diff --git a/demo/src/app.js b/demo/src/app.js
index 639a044..1f6b17d 100644
--- a/demo/src/app.js
+++ b/demo/src/app.js
@@ -17,10 +17,76 @@ new Vue({
       datetime12: '2018-05-12T17:19:06.151Z',
       datetime13: '2018-05-12T17:19:06.151Z',
       datetimeEmpty: '',
-      minDatetime: LuxonDateTime.local().minus({ month: 1, days: 3 }).toISO(),
-      maxDatetime: LuxonDateTime.local().plus({ days: 3 }).toISO(),
+      minDatetime: LuxonDateTime.local().minus({
+        month: 1,
+        days: 3
+      }).toISO(),
+      maxDatetime: LuxonDateTime.local().plus({
+        days: 3
+      }).toISO(),
+      datetimeDisabledChecker: (year, month, day, hour, minute, second) => {
+        const invalidDatetimes = [
+          [LuxonDateTime.local().minus({
+            days: 8
+          }), LuxonDateTime.local().minus({
+            days: 6
+          })],
+          [LuxonDateTime.local().minus({
+            days: 3
+          }), LuxonDateTime.local().minus({
+            days: 2,
+            hours: 12
+          })]
+        ]
+        const dateToCheck = LuxonDateTime.fromObject({
+          year,
+          month,
+          day,
+          hour,
+          minute,
+          second,
+          zone: 'UTC'
+        })
+
+        const res = invalidDatetimes.reduce((acc, val) => {
+          // if still false check otherwise its already invalid
+          if (!acc) {
+            const startDateObject = {
+              zone: 'UTC'
+            }
+            const endDateObject = {
+              zone: 'UTC'
+            }
+            let startDate = val[0]
+            let endDate = val[1]
+
+            const dateOptions = ['year', 'month']
+            if (day != null) {
+              dateOptions.push('day')
+            }
+            if (minute != null) {
+              dateOptions.push('minute')
+            }
+            if (hour != null) {
+              dateOptions.push('hour')
+            }
+
+            dateOptions.map(option => {
+              startDateObject[option] = startDate.c[option]
+            })
+            dateOptions.map(option => {
+              endDateObject[option] = endDate.c[option]
+            })
+            startDate = LuxonDateTime.fromObject(startDateObject)
+            endDate = LuxonDateTime.fromObject(endDateObject)
+
+            acc = (dateToCheck > startDate) && (dateToCheck < endDate)
+          }
+          return acc
+        }, false)
+        return res
+      },
       datetimeTheming: LuxonDateTime.local().toISO()
     }
   }
 })
-

From 11803fa0052796446478ba5684b97b6548607d3c Mon Sep 17 00:00:00 2001
From: Phyzical <phyzicaly@hotmail.com>
Date: Tue, 5 Jan 2021 21:51:53 +0800
Subject: [PATCH 4/9] feature/date-check-function: added time picker fix

---
 src/DatetimePopup.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/DatetimePopup.vue b/src/DatetimePopup.vue
index ef5b4a7..be59583 100644
--- a/src/DatetimePopup.vue
+++ b/src/DatetimePopup.vue
@@ -40,6 +40,7 @@
           :use12-hour="use12Hour"
           :hour-step="hourStep"
           :minute-step="minuteStep"
+          :current-date-time="newDatetime"
           :datetime-disabled-checker="datetimeDisabledChecker"
           :min-time="minTime"
           :max-time="maxTime"></datetime-time-picker>
@@ -91,7 +92,7 @@ export default {
     },
     datetimeDisabledChecker: {
       type: Function,
-      default: (year, month, day, hour, minute, second) => true
+      default: (year, month, day, hour, minute, second) => false
     },
     type: {
       type: String,

From cfb9e757a322a844d4d7c6ec1d6e142fa45206cb Mon Sep 17 00:00:00 2001
From: Phyzical <phyzicaly@hotmail.com>
Date: Tue, 5 Jan 2021 21:52:33 +0800
Subject: [PATCH 5/9] feature/date-check-function: added disable to am/pm when
 using 12 hour

---
 src/DatetimeTimePicker.vue | 33 +++++++++++++++++++++++++++++----
 1 file changed, 29 insertions(+), 4 deletions(-)

diff --git a/src/DatetimeTimePicker.vue b/src/DatetimeTimePicker.vue
index ffc4636..88faf89 100644
--- a/src/DatetimeTimePicker.vue
+++ b/src/DatetimeTimePicker.vue
@@ -6,15 +6,24 @@
     <div class="vdatetime-time-picker__list vdatetime-time-picker__list--minutes" ref="minuteList">
       <div class="vdatetime-time-picker__item" v-for="minute in minutes" @click="selectMinute(minute)" :class="{'vdatetime-time-picker__item--selected': minute.selected, 'vdatetime-time-picker__item--disabled': minute.disabled}">{{ minute.number }}</div>
     </div>
-    <div class="vdatetime-time-picker__list vdatetime-time-picker__list--suffix" ref="suffixList" v-if="use12Hour">
-      <div class="vdatetime-time-picker__item" @click="selectSuffix('am')" :class="{'vdatetime-time-picker__item--selected': hour < 12}">am</div>
-      <div class="vdatetime-time-picker__item" @click="selectSuffix('pm')" :class="{'vdatetime-time-picker__item--selected': hour >= 12}">pm</div>
+    <div
+      class="vdatetime-time-picker__list vdatetime-time-picker__list--suffix"
+      ref="suffixList"
+      v-if="use12Hour"
+    >
+      <div
+        class="vdatetime-time-picker__item"
+        v-for="timeSelection in timeSelections"
+        :key="`selection-${timeSelection}`"
+        @click="selectSuffix(timeSelection)"
+        :class="{'vdatetime-time-picker__item--selected': timeSelection.comparison(hour) , 'vdatetime-time-picker__item--disabled': timeSelection.disabled }"
+      >{{ timeSelection.id }}</div>
     </div>
   </div>
 </template>
 
 <script>
-import { hours, minutes, pad, timeComponentIsDisabled } from './util'
+import { hours, minutes, pad, timeComponentIsDisabled, selectionIsDisabled } from './util'
 import { DateTime } from 'luxon'
 
 export default {
@@ -58,6 +67,22 @@ export default {
   },
 
   computed: {
+    timeSelections () {
+      return this.use12Hour
+        ? [
+          {
+            id: 'am',
+            comparison: (hour) => hour < 12,
+            disabled: selectionIsDisabled(this.hours, this.use12Hour, 'am')
+          },
+          {
+            id: 'pm',
+            comparison: (hour) => hour >= 12,
+            disabled: selectionIsDisabled(this.hours, this.use12Hour, 'pm')
+          }
+        ]
+        : []
+    },
     hours () {
       const year = this.currentDateTime.c.year
       const month = this.currentDateTime.c.month

From d353bb17901fe3fe4c086ff7bdbb37eef27cd0dd Mon Sep 17 00:00:00 2001
From: Phyzical <phyzicaly@hotmail.com>
Date: Tue, 5 Jan 2021 21:52:46 +0800
Subject: [PATCH 6/9] feature/date-check-function: am/pm enable/disable

---
 src/util.js | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/src/util.js b/src/util.js
index be4c261..6681702 100644
--- a/src/util.js
+++ b/src/util.js
@@ -52,6 +52,18 @@ export function yearIsDisabled (minDate, maxDate, year) {
          (maxYear && year > maxYear)
 }
 
+export function selectionIsDisabled (hours, use12Hour, selection) {
+  // if not use12hours
+  const enabledHours = hours.filter(hour => !hour.disabled)
+  let hasSelection = enabledHours.length > 0
+  if (use12Hour) {
+    hasSelection = !!enabledHours.find(hour =>
+      selection === 'am' ? hour.number < 12 : hour.number >= 12
+    )
+  }
+  return !hasSelection
+}
+
 export function timeComponentIsDisabled (min, max, component) {
   return (min !== null && component < min) ||
          (max !== null && component > max)

From a4ce2f745aa6eec5efbb2133a180477092a19d54 Mon Sep 17 00:00:00 2001
From: Phyzical <phyzicaly@hotmail.com>
Date: Tue, 5 Jan 2021 22:31:08 +0800
Subject: [PATCH 7/9] feature/date-check-function: missed another default
 disabled

---
 src/DatetimeMonthPicker.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/DatetimeMonthPicker.vue b/src/DatetimeMonthPicker.vue
index 4a6edb0..898ba02 100644
--- a/src/DatetimeMonthPicker.vue
+++ b/src/DatetimeMonthPicker.vue
@@ -31,7 +31,7 @@ export default {
     },
     datetimeDisabledChecker: {
       type: Function,
-      default: (year, month, day, hour, minute, second) => true
+      default: (year, month, day, hour, minute, second) => false
     }
   },
 

From 7052f7f35d903693abfdd8a3542a3685b8e17a98 Mon Sep 17 00:00:00 2001
From: Phyzical <phyzicaly@hotmail.com>
Date: Thu, 7 Jan 2021 14:44:51 +0800
Subject: [PATCH 8/9] feature/date-check-function: feature/date-check-function:
 Added tests for suggested changes CHANGELOG.md CONTRIBUTING.md LICENSE
 README.md build demo dist node_modules package.json src test yarn.lock Fixed
 month picker providing string instead of number to checker CHANGELOG.md
 CONTRIBUTING.md LICENSE README.md build demo dist node_modules package.json
 src test yarn.lock Added tests for changes CHANGELOG.md CONTRIBUTING.md
 LICENSE README.md build demo dist node_modules package.json src test
 yarn.lock am/pm selection added disabled if no selectable options

---
 demo/index.html                         |  1 +
 src/DatetimeMonthPicker.vue             |  2 +-
 src/DatetimeTimePicker.vue              | 37 ++++++++------
 test/specs/Datetime.spec.js             | 20 ++++++++
 test/specs/DatetimeCalendar.spec.js     | 26 ++++++++++
 test/specs/DatetimeMonthsPicker.spec.js | 27 ++++++++++
 test/specs/DatetimePopup.spec.js        | 23 +++++++--
 test/specs/DatetimeTimePicker.spec.js   | 68 +++++++++++++++++++++++++
 test/specs/DatetimeYearPicker.spec.js   | 29 ++++++++++-
 9 files changed, 212 insertions(+), 21 deletions(-)

diff --git a/demo/index.html b/demo/index.html
index 3be2c8e..af49735 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -140,6 +140,7 @@ <h2>Complete demo</h2>
   :minute-step=&#x22;15&#x22;
   :min-datetime=&#x22;minDatetime&#x22;
   :max-datetime=&#x22;maxDatetime&#x22;
+  :datetime-disabled-checker=&#x22;datetimeDisabledChecker&#x22;
   :week-start=&#x22;7&#x22;
   use12-hour
   auto
diff --git a/src/DatetimeMonthPicker.vue b/src/DatetimeMonthPicker.vue
index 898ba02..1a39609 100644
--- a/src/DatetimeMonthPicker.vue
+++ b/src/DatetimeMonthPicker.vue
@@ -41,7 +41,7 @@ export default {
         number: ++index,
         label: month,
         selected: index === this.month,
-        disabled: !index || monthIsDisabled(this.minDate, this.maxDate, this.year, index) || this.datetimeDisabledChecker(this.year, month)
+        disabled: !index || monthIsDisabled(this.minDate, this.maxDate, this.year, index) || this.datetimeDisabledChecker(this.year, index)
       }))
     }
   },
diff --git a/src/DatetimeTimePicker.vue b/src/DatetimeTimePicker.vue
index 88faf89..709852c 100644
--- a/src/DatetimeTimePicker.vue
+++ b/src/DatetimeTimePicker.vue
@@ -1,7 +1,7 @@
 <template>
   <div :class="{'vdatetime-time-picker': true, 'vdatetime-time-picker__with-suffix': use12Hour}">
     <div class="vdatetime-time-picker__list vdatetime-time-picker__list--hours" ref="hourList">
-      <div class="vdatetime-time-picker__item" v-for="hour in hours" @click="selectHour(hour)" :class="{'vdatetime-time-picker__item--selected': hour.selected, 'vdatetime-time-picker__item--disabled': hour.disabled}">{{ formatHour(hour.number) }}</div>
+      <div class="vdatetime-time-picker__item" v-for="hour in displayedHours" @click="selectHour(hour)" :class="{'vdatetime-time-picker__item--selected': hour.selected, 'vdatetime-time-picker__item--disabled': hour.disabled}">{{ formatHour(hour.number) }}</div>
     </div>
     <div class="vdatetime-time-picker__list vdatetime-time-picker__list--minutes" ref="minuteList">
       <div class="vdatetime-time-picker__item" v-for="minute in minutes" @click="selectMinute(minute)" :class="{'vdatetime-time-picker__item--selected': minute.selected, 'vdatetime-time-picker__item--disabled': minute.disabled}">{{ minute.number }}</div>
@@ -14,7 +14,7 @@
       <div
         class="vdatetime-time-picker__item"
         v-for="timeSelection in timeSelections"
-        :key="`selection-${timeSelection}`"
+        :key="`selection-${timeSelection.id}`"
         @click="selectSuffix(timeSelection)"
         :class="{'vdatetime-time-picker__item--selected': timeSelection.comparison(hour) , 'vdatetime-time-picker__item--disabled': timeSelection.disabled }"
       >{{ timeSelection.id }}</div>
@@ -83,25 +83,29 @@ export default {
         ]
         : []
     },
+    displayedHours () {
+      return this.hours.filter(hour => hour.display)
+    },
     hours () {
       const year = this.currentDateTime.c.year
       const month = this.currentDateTime.c.month
       const day = this.currentDateTime.c.day
-      return hours(this.hourStep).filter(hour => {
-        if (!this.use12Hour) {
-          return true
-        } else {
+      return hours(this.hourStep).map(hour => {
+        let isVisible = true
+        if (this.use12Hour) {
           if (this.hour < 12) {
-            return hour < 12
+            isVisible = hour < 12
           } else {
-            return hour >= 12
+            isVisible = hour >= 12
           }
         }
-      }).map(hour => ({
-        number: pad(hour),
-        selected: hour === this.hour,
-        disabled: timeComponentIsDisabled(this.minHour, this.maxHour, hour) || this.datetimeDisabledChecker(year, month, day, hour)
-      }))
+        return {
+          number: pad(hour),
+          display: isVisible,
+          selected: hour === this.hour,
+          disabled: timeComponentIsDisabled(this.minHour, this.maxHour, hour) || this.datetimeDisabledChecker(year, month, day, hour)
+        }
+      })
     },
     minutes () {
       const year = this.currentDateTime.c.year
@@ -143,12 +147,15 @@ export default {
       this.$emit('change', { minute: parseInt(minute.number) })
     },
     selectSuffix (suffix) {
-      if (suffix === 'am') {
+      if (suffix.disabled) {
+        return
+      }
+      if (suffix.id === 'am') {
         if (this.hour >= 12) {
           this.$emit('change', { hour: parseInt(this.hour - 12), suffixTouched: true })
         }
       }
-      if (suffix === 'pm') {
+      if (suffix.id === 'pm') {
         if (this.hour < 12) {
           this.$emit('change', { hour: parseInt(this.hour + 12), suffixTouched: true })
         }
diff --git a/test/specs/Datetime.spec.js b/test/specs/Datetime.spec.js
index 73258a8..031ae8b 100644
--- a/test/specs/Datetime.spec.js
+++ b/test/specs/Datetime.spec.js
@@ -262,6 +262,26 @@ describe('Datetime.vue', function () {
       })
     })
 
+    it('should pass datetime disabled checker function to popup', function (done) {
+      const vm = createVM(this,
+        `<Datetime type="datetime" :datetime-disabled-checker="datetimeDisabledChecker"></Datetime>`,
+        {
+          components: { Datetime },
+          data () {
+            return {
+              datetimeDisabledChecker: (year) => year === 2000
+            }
+          }
+        })
+
+      vm.$('.vdatetime-input').click()
+
+      vm.$nextTick(() => {
+        expect(vm.$findChild('.vdatetime-popup').datetimeDisabledChecker(2000)).to.be.equal(true)
+        done()
+      })
+    })
+
     it('should pass auto to popup', function (done) {
       const vm = createVM(this,
         `<Datetime auto></Datetime>`,
diff --git a/test/specs/DatetimeCalendar.spec.js b/test/specs/DatetimeCalendar.spec.js
index 6c74bb3..4d5a468 100644
--- a/test/specs/DatetimeCalendar.spec.js
+++ b/test/specs/DatetimeCalendar.spec.js
@@ -63,6 +63,32 @@ describe('DatetimeCalendar.vue', function () {
       expect(vm.$('.vdatetime-calendar__month__day--selected')).to.have.text('10')
     })
 
+    it('should disable days considered invalid by datetime checker', function () {
+      const vm = createVM(this,
+        `<DatetimeCalendar :year="2018" :month="7" :day="10" :datetime-disabled-checker="datetimeDisabledChecker"></DatetimeCalendar>`,
+        {
+          components: { DatetimeCalendar },
+          data () {
+            return {
+              datetimeDisabledChecker: (year, month, day) => {
+                return LuxonDatetime.fromObject({ year, month, day, timezone: 'UTC' }) < LuxonDatetime.fromISO('2018-07-06T00:00:00.000Z').toUTC()
+              }
+            }
+          }
+        })
+
+      const monthDays = vm.$$('.vdatetime-calendar__month__day')
+
+      monthDays.forEach(monthDay => {
+        const dayNumber = parseInt(monthDay.textContent)
+        if (isNaN(dayNumber) || dayNumber < 7) {
+          expect(monthDay).to.have.class('vdatetime-calendar__month__day--disabled')
+        } else {
+          expect(monthDay).to.have.not.class('vdatetime-calendar__month__day--disabled')
+        }
+      })
+    })
+
     it('should disable days before min date', function () {
       const vm = createVM(this,
         `<DatetimeCalendar :year="2018" :month="7" :day="10" :min-date="minDate"></DatetimeCalendar>`,
diff --git a/test/specs/DatetimeMonthsPicker.spec.js b/test/specs/DatetimeMonthsPicker.spec.js
index 4b6e136..0f27292 100644
--- a/test/specs/DatetimeMonthsPicker.spec.js
+++ b/test/specs/DatetimeMonthsPicker.spec.js
@@ -45,6 +45,33 @@ describe('DatetimeMonthPicker.vue', function () {
         }
       })
     })
+
+    it('should disable months given disabled datetime checker', function () {
+      const vm = createVM(this,
+        `<DatetimeMonthPicker :datetime-disabled-checker="datetimeDisabledChecker" :year="2018" :month="10"></DatetimeMonthPicker>`,
+        {
+          components: { DatetimeMonthPicker },
+          data () {
+            return {
+              datetimeDisabledChecker: (_year, month) => {
+                return month < 7
+              }
+            }
+          }
+        })
+
+      const months = vm.$$('.vdatetime-month-picker__list .vdatetime-month-picker__item')
+
+      months.forEach(month => {
+        const monthName = month.textContent.trim()
+
+        if (!(['July', 'August', 'September', 'October', 'November', 'December'].indexOf(monthName) === -1)) {
+          expect(month).to.have.not.class('vdatetime-month-picker__item--disabled')
+        } else {
+          expect(month).to.have.class('vdatetime-month-picker__item--disabled')
+        }
+      })
+    })
   })
 
   describe('events', function () {
diff --git a/test/specs/DatetimePopup.spec.js b/test/specs/DatetimePopup.spec.js
index aef33bb..b257d7d 100644
--- a/test/specs/DatetimePopup.spec.js
+++ b/test/specs/DatetimePopup.spec.js
@@ -305,6 +305,21 @@ describe('DatetimePopup.vue', function () {
       })
     })
 
+    it('should pass datetime disabled checker function to popup', function () {
+      const vm = createVM(this,
+        `<DatetimePopup :datetime="datetime" type="datetime" :datetime-disabled-checker="datetimeDisabledChecker"></DatetimePopup>`,
+        {
+          components: { DatetimePopup },
+          data () {
+            return {
+              datetime: LuxonDatetime.local(),
+              datetimeDisabledChecker: (year) => year === 2000
+            }
+          }
+        })
+      expect(vm.$findChild('.vdatetime-calendar').datetimeDisabledChecker(2000)).to.be.equal(true)
+    })
+
     it('should pass min and max date to calendar', function () {
       const vm = createVM(this,
         `<DatetimePopup :datetime="datetime" type="datetime" :min-datetime="minDatetime" :max-datetime="maxDatetime"></DatetimePopup>`,
@@ -314,7 +329,7 @@ describe('DatetimePopup.vue', function () {
             return {
               datetime: LuxonDatetime.local(),
               minDatetime: LuxonDatetime.fromISO('2018-01-01T12:35:22.000Z'),
-              maxDatetime: LuxonDatetime.fromISO('2018-01-03T20:43:13.000Z')
+              maxDatetime: LuxonDatetime.fromISO('2018-01-03T12:43:13.000Z')
             }
           }
         })
@@ -324,8 +339,8 @@ describe('DatetimePopup.vue', function () {
     })
 
     it('should pass min and max time to time picker when date are equals', function (done) {
-      const minDatetime = LuxonDatetime.fromISO('2018-01-01T12:35:22.000Z')
-      const maxDatetime = LuxonDatetime.fromISO('2018-01-01T20:43:13.000Z')
+      const minDatetime = LuxonDatetime.fromISO('2018-01-01T08:35:22.000Z')
+      const maxDatetime = LuxonDatetime.fromISO('2018-01-01T12:43:13.000Z')
 
       const vm = createVM(this,
         `<DatetimePopup :datetime="datetime" type="datetime" :min-datetime="minDatetime" :max-datetime="maxDatetime"></DatetimePopup>`,
@@ -333,7 +348,7 @@ describe('DatetimePopup.vue', function () {
           components: { DatetimePopup },
           data () {
             return {
-              datetime: LuxonDatetime.fromISO('2018-01-01T17:42:11.000Z'),
+              datetime: LuxonDatetime.fromISO('2018-01-01T09:42:11.000Z'),
               minDatetime: minDatetime,
               maxDatetime: maxDatetime
             }
diff --git a/test/specs/DatetimeTimePicker.spec.js b/test/specs/DatetimeTimePicker.spec.js
index b1a8c1d..80383eb 100644
--- a/test/specs/DatetimeTimePicker.spec.js
+++ b/test/specs/DatetimeTimePicker.spec.js
@@ -1,4 +1,5 @@
 import { createVM } from '../helpers/utils.js'
+import { DateTime } from 'luxon'
 import DatetimeTimePicker from 'src/DatetimeTimePicker.vue'
 
 describe('DatetimeTimePicker.vue', function () {
@@ -74,6 +75,43 @@ describe('DatetimeTimePicker.vue', function () {
       expect(minutes).eql(['00', '15', '30', '45'])
     })
 
+    it('should disable time given datetime disabled checker', function () {
+      const vm = createVM(this,
+        `<DatetimeTimePicker :hour="8" :minute="52" :datetime-disabled-checker="datetimeDisabledChecker"></DatetimeTimePicker>`,
+        {
+          components: { DatetimeTimePicker },
+          data () {
+            return {
+              datetimeDisabledChecker: (year, month, day, hour, minute) => {
+                return DateTime.fromObject({ year, month, day, hour, minute, timezone: 'UTC' }) < DateTime.fromObject({ year, month, day, hour: 8, minute: minute != null ? 32 : 0, timezone: 'UTC' })
+              }
+            }
+          }
+        })
+
+      const hours = vm.$$('.vdatetime-time-picker__list--hours .vdatetime-time-picker__item')
+
+      hours.forEach(hour => {
+        const hourNumber = parseInt(hour.textContent)
+        if (hourNumber < 8) {
+          expect(hour).to.have.class('vdatetime-time-picker__item--disabled')
+        } else {
+          expect(hour).to.have.not.class('vdatetime-time-picker__item--disabled')
+        }
+      })
+
+      const minutes = vm.$$('.vdatetime-time-picker__list--minutes .vdatetime-time-picker__item')
+
+      minutes.forEach(minute => {
+        const minuteNumber = parseInt(minute.textContent)
+        if (minuteNumber < 32) {
+          expect(minute).to.have.class('vdatetime-time-picker__item--disabled')
+        } else {
+          expect(minute).to.have.not.class('vdatetime-time-picker__item--disabled')
+        }
+      })
+    })
+
     it('should disable time before min time', function () {
       const vm = createVM(this,
         `<DatetimeTimePicker :hour="8" :minute="52" min-time="08:32"></DatetimeTimePicker>`,
@@ -257,6 +295,35 @@ describe('DatetimeTimePicker.vue', function () {
       expect(vm.spy).to.have.not.been.called
     })
 
+    it('should disable am/pm when no selectable options', function () {
+      const vm = createVM(this,
+        `<DatetimeTimePicker :hour="3" :minute="45" max-time="03:15" use12-hour></DatetimeTimePicker>`,
+        {
+          components: { DatetimeTimePicker }
+        })
+
+      const am = vm.$$('.vdatetime-time-picker__list--suffix .vdatetime-time-picker__item')[0]
+      const pm = vm.$$('.vdatetime-time-picker__list--suffix .vdatetime-time-picker__item')[1]
+
+      expect(am).not.to.have.class('vdatetime-time-picker__item--disabled')
+      expect(pm).to.have.class('vdatetime-time-picker__item--disabled')
+    })
+
+    it('should not emit change event on select a disabled am/pm', function () {
+      const vm = createVM(this,
+        `<DatetimeTimePicker @change="spy" :hour="3" :minute="45" min-time="13:15" use12-hour></DatetimeTimePicker>`,
+        {
+          components: { DatetimeTimePicker },
+          data () {
+            return {
+              spy: sinon.spy()
+            }
+          }
+        })
+      vm.$$('.vdatetime-time-picker__list--suffix .vdatetime-time-picker__item')[0].click()
+      expect(vm.spy).to.have.not.been.called
+    })
+
     it('should emit change event on suffix change am -> pm', function () {
       const vm = createVM(this,
         `<DatetimeTimePicker @change="onChange" :hour="3" :minute="45" use12-hour></DatetimeTimePicker>`,
@@ -277,6 +344,7 @@ describe('DatetimeTimePicker.vue', function () {
         })
 
       vm.$$('.vdatetime-time-picker__list--suffix .vdatetime-time-picker__item')[1].click()
+
       expect(vm.hour).to.be.equal(15)
       expect(vm.suffixTouched).to.be.equal(true)
     })
diff --git a/test/specs/DatetimeYearPicker.spec.js b/test/specs/DatetimeYearPicker.spec.js
index ff0e1be..68003b4 100644
--- a/test/specs/DatetimeYearPicker.spec.js
+++ b/test/specs/DatetimeYearPicker.spec.js
@@ -23,7 +23,7 @@ describe('DatetimeYearPicker.vue', function () {
       expect(selected).eql(2020)
     })
 
-    it('should disable years', function () {
+    it('should disable years given min max', function () {
       const vm = createVM(this,
         `<DatetimeYearPicker :min-date="minDate" :max-date="maxDate" :year="2018"></DatetimeYearPicker>`,
         {
@@ -48,6 +48,33 @@ describe('DatetimeYearPicker.vue', function () {
         }
       })
     })
+
+    it('should disable years given datetime disabled checker', function () {
+      const vm = createVM(this,
+        `<DatetimeYearPicker :datetime-disabled-checker="datetimeDisabledChecker" :year="2018"></DatetimeYearPicker>`,
+        {
+          components: { DatetimeYearPicker },
+          data () {
+            return {
+              datetimeDisabledChecker: (year) => {
+                return year !== 2018
+              }
+            }
+          }
+        })
+
+      const years = vm.$$('.vdatetime-year-picker__list .vdatetime-year-picker__item')
+
+      years.forEach(year => {
+        const yearNumber = parseInt(year.textContent)
+
+        if (yearNumber === 2018) {
+          expect(year).to.have.not.class('vdatetime-year-picker__item--disabled')
+        } else {
+          expect(year).to.have.class('vdatetime-year-picker__item--disabled')
+        }
+      })
+    })
   })
 
   describe('events', function () {

From 36fbe503d377bb1fb75ca1f36673c524b14bb6fc Mon Sep 17 00:00:00 2001
From: Phyzical <phyzicaly@hotmail.com>
Date: Thu, 7 Jan 2021 14:53:58 +0800
Subject: [PATCH 9/9] feature/date-check-function: Revert minor test changes
 due to timezone

---
 test/specs/DatetimePopup.spec.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/test/specs/DatetimePopup.spec.js b/test/specs/DatetimePopup.spec.js
index b257d7d..bcc79ee 100644
--- a/test/specs/DatetimePopup.spec.js
+++ b/test/specs/DatetimePopup.spec.js
@@ -329,7 +329,7 @@ describe('DatetimePopup.vue', function () {
             return {
               datetime: LuxonDatetime.local(),
               minDatetime: LuxonDatetime.fromISO('2018-01-01T12:35:22.000Z'),
-              maxDatetime: LuxonDatetime.fromISO('2018-01-03T12:43:13.000Z')
+              maxDatetime: LuxonDatetime.fromISO('2018-01-03T20:43:13.000Z')
             }
           }
         })
@@ -339,8 +339,8 @@ describe('DatetimePopup.vue', function () {
     })
 
     it('should pass min and max time to time picker when date are equals', function (done) {
-      const minDatetime = LuxonDatetime.fromISO('2018-01-01T08:35:22.000Z')
-      const maxDatetime = LuxonDatetime.fromISO('2018-01-01T12:43:13.000Z')
+      const minDatetime = LuxonDatetime.fromISO('2018-01-01T12:35:22.000Z')
+      const maxDatetime = LuxonDatetime.fromISO('2018-01-01T20:43:13.000Z')
 
       const vm = createVM(this,
         `<DatetimePopup :datetime="datetime" type="datetime" :min-datetime="minDatetime" :max-datetime="maxDatetime"></DatetimePopup>`,
@@ -348,7 +348,7 @@ describe('DatetimePopup.vue', function () {
           components: { DatetimePopup },
           data () {
             return {
-              datetime: LuxonDatetime.fromISO('2018-01-01T09:42:11.000Z'),
+              datetime: LuxonDatetime.fromISO('2018-01-01T17:42:11.000Z'),
               minDatetime: minDatetime,
               maxDatetime: maxDatetime
             }