diff --git a/.gitignore b/.gitignore
index 8807004..c9019a2 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,7 +2,8 @@
 node_modules/
 npm-debug.log
 test/coverage
-dist
 yarn-error.log
 reports
 demo/dist
+.idea
+dist
diff --git a/README.md b/README.md
index 7505e2a..cf51bc5 100644
--- a/README.md
+++ b/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)
 
diff --git a/demo/index.html b/demo/index.html
index 8876b66..67f393c 100644
--- a/demo/index.html
+++ b/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">
diff --git a/demo/src/app.js b/demo/src/app.js
index 639a044..15e3375 100644
--- a/demo/src/app.js
+++ b/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()
     }
   }
 })
-
diff --git a/src/Datetime.vue b/src/Datetime.vue
index 20c605e..e64f23d 100644
--- a/src/Datetime.vue
+++ b/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 })
 
diff --git a/src/DatetimeCalendar.vue b/src/DatetimeCalendar.vue
index b34bb40..cca2ebd 100644
--- a/src/DatetimeCalendar.vue
+++ b/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)
       }))
     }
   },
diff --git a/src/DatetimeMonthPicker.vue b/src/DatetimeMonthPicker.vue
index 279f8a0..709ab64 100644
--- a/src/DatetimeMonthPicker.vue
+++ b/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)
       }))
     }
   },
diff --git a/src/DatetimePopup.vue b/src/DatetimePopup.vue
index 5f62913..bfd2b61 100644
--- a/src/DatetimePopup.vue
+++ b/src/DatetimePopup.vue
@@ -9,14 +9,12 @@
       <datetime-year-picker
           v-if="step === 'year'"
           @change="onChangeYear"
-          :min-date="minDatetime"
-          :max-date="maxDatetime"
+          :allowed-date-time-ranges="allowedDateTimeRangesFormatted"
           :year="year"></datetime-year-picker>
       <datetime-month-picker
           v-if="step === 'month'"
           @change="onChangeMonth"
-          :min-date="minDatetime"
-          :max-date="maxDatetime"
+          :allowed-date-time-ranges="allowedDateTimeRangesFormatted"
           :year="year"
           :month="month"></datetime-month-picker>
       <datetime-calendar
@@ -25,8 +23,7 @@
           :year="year"
           :month="month"
           :day="day"
-          :min-date="minDatetime"
-          :max-date="maxDatetime"
+          :allowed-date-time-ranges="allowedDateTimeRangesFormatted"
           :week-start="weekStart"
       ></datetime-calendar>
       <datetime-time-picker
@@ -37,8 +34,8 @@
           :use12-hour="use12Hour"
           :hour-step="hourStep"
           :minute-step="minuteStep"
-          :min-time="minTime"
-          :max-time="maxTime"></datetime-time-picker>
+          :current-date-time="newDatetime"
+          :allowed-date-time-ranges="allowedDateTimeRangesFormatted"></datetime-time-picker>
     </div>
     <div class="vdatetime-popup__actions">
       <div class="vdatetime-popup__actions__button vdatetime-popup__actions__button--cancel" @click="cancel">
@@ -53,7 +50,7 @@
 
 <script>
 import { DateTime } from 'luxon'
-import { createFlowManager, createFlowManagerFromType } from './util'
+import { createFlowManager, createFlowManagerFromType, getAllowedDateTimeRanges } from './util'
 import DatetimeCalendar from './DatetimeCalendar'
 import DatetimeTimePicker from './DatetimeTimePicker'
 import DatetimeYearPicker from './DatetimeYearPicker'
@@ -101,6 +98,10 @@ export default {
       type: Number,
       default: 1
     },
+    allowedDateTimeRanges: {
+      type: Array,
+      default: () => []
+    },
     minDatetime: {
       type: DateTime,
       default: null
@@ -168,24 +169,10 @@ export default {
         day: 'numeric'
       })
     },
