Add ranges of minute feature

src/App.vue

@@ -204,6 +204,8 @@
                 :disabled-hours="demo.options.disabledHours"
                 :enabled-dates="demo.options.enabledDates"
                 :minute-interval="demo.options.minuteInterval"
+                :start-minute="demo.options.startMinute"
+                :end-minute="demo.options.endMinute"
                 :first-day-of-week="demo.options.firstDayOfWeek"
                 :min-date="demo.options.minDate"
                 :max-date="demo.options.maxDate"
@@ -330,7 +332,7 @@
           },
           {
             id: '4',
-            title: 'Time Picker - With small input (input-size="sm") & minute-interval="10"',
+            title: 'Time Picker - With small input (input-size="sm") & minute-interval="8" & start-minute="3" & end-minute="59"',
             description: 'Time selector',
             editOption: false,
             initial: '11:26 am',
@@ -340,7 +342,9 @@
               formatted: 'hh:mm a',
               onlyTime: true,
               color: 'firebrick',
-              minuteInterval: '10',
+              minuteInterval: '8',
+              startMinute: 3,
+              endMinute: 59,
               label: 'Select time',
               inputSize: 'sm',
               id: 'TimePicker',

src/VueCtkDateTimePicker/_subs/PickersContainer/_subs/TimePicker.vue

@@ -65,7 +65,9 @@
     })
   }
   const ArrayMinuteRange = (start, end, twoDigit, step = 1, disabledMinutes) => {
-    const len = Math.floor(end / step) - start
+    step = Math.trunc(step)
+    end = Math.min(end, 59)
+    const len = Math.ceil((end - start + 1) / step)
 
     return Array(len).fill().map((_, idx) => {
       const number = start + idx * step
@@ -94,6 +96,8 @@
       value: { type: String, default: null },
       format: { type: String, default: null },
       minuteInterval: { type: [String, Number], default: 1 },
+      startMinute: { type: Number, default: 0 },
+      endMinute: { type: Number, default: 60 },
       height: { type: Number, required: true },
       color: { type: String, default: null },
       inline: { type: Boolean, default: null },
@@ -142,7 +146,7 @@
       },
       minutes () {
         const twoDigit = this.format.includes('mm') || this.format.includes('MM')
-        return ArrayMinuteRange(0, 60, twoDigit, this.minuteInterval, this._disabledMinutes)
+        return ArrayMinuteRange(this.startMinute, this.endMinute, twoDigit, this.minuteInterval, this._disabledMinutes)
       },
       apms () {
         return this.isTwelveFormat
@@ -277,11 +281,11 @@
       onScrollHours: debounce(function (scroll) {
         const value = this.getValue(scroll)
         const hour = this.isTwelveFormat
-					? this.apm
-						? this.apm.toLowerCase() === 'am'
-							? value + 1
-							: (value + 1 + 12)
-						:value
+          ? this.apm
+            ? this.apm.toLowerCase() === 'am'
+              ? value + 1
+              : (value + 1 + 12)
+            : value
           : value
         if (this.isHoursDisabled(hour)) return
         this.hour = hour === 24 && !this.isTwelveFormat ? 23 : hour

src/VueCtkDateTimePicker/_subs/PickersContainer/index.vue

@@ -67,6 +67,8 @@
             :format="timeFormat"
             :only-time="onlyTime"
             :minute-interval="minuteInterval"
+            :start-minute="startMinute"
+            :end-minute="endMinute"
             :visible="visible"
             :height="height"
             :disabled-hours="disabledHours"
@@ -120,6 +122,8 @@
       onlyDate: { type: Boolean, default: false },
       onlyTime: { type: Boolean, default: null },
       minuteInterval: { type: [String, Number], default: 1 },
+      startMinute: { type: Number, default: 0 },
+      endMinute: { type: Number, default: 60 },
       format: { type: String, default: 'YYYY-MM-DD hh:mm a' },
       locale: { type: String, default: null },
       maxDate: { type: String, default: null },

src/VueCtkDateTimePicker/index.vue

@@ -50,6 +50,8 @@
       :only-time="onlyTime"
       :only-date="hasOnlyDate"
       :minute-interval="minuteInterval"
+      :start-minute="startMinute"
+      :end-minute="endMinute"
       :locale="locale"
       :min-date="minDate"
       :max-date="maxDate"
@@ -100,8 +102,8 @@
     }
   }
 
-  const nearestMinutes = (interval, date, format) => {
-    const roundedMinutes = Math.ceil(date.minute() / interval) * interval
+  const nearestMinutes = (startMinute, interval, date, format) => {
+    const roundedMinutes = Math.ceil((date.minute() - startMinute) / interval) * interval + startMinute
     return moment(date.clone().minute(roundedMinutes).second(0), format)
   }
 
@@ -297,14 +299,14 @@
         const dateToSend = dateTime
           ? moment(dateTime, 'YYYY-MM-DD HH:mm')
           : null
-        const dateTimeToSend = dateToSend ? nearestMinutes(this.minuteInterval, moment(dateToSend), 'YYYY-MM-DD HH:mm').format(this.formatOutput) : null
+        const dateTimeToSend = dateToSend ? nearestMinutes(this.startMinute, this.minuteInterval, moment(dateToSend), 'YYYY-MM-DD HH:mm').format(this.formatOutput) : null
         return dateTimeToSend
       },
       getDateTime () {
         const date = this.value
           ? moment(this.value, this.formatOutput)
           : null
-        return date ? nearestMinutes(this.minuteInterval, date, this.formatOutput).format('YYYY-MM-DD HH:mm') : null
+        return date ? nearestMinutes(this.startMinute, this.minuteInterval, date, this.formatOutput).format('YYYY-MM-DD HH:mm') : null
       },
       /**
        * Closes the datepicker

src/VueCtkDateTimePicker/props.js

@@ -17,6 +17,8 @@ export default {
   format: { type: String, default: 'YYYY-MM-DD hh:mm a' },
   outputFormat: { type: String, default: null },
   minuteInterval: { type: [String, Number], default: 1 },
+  startMinute: { type: Number, default: 0 },
+  endMinute: { type: Number, default: 60 },
   minDate: { type: String, default: null },
   maxDate: { type: String, default: null },
   autoClose: { type: Boolean, default: false },