From 425c5dfc16a9a34c0fdfef0179bfd1c0c14beeab Mon Sep 17 00:00:00 2001
From: Phoenix Wong <phoenixyfwong@gmail.com>
Date: Tue, 27 Aug 2019 00:11:10 +0800
Subject: [PATCH] New `minute-range` and `second-range` support.

Companioned with `hide-disabled-minutes`, `hide-disabled-seconds`, and an overall `hide-disabled-items` helper.
---
 README.md                           |  73 ++++++--
 demo/src/components/SampleBlock.vue |  24 ++-
 demo/src/components/Samples.vue     | 110 ++++++++---
 src/vue-timepicker.vue              | 271 ++++++++++++++++++++--------
 4 files changed, 359 insertions(+), 119 deletions(-)

diff --git a/README.md b/README.md
index 1c13833..4662141 100644
--- a/README.md
+++ b/README.md
@@ -140,7 +140,7 @@ Section    | Token | Output
 
 > If not set, the `format` string is default to "HH:mm"
 
-### Customized Picker interval
+### Customized Picker Interval
 
 ```html
 <!-- Show minute picker's value in the form of 0, 5, 10, ... 55, 60 -->
@@ -393,13 +393,47 @@ Sometimes you may want to limit hours picker to a specific range. The `hour-rang
 <!-- >> Equals to :hour-range="['7a', '9a', '11a', '1p', '3p', '4p', '5p', '7p']" -->
 ```
 
-### Hide Disabled Hour Ranges
+### Set Minute and Second Range
+
+Similar to `hour-range`, you can determine values in the minutes and seconds dropdown by using `minute-range` and `second-range`.
+
+```html
+<!-- Minute range -->
+<vue-timepicker :minute-range="[0, 6, [10, 30], 42, 50]"></vue-timepicker>
+<!-- >> Active Items: 00, 06, 10, 11, 12, 13, ..., 27, 28, 29, 30, 42, 50 -->
+
+<!-- Second range -->
+<vue-timepicker format="H:m:s" :second-range="[0, 6, [10, 30], 42, 50]"></vue-timepicker>
+<!-- >> Active Items: 0, 6, 10, 11, 12, 13, ..., 27, 28, 29, 30, 42, 50 -->
+```
+
+When implemented together with `minute-interval` and `second-interval`, the customized intervals take the priority.
+
+```html
+<!-- Minute range + 5-minute interval -->
+<vue-timepicker :minute-range="[0, 6, [10, 30], 42, 50]" :minute-interval="5"></vue-timepicker>
+<!-- >> Active Items: 00, 10, 15, 20, 25, 30, 50 -->
+
+<!-- Second range + 10-second interval-->
+<vue-timepicker format="H:m:s" :second-range="[0, 6, [10, 30], 42, 50]" :second-interval="10"></vue-timepicker>
+<!-- >> Active Items: 0, 10, 20, 30, 50 -->
+```
+
+### Hide Disabled Items
+
+There're four kinds of helper properties to let you hide the values excluded by `hour-range`, `minute-range`, and `second-range`.
+
+- **hide-disabled-items**: Hide **all** disabled items - hour, minute, and seconds.
+- **hide-disabled-hours**: Hide disabled **hour** values only.
+- **hide-disabled-minutes**: Hide disabled **minute** values only.
+- **hide-disabled-seconds**: Hide disabled **second** values only.
 
 ```html
+<!-- `hide-disabled-hours` sample -->
 <vue-timepicker :hour-range="[5, [8, 12], [14, 17], 19]" hide-disabled-hours></vue-timepicker>
 ```
 
-It's a pair with the above `hour-range` parameter. In this sample, the hour picker hides the invalid hours (_0, 1, 2, 3, 4, 6, 7, 13, 18, 20, 21, 22, 23_) and display the valid hours (_5, 8, 9, ..._) only.
+Here we take the `hide-disabled-hours` as an example. It's a pair with the `hour-range` parameter. In this case, the hour picker hides the invalid hours (_0, 1, 2, 3, 4, 6, 7, 13, 18, 20, 21, 22, 23_) and display the valid hours (_5, 8, 9, ..._) only.
 
 ### Enable Debug Mode
 
@@ -431,24 +465,29 @@ Let's create a "bug" as an example --
 Then, in the console window, you should see a debug log saying:
 
 ```console
