Adding Allowed Date Ranges

.gitignore

@@ -2,7 +2,8 @@
 node_modules/
 npm-debug.log
 test/coverage
-dist
 yarn-error.log
 reports
 demo/dist
+.idea
+dist

README.md

@@ -113,12 +113,15 @@ phrases | `Object` | `{ok: 'Ok', cancel: 'Cancel'}` | Phrases.
 use12-hour | `Boolean` | `false` | Display 12 hour (AM/PM) mode
 hour-step | `Number` | `1` | Hour step.
 minute-step | `Number` | `1` | Minute step.
-min-datetime | ISO 8601 `String` | `null` | Minimum datetime.
-max-datetime | ISO 8601 `String` | `null` | Maximum datetime.
+min-datetime | ISO 8601 `String` | `null` | Minimum datetime. NOTE: Has no effect when allowed-date-time-ranges is provided
+max-datetime | ISO 8601 `String` | `null` | Maximum datetime. NOTE: Has no effect when allowed-date-time-ranges is provided
 auto | `Boolean` | `false` | Auto continue/close on select.
 week-start | `Number` | auto from locale if _weekstart_ is available or `1` | First day of the week. 1 is Monday and 7 is Sunday.
 flow | `Array` | Depends of *type* | Customize steps flow, steps available: time, date, month, year. Example: ['year', 'date', 'time']
 title | `String` | `''` | Popup title.
+hide-backdrop | `Boolean` | `false` | Show/Hide backdrop.
+backdrop-click | `Boolean` | `true` | Enable/Disable backdrop click to cancel (outside click).
+allowed-date-time-ranges | `Array` of `Array`'s of 2 `Datetime` | `[]`                                                                      | Array of Arrays containing Allowed DateTime ranges i.e `[[DateTime.fromISO('2017-05-15T17:36'),DateTime.fromISO('2017-05-17T17:36')]]` (Allowed datetime ranges are the only selectable ranges)
 
 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)
 

demo/index.html

@@ -97,12 +97,11 @@ <h2>Macro tokens</h2>
       </div>
   </div>
 
-  <h2>Complete demo</h2>
+    <h2>Complete demo min-max</h2>
 
-  <div class="example">
-    <div class="example-inputs">
-      <datetime
-          type="datetime"
+    <div class="example">
+      <div class="example-inputs">
+        <datetime type="datetime"
           v-model="datetimeEmpty"
           placeholder="Select date"
           class="my-wrapper-class"
@@ -117,17 +116,17 @@ <h2>Complete demo</h2>
           :max-datetime="maxDatetime"
           :week-start="7"
           use12-hour
-          auto
-      ></datetime>
-
-      <div class="values">
-        <p>
-          <strong>Value:</strong> {{ datetimeEmpty }}
-        </p>
+          auto>
+        </datetime>
+
+        <div class="values">
+          <p>
+            <strong>Value:</strong> {{ datetimeEmpty }}
+          </p>
+        </div>
       </div>
-    </div>
-    <div class="example-code">
-      <pre><code>&#x3C;datetime
+      <div class="example-code">
+        <pre><code>&#x3C;datetime
   type=&#x22;datetime&#x22;
   v-model=&#x22;datetimeEmpty&#x22;
   input-class=&#x22;my-class&#x22;
@@ -143,19 +142,48 @@ <h2>Complete demo</h2>
   use12-hour
   auto
   &#x3E;&#x3C;/datetime&#x3E;</code></pre>
+      </div>
     </div>
-  </div>
 
-  <h2>Theming</h2>
+    <h2>Complete demo ranges</h2>
 
