<template>
|
<el-date-picker
|
class="pam-date cursor--pointer"
|
popper-class="pam-date-popper"
|
v-model="dateValue"
|
:clearable="false"
|
type="date"
|
:editable="false"
|
format="yyyy/MM/dd"
|
placeholder="選擇日期"
|
prefix-icon="icon-down down-icon"
|
:picker-options="pickerOptions"
|
@change="changeDate"
|
>
|
</el-date-picker>
|
</template>
|
|
<script lang="ts">
|
import { Component, Emit, Prop, PropSync, Vue, Watch } from "nuxt-property-decorator";
|
|
@Component
|
export default class UiDatePicker extends Vue {
|
dateValue: Date | string = '';
|
|
@Prop()
|
defaultValue!: string;
|
|
@Prop({default: false})
|
isPastDateDisabled!: boolean;
|
|
@Prop({default: false})
|
isFutureDateDisabled!: boolean;
|
|
@Prop()
|
disabledBeforeSpecificDate?: string;
|
|
@Emit('changeDate')
|
changeDate() {
|
return this.dateValue;
|
}
|
|
@Watch('defaultValue', {immediate: true})
|
updateDefault() {
|
if (this.defaultValue) {
|
this.dateValue = new Date(this.defaultValue);
|
this.changeDate();
|
}
|
}
|
|
get pickerOptions() {
|
const date = new Date();
|
const currentDate = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
|
|
if (!!this.disabledBeforeSpecificDate) {
|
const compareDate = new Date(this.disabledBeforeSpecificDate);
|
return {
|
disabledDate(time: Date) {
|
const pickedDate = `${time.getFullYear()}/${time.getMonth() + 1}/${time.getDate()}`;
|
return new Date(pickedDate).getTime() < compareDate.getTime();
|
}
|
}
|
}
|
|
if (this.isPastDateDisabled) {
|
return {
|
disabledDate(time: Date) {
|
const pickedDate = `${time.getFullYear()}/${time.getMonth() + 1}/${time.getDate()}`;
|
return new Date(pickedDate).getTime() < new Date(currentDate).getTime();
|
}
|
}
|
}
|
|
if (this.isFutureDateDisabled) {
|
return {
|
disabledDate(time: Date) {
|
const pickedDate = `${time.getFullYear()}/${time.getMonth() + 1}/${time.getDate()}`;
|
return new Date(pickedDate).getTime() > new Date(currentDate).getTime();
|
}
|
}
|
}
|
}
|
|
}
|
</script>
|
