pcalife/PAM.git - dev.pollex.com.tw

			@@ -4,6 +4,7 @@
			popper-class="pam-time-popper"
			v-model="timeValue"
			:clearable="false"
			:editable="false"
			:picker-options="pickerOptions"
			placeholder="選擇時間"
			prefix-icon="icon-down down-icon"
			@@ -19,14 +20,20 @@
			@Component
			export default class UiTimePicker extends Vue {
			timeValue = '';
			pickerOptions = {
			start: '09:00',
			step: '00:15',
			end: '21:00'
			}

			@Prop()
			defaultValue!: string;

			@Prop({default: ''})
			changeDate!: Date \| string;

			@Prop()
			isPastDateDisabled!: boolean;

			@Prop()
			isFutureDateDisabled!: boolean;

			///////////////////////////////////////////////////////////////////////

			@Emit('changeTime')
			changeTime() {
			@@ -36,11 +43,76 @@
			@Watch('defaultValue', {immediate: true})
			updateDefault() {
			if (this.defaultValue) {
			const hours = new Date(this.defaultValue).getHours();
			const minutes = new Date(this.defaultValue).getMinutes();
			this.timeValue = `${hours < 10 ? '0' + hours : hours}:${minutes < 10 ? '0' + minutes : minutes}`;
			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>