diff --git a/assets/feature_minute_range.png b/assets/feature_minute_range.png new file mode 100644 index 00000000..9cad3847 Binary files /dev/null and b/assets/feature_minute_range.png differ diff --git a/src/App.vue b/src/App.vue index 35b0a6da..fab1595d 100644 --- a/src/App.vue +++ b/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', diff --git a/src/VueCtkDateTimePicker/_subs/PickersContainer/_subs/TimePicker.vue b/src/VueCtkDateTimePicker/_subs/PickersContainer/_subs/TimePicker.vue index 7aad9f85..6eede6c4 100644 --- a/src/VueCtkDateTimePicker/_subs/PickersContainer/_subs/TimePicker.vue +++ b/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 diff --git a/src/VueCtkDateTimePicker/_subs/PickersContainer/index.vue b/src/VueCtkDateTimePicker/_subs/PickersContainer/index.vue index e4b1c9ff..0f4db9c0 100644 --- a/src/VueCtkDateTimePicker/_subs/PickersContainer/index.vue +++ b/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 }, diff --git a/src/VueCtkDateTimePicker/index.vue b/src/VueCtkDateTimePicker/index.vue index 230df953..bd4130cd 100644 --- a/src/VueCtkDateTimePicker/index.vue +++ b/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 diff --git a/src/VueCtkDateTimePicker/props.js b/src/VueCtkDateTimePicker/props.js index 1a9963b5..0217ff19 100644 --- a/src/VueCtkDateTimePicker/props.js +++ b/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 },