<template>
|
<el-time-select
|
class="pam-time cursor--pointer"
|
popper-class="pam-time-popper"
|
v-model="timeValue"
|
:clearable="false"
|
:editable="false"
|
:picker-options="pickerOptions"
|
placeholder="選擇時間"
|
prefix-icon="icon-down down-icon"
|
value-format="timestamp"
|
@change="changeTime"
|
>
|
</el-time-select>
|
</template>
|
|
<script lang="ts">
|
import { Component, Emit, Prop, Vue, Watch } from "nuxt-property-decorator";
|
|
@Component
|
export default class UiTimePicker extends Vue {
|
timeValue = '';
|
|
@Prop()
|
defaultValue!: string;
|
|
@Prop({default: ''})
|
changeDate!: Date | string;
|
|
@Prop()
|
isPastDateDisabled!: boolean;
|
|
@Prop()
|
isFutureDateDisabled!: boolean;
|
|
///////////////////////////////////////////////////////////////////////
|
|
@Emit('changeTime')
|
changeTime() {
|
return this.timeValue;
|
}
|
|
@Watch('defaultValue', {immediate: true})
|
updateDefault() {
|
if (this.defaultValue) {
|
const defaultDate = new Date(this.defaultValue);
|
this.timeValue = this.formatTimeString(defaultDate);
|
this.changeTime();
|
}
|
}
|
|
///////////////////////////////////////////////////////////////////////
|
|
get pickerOptions() {
|
let minTime = '';
|
let maxTime = '';
|
const currentDate = new Date();
|
|
if (this.changeDate && this.isPickedToday(currentDate)) {
|
|
if (this.isPastDateDisabled) {
|
minTime = this.formatTimeString(currentDate);
|
this.isPickedDisableTime(currentDate, minTime);
|
}
|
|
if (this.isFutureDateDisabled) {
|
maxTime = this.formatTimeString(currentDate);
|
this.isPickedDisableTime(currentDate, maxTime);
|
}
|
|
}
|
|
return {
|
start: '09:00',
|
step: '00:15',
|
end: '21:00',
|
minTime: minTime,
|
maxTime: maxTime
|
}
|
}
|
|
private isPickedDisableTime(currentDate: Date, minMaxTime: string) {
|
const currentTime = this.getTimeValue(currentDate, minMaxTime);
|
const pickedTime = this.getTimeValue(currentDate, this.timeValue);
|
if (this.isPastDateDisabled && pickedTime < currentTime) {
|
this.timeValue = '';
|
this.changeTime();
|
}
|
if (this.isFutureDateDisabled && currentTime < pickedTime) {
|
this.timeValue = '';
|
this.changeTime();
|
}
|
}
|
|
private isPickedToday(currentDate: Date) {
|
const pickedDate = new Date(this.changeDate);
|
const today = this.formatDateString(currentDate);
|
const picked = this.formatDateString(pickedDate);
|
return today === picked;
|
}
|
|
private getTimeValue(date: Date, time: string) {
|
const hour = time.split(':')[0];
|
const minute = time.split(':')[1];
|
return date.setHours(+hour, +minute);
|
}
|
|
private formatDateString(date: Date) {
|
return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
|
}
|
|
private formatTimeString(date: Date) {
|
const hours = date.getHours();
|
const minutes = date.getMinutes();
|
return `${hours < 10 ? '0' + hours : hours}:${minutes < 10 ? '0' + minutes : minutes}`;
|
}
|
}
|
</script>
|