-DEBUG: The input string in 'v-model' does NOT match the 'format' pattern
+DEBUG: The input string in "v-model" does NOT match the "format" pattern
 format: h:mm:ss A
 v-model: e:mm:05 A
 ```
 
-## Main Props API
-
-Prop                    | Type               | Required | Default Value
------------------------ | ------------------ | -------- | -------------
-**v-model**             | _Object_, _String_ | no       | _undefined_
-**format**              | _String_           | no       | "HH:mm"
-**minute-interval**     | _Number_           | no       | _undefined_
-**second-interval**     | _Number_           | no       | _undefined_
-**hide-clear-button**   | _Boolean_          | no       | false
-**disabled**            | _Boolean_          | no       | false
-**hour-range**          | _Array_            | no       | _undefined_
-**hide-disabled-hours** | _Boolean_          | no       | false
-**debug-mode**          | _Boolean_          | no       | false
+## Main Props API Overview
+
+Prop                      | Type               | Required | Default Value
+------------------------- | ------------------ | -------- | -------------
+**v-model**               | _Object_, _String_ | no       | _undefined_
+**format**                | _String_           | no       | "HH:mm"
+**minute-interval**       | _Number_           | no       | _undefined_
+**second-interval**       | _Number_           | no       | _undefined_
+**hide-clear-button**     | _Boolean_          | no       | false
+**disabled**              | _Boolean_          | no       | false
+**hour-range**            | _Array_            | no       | _undefined_
+**minute-range**          | _Array_            | no       | _undefined_
+**second-range**          | _Array_            | no       | _undefined_
+**hide-disabled-hours**   | _Boolean_          | no       | false
+**hide-disabled-minutes** | _Boolean_          | no       | false
+**hide-disabled-seconds** | _Boolean_          | no       | false
+**hide-disabled-items**   | _Boolean_          | no       | false
+**debug-mode**            | _Boolean_          | no       | false
 
 
 ## Input Props API
diff --git a/demo/src/components/SampleBlock.vue b/demo/src/components/SampleBlock.vue
index 9e6b95e..4b0d57c 100644
--- a/demo/src/components/SampleBlock.vue
+++ b/demo/src/components/SampleBlock.vue
@@ -1,13 +1,24 @@
 <script>
 export default {
-  name: 'SampleBlock'
+  name: 'SampleBlock',
+  props: {
+    id: { type: String }
+  },
+  computed: {
+    blockHerf () {
+      if (this.id && this.id.length) {
+        return `#${this.id}`
+      }
+      return null
+    }
+  }
 }
 </script>
 
 <template lang="pug">
-.sample-block
+.sample-block(:id="id")
   h3.title
-    a.anchor #
+    a.anchor(:href="blockHerf") #
     slot(name="title")
   .description
     slot(name="description")
