Allow disableDate function to limit time-spinner numbers

Fixes #3246
This commit is contained in:
Sergio Crisostomo 2018-04-06 23:15:20 +02:00
parent 309912df0c
commit 3cd62242a8
2 changed files with 57 additions and 6 deletions

View file

@ -50,6 +50,7 @@
:value="dates"
:format="format"
:time-disabled="timeDisabled"
:disabled-date="disabledDate"
v-bind="timePickerOptions"
@on-pick="handlePick"
@on-pick-click="handlePickClick"
@ -150,6 +151,13 @@
currentView (currentView) {
this.$emit('on-selection-mode-change', currentView);
this.pickertable = this.getTableType(currentView);
if (this.currentView === 'time') {
this.$nextTick(() => {
const spinner = this.$refs.timePicker.$refs.timeSpinner;
spinner.updateScroll();
});
}
},
selectionMode(type){
this.currentView = type;
@ -186,6 +194,7 @@
else if (selectionMode === 'month') value = new Date(panelDate.getFullYear(), value.getMonth(), 1);
else value = new Date(value);
this.dates = [value];
this.$emit('on-pick', value);
},
},

View file

@ -7,12 +7,12 @@
ref="timeSpinner"
:show-seconds="showSeconds"
:steps="steps"
:hours="value[0] && date.getHours()"
:minutes="value[0] && date.getMinutes()"
:seconds="value[0] && date.getSeconds()"
:disabled-hours="disabledHours"
:disabled-minutes="disabledMinutes"
:disabled-seconds="disabledSeconds"
:hours="timeSlots[0]"
:minutes="timeSlots[1]"
:seconds="timeSlots[2]"
:disabled-hours="disabledHMS.disabledHours"
:disabled-minutes="disabledHMS.disabledMinutes"
:disabled-seconds="disabledHMS.disabledSeconds"
:hide-disabled-options="hideDisabledOptions"
@on-change="handleChange"
@on-pick-click="handlePickClick"></time-spinner>
@ -39,12 +39,25 @@
const timePrefixCls = 'ivu-time-picker';
const capitalize = (str) => str[0].toUpperCase() + str.slice(1);
const mergeDateHMS = (date, hours, minutes, seconds) => {
const newDate = new Date(date.getTime());
newDate.setHours(hours);
newDate.setMinutes(minutes);
newDate.setSeconds(seconds);
return newDate;
};
const unique = (el, i, arr) => arr.indexOf(el) === i;
const returnFalse = () => false;
export default {
name: 'TimePickerPanel',
mixins: [ Mixin, Locale, Options ],
components: { TimeSpinner, Confirm },
props: {
disabledDate: {
type: Function,
default: returnFalse
},
steps: {
type: Array,
default: () => []
@ -76,6 +89,35 @@
const tYear = this.t('i.datepicker.year');
const tMonth = this.t(`i.datepicker.month${month}`);
return `${date.getFullYear()}${tYear} ${tMonth}`;
},
timeSlots(){
if (!this.value[0]) return [];
return ['getHours', 'getMinutes', 'getSeconds'].map(slot => this.date[slot]());
},
disabledHMS(){
const disabledTypes = ['disabledHours', 'disabledMinutes', 'disabledSeconds'];
if (this.disabledDate === returnFalse || !this.value[0]) {
const disabled = disabledTypes.reduce(
(obj, type) => (obj[type] = this[type], obj), {}
);
return disabled;
} else {
const slots = [24, 60, 60];
const disabled = ['Hours', 'Minutes', 'Seconds'].map(type => this[`disabled${type}`]);
const disabledHMS = disabled.map((preDisabled, j) => {
const slot = slots[j];
const toDisable = preDisabled;
for (let i = 0; i < slot; i+= (this.steps[j] || 1)){
const hms = this.timeSlots.map((slot, x) => x === j ? i : slot);
const testDateTime = mergeDateHMS(this.date, ...hms);
if (this.disabledDate(testDateTime, true)) toDisable.push(i);
}
return toDisable.filter(unique);
});
return disabledTypes.reduce(
(obj, type, i) => (obj[type] = disabledHMS[i], obj), {}
);
}
}
},
watch: {