parent
309912df0c
commit
3cd62242a8
2 changed files with 57 additions and 6 deletions
|
@ -50,6 +50,7 @@
|
||||||
:value="dates"
|
:value="dates"
|
||||||
:format="format"
|
:format="format"
|
||||||
:time-disabled="timeDisabled"
|
:time-disabled="timeDisabled"
|
||||||
|
:disabled-date="disabledDate"
|
||||||
v-bind="timePickerOptions"
|
v-bind="timePickerOptions"
|
||||||
@on-pick="handlePick"
|
@on-pick="handlePick"
|
||||||
@on-pick-click="handlePickClick"
|
@on-pick-click="handlePickClick"
|
||||||
|
@ -150,6 +151,13 @@
|
||||||
currentView (currentView) {
|
currentView (currentView) {
|
||||||
this.$emit('on-selection-mode-change', currentView);
|
this.$emit('on-selection-mode-change', currentView);
|
||||||
this.pickertable = this.getTableType(currentView);
|
this.pickertable = this.getTableType(currentView);
|
||||||
|
|
||||||
|
if (this.currentView === 'time') {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
const spinner = this.$refs.timePicker.$refs.timeSpinner;
|
||||||
|
spinner.updateScroll();
|
||||||
|
});
|
||||||
|
}
|
||||||
},
|
},
|
||||||
selectionMode(type){
|
selectionMode(type){
|
||||||
this.currentView = type;
|
this.currentView = type;
|
||||||
|
@ -186,6 +194,7 @@
|
||||||
else if (selectionMode === 'month') value = new Date(panelDate.getFullYear(), value.getMonth(), 1);
|
else if (selectionMode === 'month') value = new Date(panelDate.getFullYear(), value.getMonth(), 1);
|
||||||
else value = new Date(value);
|
else value = new Date(value);
|
||||||
|
|
||||||
|
this.dates = [value];
|
||||||
this.$emit('on-pick', value);
|
this.$emit('on-pick', value);
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
|
@ -7,12 +7,12 @@
|
||||||
ref="timeSpinner"
|
ref="timeSpinner"
|
||||||
:show-seconds="showSeconds"
|
:show-seconds="showSeconds"
|
||||||
:steps="steps"
|
:steps="steps"
|
||||||
:hours="value[0] && date.getHours()"
|
:hours="timeSlots[0]"
|
||||||
:minutes="value[0] && date.getMinutes()"
|
:minutes="timeSlots[1]"
|
||||||
:seconds="value[0] && date.getSeconds()"
|
:seconds="timeSlots[2]"
|
||||||
:disabled-hours="disabledHours"
|
:disabled-hours="disabledHMS.disabledHours"
|
||||||
:disabled-minutes="disabledMinutes"
|
:disabled-minutes="disabledHMS.disabledMinutes"
|
||||||
:disabled-seconds="disabledSeconds"
|
:disabled-seconds="disabledHMS.disabledSeconds"
|
||||||
:hide-disabled-options="hideDisabledOptions"
|
:hide-disabled-options="hideDisabledOptions"
|
||||||
@on-change="handleChange"
|
@on-change="handleChange"
|
||||||
@on-pick-click="handlePickClick"></time-spinner>
|
@on-pick-click="handlePickClick"></time-spinner>
|
||||||
|
@ -39,12 +39,25 @@
|
||||||
const timePrefixCls = 'ivu-time-picker';
|
const timePrefixCls = 'ivu-time-picker';
|
||||||
|
|
||||||
const capitalize = (str) => str[0].toUpperCase() + str.slice(1);
|
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 {
|
export default {
|
||||||
name: 'TimePickerPanel',
|
name: 'TimePickerPanel',
|
||||||
mixins: [ Mixin, Locale, Options ],
|
mixins: [ Mixin, Locale, Options ],
|
||||||
components: { TimeSpinner, Confirm },
|
components: { TimeSpinner, Confirm },
|
||||||
props: {
|
props: {
|
||||||
|
disabledDate: {
|
||||||
|
type: Function,
|
||||||
|
default: returnFalse
|
||||||
|
},
|
||||||
steps: {
|
steps: {
|
||||||
type: Array,
|
type: Array,
|
||||||
default: () => []
|
default: () => []
|
||||||
|
@ -76,6 +89,35 @@
|
||||||
const tYear = this.t('i.datepicker.year');
|
const tYear = this.t('i.datepicker.year');
|
||||||
const tMonth = this.t(`i.datepicker.month${month}`);
|
const tMonth = this.t(`i.datepicker.month${month}`);
|
||||||
return `${date.getFullYear()}${tYear} ${tMonth}`;
|
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: {
|
watch: {
|
||||||
|
|
Loading…
Add table
Reference in a new issue