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 @@