-  <div class="example">
-    <div class="example-inputs">
-      <datetime type="datetime" v-model="datetimeTheming" class="theme-orange"></datetime>
-
-      <div class="values">
-        <p>
-          <strong>Value:</strong> {{ datetimeTheming }}
-        </p>
+    <div class="example">
+      <div class="example-inputs">
+        <datetime type="datetime"
+          v-model="datetimeEmpty"
+          placeholder="Select date"
+          class="my-wrapper-class"
+          input-class="my-input-class"
+          value-zone="America/New_York"
+          zone="Asia/Shanghai"
+          :format="{ year: 'numeric', month: 'long', day: 'numeric', hour: 'numeric', minute: '2-digit', timeZoneName: 'short' }"
+          :phrases="{ok: 'Continue', cancel: 'Exit'}"
+          :allowed-date-time-ranges="allowedDateTimeRanges"
+          :week-start="7"
+          use12-hour
+          auto>
+        </datetime>
+
+        <div class="values">
+          <p>
+            <strong>Value:</strong> {{ datetimeEmpty }}
+          </p>
+        </div>
+      </div>
+      <div class="example-code">
+        <pre><code>&#x3C;datetime
+  type=&#x22;datetime&#x22;
+  v-model=&#x22;datetimeEmpty&#x22;
+  input-class=&#x22;my-class&#x22;
+  value-zone=&#x22;America/New_York&#x22;
+  zone=&#x22;Asia/Shanghai&#x22;
+  :format=&#x22;{ year: &#x27;numeric&#x27;, month: &#x27;long&#x27;, day: &#x27;numeric&#x27;, hour: &#x27;numeric&#x27;, minute: &#x27;2-digit&#x27;, timeZoneName: &#x27;short&#x27; }&#x22;
+  :phrases=&#x22;{ok: &#x27;Continue&#x27;, cancel: &#x27;Exit&#x27;}&#x22;
+  :allowed-date-time-ranges=&#x22;allowedDateTimeRanges&#x22;
+  :week-start=&#x22;7&#x22;
+  use12-hour
+  auto
+  &#x3E;&#x3C;/datetime&#x3E;</code></pre>
       </div>
     </div>
     <div class="example-code">

demo/src/app.js

@@ -1,5 +1,7 @@
 import Vue from 'vue'
-import { DateTime as LuxonDateTime } from 'luxon'
+import {
+  DateTime as LuxonDateTime
+} from 'luxon'
 import Datetime from '../../dist/vue-datetime'
 import '../../dist/vue-datetime.css'
 import './app.css'
@@ -17,10 +19,32 @@ 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(),
+      allowedDateTimeRanges: [
+        [
+          LuxonDateTime.local().minus({
+            days: 5
+          }),
+          LuxonDateTime.local().minus({
+            days: 2
+          })
+        ],
+        [
+          LuxonDateTime.local().plus({
+            days: 3
+          }),
+          LuxonDateTime.local().plus({
+            days: 5
+          })
+        ]
+      ],
+      minDatetime: LuxonDateTime.local().minus({
+        month: 1,
+        days: 3
+      }).toISO(),
+      maxDatetime: LuxonDateTime.local().plus({
+        days: 3
+      }).toISO(),
       datetimeTheming: LuxonDateTime.local().toISO()
     }
   }
 })
-

src/Datetime.vue

@@ -14,7 +14,7 @@
     <input v-if="hiddenName" type="hidden" :name="hiddenName" :value="value" @input="setValue">
     <slot name="after"></slot>
     <transition-group name="vdatetime-fade" tag="div">
-      <div key="overlay" v-if="isOpen" class="vdatetime-overlay" @click.self="cancel"></div>
+      <div key="overlay" v-if="isOpen && !hideBackdrop" class="vdatetime-overlay" @click.self="clickOutside"></div>
       <datetime-popup
           key="popup"
           v-if="isOpen"
@@ -24,8 +24,7 @@
           :use12-hour="use12Hour"
           :hour-step="hourStep"
           :minute-step="minuteStep"
-          :min-datetime="popupMinDatetime"
-          :max-datetime="popupMaxDatetime"
+          :allowed-date-time-ranges="allowedDateTimeRangesFormatted"
           @confirm="confirm"
           @cancel="cancel"
           :auto="auto"