@@ -42,4 +53,11 @@ export default {
     display: inline-block
     margin-left: 1em
     font-size: 0.9em
+  
+  ul
+    margin: 0 0 1em 0
+    padding: 0 0 0 1.2em
+    li
+      list-style: circle
+      line-height: 150%
 </style>
diff --git a/demo/src/components/Samples.vue b/demo/src/components/Samples.vue
index 54e0b5b..0ad8f62 100644
--- a/demo/src/components/Samples.vue
+++ b/demo/src/components/Samples.vue
@@ -44,7 +44,8 @@ export default {
         { title: 'v-model with String Value', anchor: 'vModelWithString' },
         { title: 'Work with v-for', anchor: 'vForSample' },
         { title: 'Hour Range', anchor: 'hourRange' },
-        { title: 'Hide Disabled Hours', anchor: 'hideDisabledHours' },
+        { title: 'Minute and Second Range', anchor: 'minuteAndSecondRange' },
+        { title: 'Hide Disabled Items', anchor: 'hideDisabledItems' },
         { title: 'Hide Clear Button', anchor: 'hideClearButton' },
         { title: 'Disable Picker', anchor: 'disablePicker' },
         { title: 'The @change Event', anchor: 'onChangeSample' },
@@ -276,7 +277,7 @@ section#mostlyUsedSamples
   //- Hour Range
   sample-block#hourRange
     template(v-slot:title) Hour Range
-    p(slot="description") To define hour values you want and disable the rest
+    p(slot="description") Define the hour values you want and disable the rest
     template(v-slot:codes)
       highlight-code(lang="html" data-title="HTML")
         | &lt;!-- Hour Range Sample 1 --&gt;
@@ -294,27 +295,88 @@ section#mostlyUsedSamples
       p
         vue-timepicker(:hour-range="['7a', '9a', '11a', '1p', ['3p', '5p'], '7p']" format="hh:mm a")
 
-  //- Hide Disabled Hours
-  sample-block#hideDisabledHours
-    template(v-slot:title) Hide Disabled Hours
-    p(slot="description")
-      | Paired with
-      code hour-range
-      | , help hiding those disabled values
+  //- Minute Range
+  sample-block#minuteAndSecondRange
+    template(v-slot:title) Minute and Second Range
+    template(v-slot:description)
+      p Similar to Hour Range, you can set available minute/second values base on your needs.
     template(v-slot:codes)
       highlight-code(lang="html" data-title="HTML")
-        | &lt;!-- Hour Range Sample 1 with `hide-disabled-hours` --&gt;
-        | &lt;vue-timepicker hide-disabled-hours :hour-range="[5, [8, 12], [14, 17], 19]"&gt;&lt;/vue-timepicker&gt;
-        | &nbsp;
-        | &lt;!-- Hour Range Sample 2 (12-hour format) with `hide-disabled-hours` --&gt;
-        | &lt;vue-timepicker hide-disabled-hours :hour-range="['7a', '9a', '11a', '1p', ['3p', '5p'], '7p']" format="hh:mm a"&gt;&lt;/vue-timepicker&gt;
+        | &lt;!-- Minute range only --&gt;
+        | &lt;vue-timepicker :minute-range="[0, 6, [10, 30], 42, 50]"&gt;&lt;/vue-timepicker&gt;
+        |
+        | &lt;!-- Minute range + 5-minute interval --&gt;
+        | &lt;vue-timepicker :minute-range="[0, 6, [10, 30], 42, 50]" :minute-interval="5"&gt;&lt;/vue-timepicker&gt;
+        |
+        | &lt;!-- Second range only --&gt;
+        | &lt;vue-timepicker format="H:m:s" :second-range="[0, 6, [10, 30], 42, 50]"&gt;&lt;/vue-timepicker&gt;
+        |
+        | &lt;!-- Second range + 10-second interval --&gt;
+        | &lt;vue-timepicker format="H:m:s" :second-range="[0, 6, [10, 30], 42, 50]" :second-interval="10"&gt;&lt;/vue-timepicker&gt;
+        |
+        | &lt;!-- Minute and Second ranges + 10-minute interval + 5-second interval --&gt;
+        | &lt;vue-timepicker format="HH:mm:ss" :minute-range="[0, 6, [10, 30], 42, 50]" :second-range="[0, 6, [10, 30], 42, 50]" :minute-interval="10" :second-interval="5"&gt;&lt;/vue-timepicker&gt;
     template(v-slot:preview)
-      b Hour Range Sample 1 with `hide-disabled-hours`
+      b Minute range only
+      p
+        vue-timepicker(:minute-range="[0, 6, [10, 30], 42, 50]")
+      b Minute range + 5-minute interval
+      p
+        vue-timepicker(:minute-range="[0, 6, [10, 30], 42, 50]" :minute-interval="5")
+      b Second range only
+      p
+        vue-timepicker(format="H:m:s" :second-range="[0, 6, [10, 30], 42, 50]")
+      b Second range + 10-second interval
+      p
+        vue-timepicker(format="H:m:s" :second-range="[0, 6, [10, 30], 42, 50]" :second-interval="10")
+      b Minute and Second ranges + 10-minute interval + 5-second interval
+      p
+        vue-timepicker(format="HH:mm:ss" :minute-range="[0, 6, [10, 30], 42, 50]" :second-range="[0, 6, [10, 30], 42, 50]" :minute-interval="10" :second-interval="5")
+
+  //- Hide Disabled Items
+  sample-block#hideDisabledItems
+    template(v-slot:title) Hide Disabled Items
+    template(v-slot:description)
+      p Here're four kinds of helper properties to let you hide the values excluded by the <code>hour-range</code>, <code>minute-range</code>, and <code>second-range</code>.
+      ul
+        li
+          b hide-disabled-items
+          | : Hide <b>all</b> disabled items - hour, minute, and seconds.
+        li
+          b hide-disabled-hours
+          | : Hide disabled <b>hour</b> valus only.
+        li
+          b hide-disabled-minutes
+          | : Hide disabled <b>minute</b> values only.
+        li
+          b hide-disabled-seconds
+          | : Hide disabled <b>second</b> values only.
+    template(v-slot:codes)
+      highlight-code(lang="html" data-title="HTML")
+        | &lt;!-- hide-disabled-items --&gt;
+        | &lt;vue-timepicker hide-disabled-items format="HH:mm:ss" :hour-range="[[9, 17]]" :minute-range="[0, 10, 15, 30, 50]" :second-range="[5, 15, 25, 45]"&gt;&lt;/vue-timepicker&gt;
+        |
+        | &lt;!-- hide-disabled-hours --&gt;
+        | &lt;vue-timepicker hide-disabled-hours format="HH:mm:ss" :hour-range="[[9, 17]]" :minute-range="[0, 10, 15, 30, 50]" :second-range="[5, 15, 25, 45]"&gt;&lt;/vue-timepicker&gt;
+        |
+        | &lt;!-- hide-disabled-minutes --&gt;
+        | &lt;vue-timepicker hide-disabled-minutes format="HH:mm:ss" :hour-range="[[9, 17]]" :minute-range="[0, 10, 15, 30, 50]" :second-range="[5, 15, 25, 45]"&gt;&lt;/vue-timepicker&gt;
+        |
+        | &lt;!-- hide-disabled-seconds --&gt;
+        | &lt;vue-timepicker hide-disabled-seconds format="HH:mm:ss" :hour-range="[[9, 17]]" :minute-range="[0, 10, 15, 30, 50]" :second-range="[5, 15, 25, 45]"&gt;&lt;/vue-timepicker&gt;
+    template(v-slot:preview)
+      b hide-disabled-items
+      p
+        vue-timepicker(hide-disabled-items format="HH:mm:ss" :hour-range="[[9, 17]]" :minute-range="[0, 10, 15, 30, 50]" :second-range="[5, 15, 25, 45]")
+      b hide-disabled-hours
+      p
+        vue-timepicker(hide-disabled-hours format="HH:mm:ss" :hour-range="[[9, 17]]" :minute-range="[0, 10, 15, 30, 50]" :second-range="[5, 15, 25, 45]")
+      b hide-disabled-minutes
       p
-        vue-timepicker(:hour-range="[5, [8, 12], [14, 17], 19]" hide-disabled-hours)
-      b Hour Range Sample 2 (12-hour format) with `hide-disabled-hours`
+        vue-timepicker(hide-disabled-minutes format="HH:mm:ss" :hour-range="[[9, 17]]" :minute-range="[0, 10, 15, 30, 50]" :second-range="[5, 15, 25, 45]")
+      b hide-disabled-seconds
       p
-        vue-timepicker(:hour-range="['7a', '9a', '11a', '1p', ['3p', '5p'], '7p']" format="hh:mm a" hide-disabled-hours)
+        vue-timepicker(hide-disabled-seconds format="HH:mm:ss" :hour-range="[[9, 17]]" :minute-range="[0, 10, 15, 30, 50]" :second-range="[5, 15, 25, 45]")
 
   //- Hide Clear Button
   sample-block#hideClearButton
@@ -344,12 +406,12 @@ section#mostlyUsedSamples
   sample-block#onChangeSample
     template(v-slot:title)
       | The&nbsp;
-      code @change
+      code change
       | &nbsp;Event
     template(v-slot:description)
-      p A <code>@change</code> event will be triggered every time the user alters timepicker's value.
-      p Unlike the <code>v-model</code>, which only returns data in your predefined format, <code>@change</code> event will return a full package of all supported time tokens.
-      p Started from <code>v0.2.2</code>, a <code>displayTime</code> string value is also included in the return data of <code>@change</code> event.
+      p A <code>change</code> event will be triggered every time the user alters timepicker's value.
+      p Unlike the <code>v-model</code>, which only returns data in your predefined format, <code>change</code> event will return a full package of all supported time tokens.
+      p Started from <code>v0.2.2</code>, a <code>displayTime</code> string value is also included in the return data of <code>change</code> event.
       p Play around with the two pickers below to see their data changes in live.
     template(v-slot:codes)
       highlight-code(lang="html" data-title="HTML")
@@ -387,9 +449,9 @@ section#mostlyUsedSamples
   //- Open And Close Event
   sample-block#openAndClose
     template(v-slot:title)
-      code @open
+      code open
       | &nbsp;and&nbsp;
-      code @close
+      code close
       | &nbsp;event
     p(slot="description")
       | Help identifying current status of the dropdown picker
diff --git a/src/vue-timepicker.vue b/src/vue-timepicker.vue
index 234fd6a..d9cac3a 100644
--- a/src/vue-timepicker.vue
+++ b/src/vue-timepicker.vue
@@ -8,11 +8,15 @@ const CONFIG = {
 
 const DEFAULT_OPTIONS = {
   format: 'HH:mm',
-  hideClearButton: false,
   minuteInterval: 1,
   secondInterval: 1,
   hourRange: null,
-  hideDisabledHours: false
+  minuteRange: null,
+  secondRange: null,
+  hideDisabledHours: false,
+  hideDisabledMinutes: false,
+  hideDisabledSeconds: false,
+  hideDisabledItems: false
 }
 
 export default {
@@ -20,11 +24,19 @@ export default {
   props: {
     value: { type: [ Object, String ] },
     format: { type: String },
-    hideClearButton: { type: Boolean, default: false },
     minuteInterval: { type: [ Number, String ] },
     secondInterval: { type: [ Number, String ] },
+
     hourRange: { type: Array },
+    minuteRange: { type: Array },
+    secondRange: { type: Array },
+
     hideDisabledHours: { type: Boolean, default: false },
+    hideDisabledMinutes: { type: Boolean, default: false },
+    hideDisabledSeconds: { type: Boolean, default: false },
+    hideDisabledItems: { type: Boolean, default: false },
+
+    hideClearButton: { type: Boolean, default: false },
     disabled: { type: Boolean, default: false },
 
     id: { type: String },
@@ -65,10 +77,6 @@ export default {
         options.format = String(this.format)
       }
 
-      if (this.hideClearButton) {
-        options.hideClearButton = true
-      }
-
       if (this.isNumber(this.minuteInterval)) {
         options.minuteInterval = +this.minuteInterval
       }
@@ -109,15 +117,46 @@ export default {
 
       if (this.hourRange && Array.isArray(this.hourRange)) {
         options.hourRange = JSON.parse(JSON.stringify(this.hourRange))
+        if (!this.hourRange.length && this.debugMode) {
+          this.debugLog('The "hour-range" array is empty (length === 0)')
+        }
+      }
+
+      if (this.minuteRange && Array.isArray(this.minuteRange)) {
+        options.minuteRange = JSON.parse(JSON.stringify(this.minuteRange))
+        if (!this.minuteRange.length && this.debugMode) {
+          this.debugLog('The "minute-range" array is empty (length === 0)')
+        }
+      }
+
+      if (this.secondRange && Array.isArray(this.secondRange)) {
+        options.secondRange = JSON.parse(JSON.stringify(this.secondRange))
+        if (!this.secondRange.length && this.debugMode) {
+          this.debugLog('The "second-range" array is empty (length === 0)')
+        }
       }
 
-      if (this.hideDisabledHours) {
+      if (this.hideDisabledItems) {
+        options.hideDisabledItems = true
+      }
+
+      if (this.hideDisabledHours || this.hideDisabledItems) {
         options.hideDisabledHours = true
       }
+      if (this.hideDisabledMinutes || this.hideDisabledItems) {
+        options.hideDisabledMinutes = true
+      }
+      if (this.hideDisabledSeconds || this.hideDisabledItems) {
+        options.hideDisabledSeconds = true
+      }
 
       return options
     },
 
+    useStringValue () {
+      return typeof this.value === 'string'
+    },
+
     formatString () {
       return this.opts.format || DEFAULT_OPTIONS.format
     },
@@ -155,54 +194,50 @@ export default {
     },
 
     hourRangeIn24HrFormat () {
-      if (this.opts.hourRange && this.opts.hourRange.length) {
-        let range = []
-        this.opts.hourRange.forEach((value) => {
-          if (value instanceof Array) {
-            if (value.length > 2 && this.debugMode) {
-              this.debugLog(`Nested array within "hour-range" must contain no more than two items. Only the first two items of ${JSON.stringify(value)} will be taking into account.`)
-            }
+      if (!this.opts.hourRange) { return false }
+      if (!this.opts.hourRange.length) { return [] }
+
+      const range = []
+      this.opts.hourRange.forEach(value => {
+        if (value instanceof Array) {
+          if (value.length > 2 && this.debugMode) {
+            this.debugLog(`Nested array within "hour-range" must contain no more than two items. Only the first two items of ${JSON.stringify(value)} will be taken into account.`)
+          }
 
-            let start = value[0]
-            let end = value[1] || value[0]
+          let start = value[0]
+          let end = value[1] || value[0]
 
-            if (this.is12hRange(start)) {
-              start = this.translate12hRange(start)
-            }
-            if (this.is12hRange(end)) {
-              end = this.translate12hRange(end)
-            }
+          if (this.is12hRange(start)) {
+            start = this.translate12hRange(start)
+          }
+          if (this.is12hRange(end)) {
+            end = this.translate12hRange(end)
+          }
 
-            for (let i = +start; i <= +end; i++) {
-              if (range.indexOf(i) === -1) {
-                range.push(i)
-              }
-            }
-          } else {
-            if (this.is12hRange(value)) {
-              value = this.translate12hRange(value)
-            }
-            if (range.indexOf(value) === -1) {
-              range.push(value)
+          for (let i = +start; i <= +end; i++) {
+            if (i < 0 || i > 24) { continue }
+            if (!range.includes(i)) {
+              range.push(i)
             }
           }
-        })
-        range.sort((l, r) => { return l - r })
-        return range
-      }
-      if (this.opts.hourRange && !this.opts.hourRange.length) {
-        if (this.debugMode) {
-          this.debugLog('The "hour-range" array is empty (length === 0)')
+        } else {
+          if (this.is12hRange(value)) {
+            value = this.translate12hRange(value)
+          }
+          if (value < 0 || value > 24) { return }
+          if (!range.includes(value)) {
+            range.push(value)
+          }
         }
-        return []
-      }
-      return false
+      })
+      range.sort((l, r) => { return l - r })
+      return range
     },
 
     restrictedHourRange () {
-      if (!this.hourRangeIn24HrFormat) {
-        return false
-      }
+      // No restriction
+      if (!this.hourRangeIn24HrFormat) { return false }
+      // 12-Hour
       if (this.baseOn12Hours) {
         const range = this.hourRangeIn24HrFormat.map((value) => {
           if (value === 12) {
@@ -210,10 +245,11 @@ export default {
           } else if (value === 24) {
             return '12a'
           }
-          return value > 12 ? value % 12 + 'p' : value + 'a'
+          return value > 12 ? `${value % 12}p` : `${value}a`
         })
         return range
       }
+      // 24-Hour
       return this.hourRangeIn24HrFormat
     },
 
@@ -222,18 +258,88 @@ export default {
         am: true,
         pm: true
       }
-
       if (this.hourRangeIn24HrFormat && this.hourRangeIn24HrFormat.length) {
         const range = [].concat([], this.hourRangeIn24HrFormat)
         result.am = range.some(this.hasAm)
         result.pm = range.some(this.hasPm)
       }
-
       return result
     },
 
-    useStringValue () {
-      return typeof this.value === 'string'
+    minuteRangeList () {
+      if (!this.opts.minuteRange) { return false }
+      if (!this.opts.minuteRange.length) { return [] }
+      const range = []
+      let formatedValue
+      this.opts.minuteRange.forEach(value => {
+        if (value instanceof Array) {
+          if (value.length > 2 && this.debugMode) {
+            this.debugLog(`Nested array within "minute-range" must contain no more than two items. Only the first two items of ${JSON.stringify(value)} will be taken into account.`)
+          }
+          const start = value[0]
+          const end = value[1] || value[0]
+          for (let i = +start; i <= +end; i++) {
+            if (i < 0 || i > 59) { continue }
+            formatedValue = this.formatValue(this.minuteType, i)
+            if (!range.includes(formatedValue)) {
+              range.push(formatedValue)
+            }
+          }
+        } else {
+          if (value < 0 || value > 59) { return }
+          formatedValue = this.formatValue(this.minuteType, value)
+          if (!range.includes(formatedValue)) {
+            range.push(formatedValue)
+          }
+        }
+      })
+      range.sort((l, r) => { return l - r })
+      // Debug Mode
+      if (this.debugMode) {
+        const validItems = (this.minutes || []).filter(item => range.includes(item))
+        if (!validItems || !validItems.length) {
+          this.debugLog(`The minute list is empty due to the "minute-range" config\nminute-range: ${JSON.stringify(this.minuteRange)}\nminute-interval: ${this.opts.minuteInterval}`)
+        }
+      }
+      return range
+    },
+
+    secondRangeList () {
+      if (!this.opts.secondRange) { return false }
+      if (!this.opts.secondRange.length) { return [] }
+      const range = []
+      let formatedValue
+      this.opts.secondRange.forEach(value => {
+        if (value instanceof Array) {
+          if (value.length > 2 && this.debugMode) {
+            this.debugLog(`Nested array within "second-range" must contain no more than two items. Only the first two items of ${JSON.stringify(value)} will be taken into account.`)
+          }
+          const start = value[0]
+          const end = value[1] || value[0]
+          for (let i = +start; i <= +end; i++) {
+            if (i < 0 || i > 59) { continue }
+            formatedValue = this.formatValue(this.secondType, i)
+            if (!range.includes(formatedValue)) {
+              range.push(formatedValue)
+            }
+          }
+        } else {
+          if (value < 0 || value > 59) { return }
+          formatedValue = this.formatValue(this.secondType, value)
+          if (!range.includes(formatedValue)) {
+            range.push(formatedValue)
+          }
+        }
+      })
+      range.sort((l, r) => { return l - r })
+      // Debug Mode
+      if (this.debugMode) {
+        const validItems = (this.seconds || []).filter(item => range.includes(item))
+        if (!validItems || !validItems.length) {
+          this.debugLog(`The second list is empty due to the "second-range" config\nsecond-range: ${JSON.stringify(this.secondRange)}\nsecond-interval: ${this.opts.secondInterval}`)
+        }
+      }
+      return range
     }
   },
 
@@ -257,7 +363,7 @@ export default {
       this.fillValues()
     },
     disabled (toDisabled) {
-      // Force close dropdown when disabled
+      // Force close the dropdown when disabled
       if (toDisabled && this.showDropdown) {
         this.showDropdown = false
       }
@@ -483,7 +589,7 @@ export default {
         }
       } else {
         if (this.debugMode) {
-          this.debugLog(`The input string in 'v-model' does NOT match the 'format' pattern\nformat: ${this.formatString}\nv-model: ${this.value}`)
+          this.debugLog(`The input string in "v-model" does NOT match the "format" pattern\nformat: ${this.formatString}\nv-model: ${this.value}`)
         }
       }
     },
@@ -668,19 +774,26 @@ export default {
     },
 
     isDisabledHour (value) {
-      if (this.restrictedHourRange) {
-        if (this.baseOn12Hours) {
-          if (!this.apm || !this.apm.length) {
-            return false
-          } else {
-            const token = this.apm.toLowerCase() === 'am' ? 'a' : 'p'
-            return this.restrictedHourRange.indexOf(`${+value}${token}`) === -1
-          }
+      if (!this.restrictedHourRange) { return false }
+      if (this.baseOn12Hours) {
+        if (!this.apm || !this.apm.length) {
+          return false
         } else {
-          return this.restrictedHourRange.indexOf(+value) === -1
+          const token = this.apm.toLowerCase() === 'am' ? 'a' : 'p'
+          return !this.restrictedHourRange.includes(`${+value}${token}`)
         }
       }
-      return false
+      return !this.restrictedHourRange.includes(+value)
+    },
+
+    isDisabledMinute (value) {
+      if (!this.minuteRangeList) { return false }
+      return !this.minuteRangeList.includes(value)
+    },
+
+    isDisabledSecond (value) {
+      if (!this.secondRangeList) { return false }
+      return !this.secondRangeList.includes(value)
     },
 
     forceApmSelection () {
@@ -719,8 +832,10 @@ export default {
         if (this.isDisabledHour(value)) { return }
         this.hour = value
       } else if (type === 'minute') {
+        if (this.isDisabledMinute(value)) { return }
         this.minute = value
       } else if (type === 'second') {
+        if (this.isDisabledSecond(value)) { return }
         this.second = value
       } else if (type === 'apm') {
         if (!this.has[value.toLowerCase()]) { return }
@@ -843,26 +958,32 @@ export default {
           <li v-if="!opts.hideDisabledHours || (opts.hideDisabledHours && !isDisabledHour(hr))"
               :key="hIndex"
               :class="{active: hour === hr}"
-              v-text="hr"
               :disabled="isDisabledHour(hr)"
+              v-text="hr"
               @click="select('hour', hr)"></li>
         </template>
       </ul>
       <ul class="minutes">
         <li class="hint" v-text="minuteType"></li>
-        <li v-for="(m, mIndex) in minutes"
-            :key="mIndex"
-            :class="{active: minute === m}"
-            v-text="m"
-            @click="select('minute', m)"></li>
+        <template v-for="(m, mIndex) in minutes">
+          <li v-if="!opts.hideDisabledMinutes || (opts.hideDisabledMinutes && !isDisabledMinute(m))"
+              :key="mIndex"
+              :class="{active: minute === m}"
+              :disabled="isDisabledMinute(m)"
+              v-text="m"
+              @click="select('minute', m)"></li>
+        </template>
       </ul>
       <ul class="seconds" v-if="secondType">
         <li class="hint" v-text="secondType"></li>
-        <li v-for="(s, sIndex) in seconds"
-            :key="sIndex"
-            :class="{active: second === s}"
-            v-text="s"
-            @click="select('second', s)"></li>
+        <template v-for="(s, sIndex) in seconds">
+          <li  v-if="!opts.hideDisabledSeconds || (opts.hideDisabledSeconds && !isDisabledSecond(s))"
+              :key="sIndex"
+              :class="{active: second === s}"
+              :disabled="isDisabledSecond(s)"
+              v-text="s"
+              @click="select('second', s)"></li>
+        </template>
       </ul>
       <ul class="apms" v-if="apmType">
         <li class="hint" v-text="apmType"></li>