-    minTime () {
-      return (
-        this.minDatetime &&
-        this.minDatetime.year === this.year &&
-        this.minDatetime.month === this.month &&
-        this.minDatetime.day === this.day
-      ) ? this.minDatetime.toFormat('HH:mm') : null
-    },
-    maxTime () {
-      return (
-        this.maxDatetime &&
-        this.maxDatetime.year === this.year &&
-        this.maxDatetime.month === this.month &&
-        this.maxDatetime.day === this.day
-      ) ? this.maxDatetime.toFormat('HH:mm') : null
+    allowedDateTimeRangesFormatted () {
+      return getAllowedDateTimeRanges(this.allowedDateTimeRanges, this.minDatetime, this.maxDatetime)
     }
   },
-
   methods: {
     nextStep () {
       this.step = this.flowManager.next(this.step)
diff --git a/src/DatetimeTimePicker.vue b/src/DatetimeTimePicker.vue
index cc9775f..ac93390 100644
--- a/src/DatetimeTimePicker.vue
+++ b/src/DatetimeTimePicker.vue
@@ -1,20 +1,50 @@
 <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"
+        :key="`hour-${hour}`"
+        @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>
+      <div
+        class="vdatetime-time-picker__item"
+        v-for="minute in minutes"
+        :key="`hour-${minute}`"
+        @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 {
+  getAllowedDateTimeRanges,
+  hourIsDisabled,
+  hours,
+  minuteIsDisabled,
+  minutes,
+  pad,
+  selectionIsDisabled
+} from './util'
+import { DateTime } from 'luxon'
 
 export default {
   props: {
@@ -38,6 +68,14 @@ export default {
       type: Number,
       default: 1
     },
+    currentDateTime: {
+      type: DateTime,
+      default: () => DateTime.utc()
+    },
+    allowedDateTimeRanges: {
+      type: Array,
+      default: () => []
+    },
     minTime: {
       type: String,
       default: null
@@ -49,41 +87,72 @@ 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')
+          }
+        ]
+        : []
+    },
+    displayedHours () {
+      return this.hours.filter(hour => hour.display)
+    },
     hours () {
-      return hours(this.hourStep).filter(hour => {
-        if (!this.use12Hour) {
-          return true
-        } else {
-          if (this.hour < 12) {
-            return hour < 12
-          } else {
-            return hour >= 12
+      return hours(this.hourStep)
+        .map((hour) => {
+          let isVisible = true
+          if (this.use12Hour) {
+            if (this.hour < 12) {
+              isVisible = hour < 12
+            } else {
+              isVisible = hour >= 12
+            }
           }
-        }
-      }).map(hour => ({
-        number: pad(hour),
-        selected: hour === this.hour,
-        disabled: timeComponentIsDisabled(this.minHour, this.maxHour, hour)
-      }))
+          return {
+            number: pad(hour),
+            display: isVisible,
+            selected: hour === this.hour,
+            disabled: hourIsDisabled(
+              this.allowedDateTimeRangesFormatted,
+              this.currentDateTime,
+              hour
+            )
+          }
+        })
     },
     minutes () {
-      return minutes(this.minuteStep).map(minute => ({
+      return minutes(this.minuteStep).map((minute) => ({
         number: pad(minute),
         selected: minute === this.minute,
-        disabled: timeComponentIsDisabled(this.minMinute, this.maxMinute, minute)
+        disabled: minuteIsDisabled(
+          this.allowedDateTimeRangesFormatted,
+          this.currentDateTime,
+          this.hour,
+          minute
+        )
       }))
     },
-    minHour () {
-      return this.minTime ? parseInt(this.minTime.split(':')[0]) : null
-    },
-    minMinute () {
-      return this.minTime && this.minHour === this.hour ? parseInt(this.minTime.split(':')[1]) : null
+    minTimeFormatted () {
+      return this.minTime ? DateTime.fromISO(this.minTime) : this.minTime
     },
-    maxHour () {
-      return this.maxTime ? parseInt(this.maxTime.split(':')[0]) : null
+    maxTimeFormatted () {
+      return this.maxTime ? DateTime.fromISO(this.maxTime) : this.maxTime
     },
-    maxMinute () {
-      return this.maxTime && this.maxHour === this.hour ? parseInt(this.maxTime.split(':')[1]) : null
+    allowedDateTimeRangesFormatted () {
+      return getAllowedDateTimeRanges(
+        this.allowedDateTimeRanges,
+        this.minTimeFormatted,
+        this.maxTimeFormatted
+      )
     }
   },
 
@@ -102,15 +171,24 @@ export default {
 
       this.$emit('change', { minute: parseInt(minute.number) })
     },
-    selectSuffix (suffix) {
-      if (suffix === 'am') {
+    selectSuffix (selection) {
+      if (selection.disabled) {
+        return
+      }
+      if (selection.id === 'am') {
         if (this.hour >= 12) {
-          this.$emit('change', { hour: parseInt(this.hour - 12), suffixTouched: true })
+          this.$emit('change', {
+            hour: parseInt(this.hour - 12),
+            suffixTouched: true
+          })
         }
       }
-      if (suffix === 'pm') {
+      if (selection.id === 'pm') {
         if (this.hour < 12) {
-          this.$emit('change', { hour: parseInt(this.hour + 12), suffixTouched: true })
+          this.$emit('change', {
+            hour: parseInt(this.hour + 12),
+            suffixTouched: true
+          })
         }
       }
     },
@@ -130,10 +208,22 @@ export default {
   },
 
   mounted () {
-    const selectedHour = this.$refs.hourList.querySelector('.vdatetime-time-picker__item--selected')
-    const selectedMinute = this.$refs.minuteList.querySelector('.vdatetime-time-picker__item--selected')
-    this.$refs.hourList.scrollTop = selectedHour ? selectedHour.offsetTop - 250 : 0
-    this.$refs.minuteList.scrollTop = selectedMinute ? selectedMinute.offsetTop - 250 : 0
+    const hourListRef = this.$refs.hourList
+    const minuteListRef = this.$refs.minuteList
+    if (hourListRef) {
+      const selectedHour = hourListRef
+        ? hourListRef.querySelector('.vdatetime-time-picker__item--selected')
+        : null
+      hourListRef.scrollTop = selectedHour ? selectedHour.offsetTop - 250 : 0
+    }
+    if (minuteListRef) {
+      const selectedMinute = minuteListRef
+        ? minuteListRef.querySelector('.vdatetime-time-picker__item--selected')
+        : null
+      minuteListRef.scrollTop = selectedMinute
+        ? selectedMinute.offsetTop - 250
+        : 0
+    }
   }
 }
 </script>
@@ -143,7 +233,7 @@ export default {
   box-sizing: border-box;
 
   &::after {
-    content: '';
+    content: "";
     display: table;
     clear: both;
   }
@@ -182,7 +272,7 @@ export default {
   font-size: 20px;
   text-align: center;
   cursor: pointer;
-  transition: font-size .3s;
+  transition: font-size 0.3s;
 }
 
 .vdatetime-time-picker__item:hover {
diff --git a/src/DatetimeYearPicker.vue b/src/DatetimeYearPicker.vue
index a817543..ee1405e 100644
--- a/src/DatetimeYearPicker.vue
+++ b/src/DatetimeYearPicker.vue
@@ -8,8 +8,8 @@
 </template>
 
 <script>
+import { getAllowedDateTimeRanges, yearIsDisabled, years } from './util'
 import { DateTime } from 'luxon'
-import { yearIsDisabled, years } from './util'
 
 export default {
   props: {
@@ -17,6 +17,10 @@ export default {
       type: Number,
       required: true
     },
+    allowedDateTimeRanges: {
+      type: Array,
+      default: () => []
+    },
     minDate: {
       type: DateTime,
       default: null
@@ -28,11 +32,14 @@ export default {
   },
 
   computed: {
+    allowedDateTimeRangesFormatted () {
+      return getAllowedDateTimeRanges(this.allowedDateTimeRanges, this.minDate, this.maxDate)
+    },
     years () {
       return years(this.year).map(year => ({
         number: year,
         selected: year === this.year,
-        disabled: !year || yearIsDisabled(this.minDate, this.maxDate, year)
+        disabled: !year || yearIsDisabled(this.allowedDateTimeRangesFormatted, year)
       }))
     }
   },
diff --git a/src/util.js b/src/util.js
index be4c261..7a27869 100644
--- a/src/util.js
+++ b/src/util.js
@@ -29,32 +29,71 @@ export function monthDays (year, month, weekStart) {
     )
 }
 
-export function monthDayIsDisabled (minDate, maxDate, year, month, day) {
-  const date = DateTime.fromObject({ year, month, day, zone: 'UTC' })
+function getDateFromDateTime (dateTime, dateModification) {
+  const dateTimeOpts = {
+    zone: 'UTC'
+  }
+  dateModification.map(option => { dateTimeOpts[option] = dateTime.c[option] })
+  return DateTime.fromObject(dateTimeOpts)
+}
 
-  minDate = minDate ? startOfDay(minDate.setZone('UTC', { keepLocalTime: true })) : null
-  maxDate = maxDate ? startOfDay(maxDate.setZone('UTC', { keepLocalTime: true })) : null
+function checkAllowedDateTimeRanges (allowedDateTimeRanges, startCheck, endCheck = null, dateModification = ['year', 'month', 'day']) {
+  endCheck = endCheck || startCheck
+  // UTC all dates for even comparisons
+  startCheck = getDateFromDateTime(startCheck, dateModification)
+  endCheck = getDateFromDateTime(endCheck, dateModification)
 
-  return (minDate && date < minDate) ||
-         (maxDate && date > maxDate)
+  return allowedDateTimeRanges && (allowedDateTimeRanges.length > 0) &&
+    // is the current date being checked within an allowed date range
+    !allowedDateTimeRanges.find(function ([allowedStartDate, allowedEndDate]) {
+      // this is done to strip out extra date info
+      // i.e when comparing start and end days we dont want hours or minutes
+      allowedStartDate = allowedStartDate.c ? getDateFromDateTime(allowedStartDate, dateModification) : allowedStartDate
+      allowedEndDate = allowedEndDate.c ? getDateFromDateTime(allowedEndDate, dateModification) : allowedEndDate
+      // is the current date being checked within an this date range
+
+      return (allowedStartDate && startCheck >= allowedStartDate) && (allowedEndDate && endCheck <= allowedEndDate)
+    })
 }
 
-export function monthIsDisabled (minDate, maxDate, year, month) {
-  return (minDate && minDate > DateTime.utc(year, month, DateTime.utc(year, month).daysInMonth)) ||
-         (maxDate && maxDate < DateTime.utc(year, month, 1))
+export function monthDayIsDisabled (allowedDateTimeRanges, year, month, day) {
+  return checkAllowedDateTimeRanges(allowedDateTimeRanges, DateTime.fromObject({ year, month, day, zone: 'UTC' }))
 }
 
-export function yearIsDisabled (minDate, maxDate, year) {
-  const minYear = minDate ? minDate.year : null
-  const maxYear = maxDate ? maxDate.year : null
+export function monthIsDisabled (allowedDateTimeRanges, year, month) {
+  return checkAllowedDateTimeRanges(
+    allowedDateTimeRanges,
+    DateTime.utc(year, month, DateTime.utc(year, month).daysInMonth),
+    DateTime.utc(year, month, 1)
+  )
+}
 
-  return (minYear && year < minYear) ||
-         (maxYear && year > maxYear)
+export function yearIsDisabled (allowedDateTimeRanges, year) {
+  return checkAllowedDateTimeRanges(allowedDateTimeRanges, DateTime.utc(year))
 }
 
-export function timeComponentIsDisabled (min, max, component) {
-  return (min !== null && component < min) ||
-         (max !== null && component > max)
+export function hourIsDisabled (allowedDateTimeRanges, currentDateTime, hour) {
+  const startCheck = DateTime.fromObject({ year: currentDateTime.c.year, month: currentDateTime.c.month, day: currentDateTime.c.day, hour })
+  const dateTimeModification = ['year', 'month', 'day', 'hour']
+  return checkAllowedDateTimeRanges(allowedDateTimeRanges, startCheck, null, dateTimeModification)
+}
+
+export function minuteIsDisabled (allowedDateTimeRanges, currentDateTime, hour, minute) {
+  const startCheck = DateTime.fromObject({ year: currentDateTime.c.year, month: currentDateTime.c.month, day: currentDateTime.c.day, hour, minute })
+  const dateTimeModification = ['year', 'month', 'day', 'hour', 'minute']
+  return checkAllowedDateTimeRanges(allowedDateTimeRanges, startCheck, null, dateTimeModification)
+}
+
+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 weekdays (weekStart) {
@@ -85,6 +124,25 @@ export function years (current) {
   return Array.apply(null, Array(201)).map((item, index) => current - 100 + index)
 }
 
+export function getAllowedDateTimeRanges (allowedDateTimeRanges, min, max) {
+  if (!allowedDateTimeRanges.length) {
+    const minMaxArray = []
+    // this preserves the existing min-max functionality by assuming its just one set of "allowed ranges"
+    if (min && max) {
+      minMaxArray.push(min)
+      minMaxArray.push(max)
+    } else if (min) {
+      minMaxArray.push(min)
+      minMaxArray.push(DateTime.fromFormat('31-12-3000 23:59:59', 'dd-MM-y hh:mm:ss'))
+    } else if (max) {
+      minMaxArray.push(DateTime.fromFormat('01-01-1972 00:00:00', 'dd-MM-y hh:mm:ss'))
+      minMaxArray.push(max)
+    }
+    minMaxArray.length ? allowedDateTimeRanges.push(minMaxArray) : null
+  }
+  return allowedDateTimeRanges
+}
+
 export function pad (number) {
   return number < 10 ? '0' + number : number
 }
diff --git a/test/specs/Datetime.spec.js b/test/specs/Datetime.spec.js
index 440f926..123bdc7 100644
--- a/test/specs/Datetime.spec.js
+++ b/test/specs/Datetime.spec.js
@@ -246,7 +246,7 @@ describe('Datetime.vue', function () {
       })
     })
 
-    it('should pass min and max datetimes to popup', function (done) {
+    it('should pass min and max datetimes to allowedDateRanges popup', function (done) {
       const vm = createVM(this,
         `<Datetime type="datetime" min-datetime="2018-01-01T12:35:22.000Z" max-datetime="2018-01-03T20:43:13.000Z"></Datetime>`,
         {
@@ -254,10 +254,9 @@ describe('Datetime.vue', function () {
         })
 
       vm.$('.vdatetime-input').click()
-
       vm.$nextTick(() => {
-        expect(vm.$findChild('.vdatetime-popup').minDatetime.toUTC().toISO()).to.be.equal('2018-01-01T12:35:22.000Z')
-        expect(vm.$findChild('.vdatetime-popup').maxDatetime.toUTC().toISO()).to.be.equal('2018-01-03T20:43:13.000Z')
+        expect(vm.$findChild('.vdatetime-popup').allowedDateTimeRanges[0][0].toUTC().toISO()).to.be.equal('2018-01-01T12:35:22.000Z')
+        expect(vm.$findChild('.vdatetime-popup').allowedDateTimeRanges[0][1].toUTC().toISO()).to.be.equal('2018-01-03T20:43:13.000Z')
         done()
       })
     })
@@ -875,6 +874,40 @@ describe('Datetime.vue', function () {
         })
       })
     })
+
+    it('should not close when clicking the overlay', function (done) {
+      const vm = createVM(this,
+        `<Datetime :backdropClick="false"></Datetime>`,
+        {
+          components: { Datetime }
+        })
+
+      vm.$('.vdatetime-input').click()
+
+      vm.$nextTick(() => {
+        vm.$('.vdatetime-overlay').click()
+        vm.$nextTick(() => {
+          expect(vm.$('.vdatetime-overlay')).to.exist
+          expect(vm.$('.vdatetime-popup')).to.exist
+          done()
+        })
+      })
+    })
+
+    it('should not render overlay', function (done) {
+      const vm = createVM(this,
+        `<Datetime :hideBackdrop="true"></Datetime>`,
+        {
+          components: { Datetime }
+        })
+
+      vm.$('.vdatetime-input').click()
+
+      vm.$nextTick(() => {
+        expect(vm.$('.vdatetime-overlay')).to.not.exist
+        done()
+      })
+    })
   })
 
   describe('events', function () {
diff --git a/test/specs/DatetimePopup.spec.js b/test/specs/DatetimePopup.spec.js
index aef33bb..6f966d9 100644
--- a/test/specs/DatetimePopup.spec.js
+++ b/test/specs/DatetimePopup.spec.js
@@ -305,7 +305,7 @@ describe('DatetimePopup.vue', function () {
       })
     })
 
-    it('should pass min and max date to calendar', function () {
+    it('should pass min and max date to calendar', function (done) {
       const vm = createVM(this,
         `<DatetimePopup :datetime="datetime" type="datetime" :min-datetime="minDatetime" :max-datetime="maxDatetime"></DatetimePopup>`,
         {
@@ -318,9 +318,11 @@ describe('DatetimePopup.vue', function () {
             }
           }
         })
-
-      expect(vm.$findChild('.vdatetime-calendar').minDate.toISODate()).to.be.equal('2018-01-01')
-      expect(vm.$findChild('.vdatetime-calendar').maxDate.toISODate()).to.be.equal('2018-01-03')
+      vm.$nextTick(() => {
+        expect(vm.$findChild('.vdatetime-calendar').allowedDateTimeRanges[0][0].toISODate()).to.be.equal('2018-01-01')
+        expect(vm.$findChild('.vdatetime-calendar').allowedDateTimeRanges[0][1].toISODate()).to.be.equal('2018-01-04')
+        done()
+      })
     })
 
     it('should pass min and max time to time picker when date are equals', function (done) {
@@ -343,8 +345,8 @@ describe('DatetimePopup.vue', function () {
       vm.$('.vdatetime-popup__actions__button--confirm').click()
 
       vm.$nextTick(() => {
-        expect(vm.$findChild('.vdatetime-time-picker').minTime).to.be.equal(minDatetime.toFormat('HH:mm'))
-        expect(vm.$findChild('.vdatetime-time-picker').maxTime).to.be.equal(maxDatetime.toFormat('HH:mm'))
+        expect(vm.$findChild('.vdatetime-time-picker').allowedDateTimeRanges[0][0].toFormat('HH:mm')).to.be.equal(minDatetime.toFormat('HH:mm'))
+        expect(vm.$findChild('.vdatetime-time-picker').allowedDateTimeRanges[0][1].toFormat('HH:mm')).to.be.equal(maxDatetime.toFormat('HH:mm'))
         done()
       })
     })
diff --git a/test/specs/DatetimeTimePicker.spec.js b/test/specs/DatetimeTimePicker.spec.js
index b1a8c1d..7e1c964 100644
--- a/test/specs/DatetimeTimePicker.spec.js
+++ b/test/specs/DatetimeTimePicker.spec.js
@@ -85,7 +85,7 @@ describe('DatetimeTimePicker.vue', function () {
 
       hours.forEach(hour => {
         const hourNumber = parseInt(hour.textContent)
-
+        // this is disabling too many
         if (hourNumber < 8) {
           expect(hour).to.have.class('vdatetime-time-picker__item--disabled')
         } else {
@@ -117,7 +117,6 @@ describe('DatetimeTimePicker.vue', function () {
 
       hours.forEach(hour => {
         const hourNumber = parseInt(hour.textContent)
-
         if (hourNumber > 15) {
           expect(hour).to.have.class('vdatetime-time-picker__item--disabled')
         } else {