@@ -46,15 +45,13 @@
 <script>
 import { DateTime } from 'luxon'
 import DatetimePopup from './DatetimePopup'
-import { datetimeFromISO, startOfDay, weekStart } from './util'
+import { datetimeFromISO, getAllowedDateTimeRanges, startOfDay, weekStart } from './util'
 
 export default {
   components: {
     DatetimePopup
   },
-
   inheritAttrs: false,
-
   props: {
     value: {
       type: String
@@ -119,6 +116,10 @@ export default {
       type: String,
       default: null
     },
+    allowedDateTimeRanges: {
+      type: Array,
+      default: () => []
+    },
     auto: {
       type: Boolean,
       default: false
@@ -134,6 +135,14 @@ export default {
     },
     title: {
       type: String
+    },
+    hideBackdrop: {
+      type: Boolean,
+      default: false
+    },
+    backdropClick: {
+      type: Boolean,
+      default: true
     }
   },
 
@@ -182,6 +191,9 @@ export default {
     popupDate () {
       return this.datetime ? this.datetime.setZone(this.zone) : this.newPopupDatetime()
     },
+    allowedDateTimeRangesFormatted () {
+      return getAllowedDateTimeRanges(this.allowedDateTimeRanges, this.popupMinDatetime, this.popupMaxDatetime)
+    },
     popupMinDatetime () {
       return this.minDatetime ? DateTime.fromISO(this.minDatetime).setZone(this.zone) : null
     },
@@ -217,6 +229,9 @@ export default {
     cancel () {
       this.close()
     },
+    clickOutside () {
+      if (this.backdropClick === true) { this.cancel() }
+    },
     newPopupDatetime () {
       let datetime = DateTime.utc().setZone(this.zone).set({ seconds: 0, milliseconds: 0 })
 

src/DatetimeCalendar.vue

@@ -24,7 +24,7 @@
 
 <script>
 import { DateTime } from 'luxon'
-import { monthDayIsDisabled, monthDays, months, weekdays } from './util'
+import { getAllowedDateTimeRanges, monthDayIsDisabled, monthDays, months, weekdays } from './util'
 
 export default {
   props: {
@@ -51,6 +51,10 @@ export default {
       type: DateTime,
       default: null
     },
+    allowedDateTimeRanges: {
+      type: Array,
+      default: () => []
+    },
     weekStart: {
       type: Number,
       default: 1
@@ -66,6 +70,9 @@ export default {
   },
 
   computed: {
+    allowedDateTimeRangesFormatted () {
+      return getAllowedDateTimeRanges(this.allowedDateTimeRanges, this.minDate, this.maxDate)
+    },
     newYear () {
       return this.newDate.year
     },
@@ -79,7 +86,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.allowedDateTimeRangesFormatted, this.newYear, this.newMonth, day)
       }))
     }
   },

src/DatetimeMonthPicker.vue

@@ -8,8 +8,8 @@
 </template>
 
 <script>
+import { getAllowedDateTimeRanges, monthIsDisabled, months } from './util'
 import { DateTime } from 'luxon'
-import { monthIsDisabled, months } from './util'
 
 export default {
   props: {
@@ -21,6 +21,10 @@ export default {
       type: Number,
       required: true
     },
+    allowedDateTimeRanges: {
+      type: Array,
+      default: () => []
+    },
     minDate: {
       type: DateTime,
       default: null
@@ -32,12 +36,15 @@ export default {
   },
 
   computed: {
+    allowedDateTimeRangesFormatted () {
+      return getAllowedDateTimeRanges(this.allowedDateTimeRanges, this.minDate, this.maxDate)
+    },
     months () {
       return months(this.month).map((month, index) => ({
         number: ++index,
         label: month,
         selected: index === this.month,
-        disabled: !index || monthIsDisabled(this.minDate, this.maxDate, this.year, index)
+        disabled: !index || monthIsDisabled(this.allowedDateTimeRangesFormatted, this.year, index)
       }))
     }
   },