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..af49735 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -115,6 +115,7 @@
Complete demo
:minute-step="15"
:min-datetime="minDatetime"
:max-datetime="maxDatetime"
+ :datetime-disabled-checker="datetimeDisabledChecker"
:week-start="7"
use12-hour
auto
@@ -139,6 +140,7 @@ Complete demo
: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()
}
}
})
-
diff --git a/src/Datetime.vue b/src/Datetime.vue
index a8d9e99..14f7d97 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) => false
+ },
auto: {
type: Boolean,
default: false
diff --git a/src/DatetimeCalendar.vue b/src/DatetimeCalendar.vue
index b34bb40..2956f15 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) => false
+ },
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..1a39609 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) => false
}
},
@@ -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, index)
}))
}
},
diff --git a/src/DatetimePopup.vue b/src/DatetimePopup.vue
index 5f62913..be59583 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">
@@ -85,6 +90,10 @@ export default {
}
}
},
+ datetimeDisabledChecker: {
+ type: Function,
+ default: (year, month, day, hour, minute, second) => false
+ },
type: {
type: String,
default: 'date'
diff --git a/src/DatetimeTimePicker.vue b/src/DatetimeTimePicker.vue
index cc9775f..709852c 100644
--- a/src/DatetimeTimePicker.vue
+++ b/src/DatetimeTimePicker.vue
@@ -1,20 +1,30 @@
-
{{ formatHour(hour.number) }}
+
{{ formatHour(hour.number) }}
-