ai.touchui-vue 1.31.3 → 1.32.0

package/packages/calendar/src/calendar.vue

@@ -1,1142 +1,1142 @@
-<template>
-	<div class="to-calendar" :class="{'to-calendar-type-month' : type === 'month', 'to-calendar-size-large' : size === 'large'}">
-		<!-- 头部 开始 -->
-		<div class="header">
-			<div class="prevYear" @click="lastYear"></div>
-			<div class="prev" @click="lastMonth"></div>
-			<div class="info" :class="{'info-unfold' : type !== 'month'}" @click="toggleMonthSelector">
-				<span class="year">{{ year }}</span>
-				<span class="month">{{ month | addZero }}</span>
-			</div>
-			<div class="next" @click="nextMonth"></div>
-			<div class="nextYear" @click="nextYear"></div>
-		</div>
-		<!-- 头部 结束 -->
-		<!-- 年月选择 开始 -->
-		<div v-show="monthLayer || type === 'month'" class="select">
-			<div class="year">
-				<span class="prev" @click="lastYears"></span>
-				<ul>
-					<li v-for="(item, index) in years" :key="index" :class="setYearClass(item)" @click="selectYear(item)">
-						{{ item }}
-					</li>
-				</ul>
-				<span class="next" @click="nextYears"></span>
-			</div>
-			<div class="month">
-				<ul>
-					<li :class="setMonthClass(1)" @click="selectMonth(1)">{{ t('to.calendar.month.m1') }}</li>
-					<li :class="setMonthClass(2)" @click="selectMonth(2)">{{ t('to.calendar.month.m2') }}</li>
-					<li :class="setMonthClass(3)" @click="selectMonth(3)">{{ t('to.calendar.month.m3') }}</li>
-					<li :class="setMonthClass(4)" @click="selectMonth(4)">{{ t('to.calendar.month.m4') }}</li>
-					<li :class="setMonthClass(5)" @click="selectMonth(5)">{{ t('to.calendar.month.m5') }}</li>
-					<li :class="setMonthClass(6)" @click="selectMonth(6)">{{ t('to.calendar.month.m6') }}</li>
-					<li :class="setMonthClass(7)" @click="selectMonth(7)">{{ t('to.calendar.month.m7') }}</li>
-					<li :class="setMonthClass(8)" @click="selectMonth(8)">{{ t('to.calendar.month.m8') }}</li>
-					<li :class="setMonthClass(9)" @click="selectMonth(9)">{{ t('to.calendar.month.m9') }}</li>
-					<li :class="setMonthClass(10)" @click="selectMonth(10)">{{ t('to.calendar.month.m10') }}</li>
-					<li :class="setMonthClass(11)" @click="selectMonth(11)">{{ t('to.calendar.month.m11') }}</li>
-					<li :class="setMonthClass(12)" @click="selectMonth(12)">{{ t('to.calendar.month.m12') }}</li>
-				</ul>
-			</div>
-		</div>
-		<!-- 年月选择 结束-->
-		<!-- 周 开始 -->
-		<div v-if="type!=='month'" class="week">
-			<ul>
-				<li>{{ t('to.calendar.week.w0') }}</li>
-				<li>{{ t('to.calendar.week.w1') }}</li>
-				<li>{{ t('to.calendar.week.w2') }}</li>
-				<li>{{ t('to.calendar.week.w3') }}</li>
-				<li>{{ t('to.calendar.week.w4') }}</li>
-				<li>{{ t('to.calendar.week.w5') }}</li>
-				<li>{{ t('to.calendar.week.w6') }}</li>
-			</ul>
-		</div>
-		<!-- 周 结束 -->
-		<!-- 日期 开始 -->
-		<div v-if="type!=='month'" class="day">
-			<ul>
-				<li v-for="(item, index) in days" :key="index" v-tip="item.point && item.point.tooltip ? item.point.tooltip : ''" v-dis="isDisableDay(item)" :class="setDayClass(item)" @click="selectDay(item)">
-					<slot :item="item" :index="index">
-						<span v-if="item.value" class="solar">{{ dayText(item.value) }}</span>
-						<span v-if="item.point && item.point.length > 0" class="to-calendar-points">
-							<to-tag v-for="(ipoint, pointIndex) in item.point" :key="pointIndex" :type="size === 'large' ? 'dot' : ''" :color="pointColor(ipoint.type)" :fillet="size === 'large' ? '' : 'round'">{{ ipoint.count }}</to-tag>
-						</span>
-					</slot>
-				</li>
-			</ul>
-		</div>
-		<!-- 日期 结束 -->
-		<div v-if="legend" class="to-calendar-legend">
-			<slot name="legend">
-				<to-tag type="dot" color="danger">逾期未完成</to-tag>
-				<to-tag type="dot" color="primary">正常进行中</to-tag>
-				<to-tag type="dot" color="success">已完成</to-tag>
-			</slot>
-		</div>
-		<!-- 时间 开始 -->
-		<div v-if="type === 'datetime' || type === 'time'" class="time">
-			<div class="input">
-				<to-input v-model="hour" type="number" mode="none" :placeholder="t('to.calendar.time.hPlaceholder')" width="full" :maxlength="2" :max="maxHour" :min="0" @click.native="showTimeLayer"></to-input>
-			</div>
-			<span class="text">:</span>
-			<span class="input">
-				<to-input v-model="minute" type="number" mode="none" :placeholder="t('to.calendar.time.mPlaceholder')" width="full" :maxlength="2" :max="new Date(max).getMinutes()" :min="0" @click.native="showTimeLayer"></to-input>
-			</span>
-			<span class="text">:</span>
-			<span class="input">
-				<to-input v-model="second" type="number" mode="none" :placeholder="t('to.calendar.time.sPlaceholder')" width="full" :maxlength="2" :max="new Date(max).getSeconds()" :min="0" @click.native="showTimeLayer"></to-input>
-			</span>
-			<to-button color="primary" @click="selectTime">{{ t('to.common.confirm') }}</to-button>
-			<div v-show="timeLayer" class="option">
-				<to-header :title="t('to.calendar.time.title')" color="primary" mode="fill">
-					<to-button mode="none" color="bg" icon="close" @click="closeTimeLayer"></to-button>
-				</to-header>
-				<div class="content">
-					<to-scroll ref="hourScroll" :vitrual="!$phone &&! $pad" bar-display="hover">
-						<to-padding :value="0.5">
-							<to-grid :col="2">
-								<to-grid-item v-for="item in hours" :key="item">
-									<to-card v-dis="isDisableHour(item)" fillet="normal" :color="hour === item ? 'warning' : 'default'" :mode="hour === item ? 'fill' : 'none'" link @click="hour = item;">{{ item }}</to-card>
-								</to-grid-item>
-							</to-grid>
-						</to-padding>
-					</to-scroll>
-					<to-scroll ref="minuteScroll" :vitrual="!$phone &&! $pad" bar-display="hover">
-						<to-padding :value="0.5">
-							<to-grid :col="2">
-								<to-grid-item v-for="item in minutes" :key="item">
-									<to-card v-dis="isDisableMinute(item)" fillet="normal" :color="minute === item ? 'warning' : 'default'" :mode="minute === item ? 'fill' : 'none'" link @click="minute = item;">{{ item }}</to-card>
-								</to-grid-item>
-							</to-grid>
-						</to-padding>
-					</to-scroll>
-					<to-scroll ref="secondScroll" :vitrual="!$phone &&! $pad" bar-display="hover">
-						<to-padding :value="0.5">
-							<to-grid :col="2">
-								<to-grid-item v-for="item in seconds" :key="item">
-									<to-card v-dis="isDisableSecond(item)" fillet="normal" :color="second === item ? 'warning' : 'default'" :mode="second === item ? 'fill' : 'none'" link @click="second = item;">{{ item }}</to-card>
-								</to-grid-item>
-							</to-grid>
-						</to-padding>
-					</to-scroll>
-				</div>
-			</div>
-		</div>
-		<!-- 时间 结束 -->
-	</div>
-</template>
-<script>
-import Locale from 'ai.touchui-vue/src/mixins/locale'
-export default {
-
-	// 注：下列注释中，“当前” 是指控件所处的日期/时间，“现在” 则是指实际所处的日期/时间
-	name: 'ToCalendar',
-	componentName: 'ToCalendar',
-	filters: {
-		addZero: function(str) {
-			return ('00' + str).substr(str.toString().length);
-		}
-	},
-	mixins: [Locale],
-	model: {
-		event: 'change'
-	},
-	props: {
-		// 假期，用于显示假期标识
-		// ['2024-04-03', '2024-04-04', '2024-04-05']
-		holiday: {
-			type: Array,
-			default() {
-				return []
-			}
-		},
-		// 重点日期（比如这天有待办之类的）
-		// [
-		// 	{
-		// 		day: '2024-04-02',
-		// 		tooltip: 'test',
-		// 		count: 1
-		// 	},
-		// 	{
-		// 		day: '2024-04-07',
-		// 		tooltip: 'test',
-		// 		count: 1
-		// 	}
-		// ]
-		point: {
-			type: Array,
-			default() {
-				return []
-			}
-		},
-		type: {
-			type: String,
-			default: ''
-		},
-		// 大小，支持 large
-		size: {
-			type: String,
-			default: ''
-		},
-		// 是否显示 point 提示信息
-		legend: Boolean,
-		value: {
-			type: [String, Date],
-			default() {
-				return ''
-			}
-		},
-		// 范围类型
-		// 开始：''
-		// 结束：'end'
-		rangeType: {
-			type: String,
-			default: ''
-		},
-		range: Boolean,
-		time: {
-			type: String,
-			default: ''
-		},
-		beforeChange: {
-			type: Function,
-			default: null
-		},
-		min: {
-			type: [String, Date, Number],
-			default: ''
-		},
-		max: {
-			type: [String, Date, Number],
-			default: ''
-		}
-	},
-	data() {
-		return {
-
-			// 缓存值
-			changeFrom: 'out',
-			submitValue: '',
-
-			// 现在时间记录
-			curYear: new Date().getFullYear(),
-			curMonth: new Date().getMonth() + 1,
-			curDay: new Date().getDate(),
-
-			// 默认值
-			year: '',
-			month: '',
-			day: '',
-			hour: '',
-			minute: '',
-			second: '',
-
-			// 页面数据
-			years: [],
-			days: [],
-			hours: [],
-			minutes: [],
-			seconds: [],
-
-			// 选择层
-			monthLayer: false,
-			timeLayer: false,
-
-			// 年份切换器
-			tempYear: 0, // 临时当前年，选择年月的时候，在选月份之前，年份是尚未确定的
-			yearsPage: 0,
-			now: new Date(),
-
-			// 范围
-			start: {
-				year: '',
-				month: '',
-				day: ''
-			},
-			end: {
-				year: '',
-				month: '',
-				day: ''
-			}
-		};
-	},
-	computed: {
-		dayText() {
-			const that = this
-			return function(val) {
-				// 凡是假期，都加上标记
-				const dayStr = that.year + '-' + that.addZero(that.month) + '-' + that.addZero(val)
-				if (that.holiday.length > 0 && that.holiday.indexOf(dayStr) > -1) {
-					return that.t('to.calendar.day.holiday')
-				} else {
-					return val
-				}
-			}
-		},
-		pointColor() {
-			return function(val) {
-				if (val === -1) {
-					return 'danger'
-				}
-				if (val === 0) {
-					return 'primary'
-				}
-				if (val === 1) {
-					return 'success'
-				}
-			}
-		},
-		hourz: {
-			get() {
-				return this.addZero(this.hour)
-			},
-			set(val) {
-				this.hour = String(val)
-			}
-		},
-		minutez: {
-			get() {
-				return this.addZero(this.minute)
-			},
-			set(val) {
-				this.minute = String(val)
-			}
-		},
-		secondz: {
-			get() {
-				return this.addZero(this.second)
-			},
-			set(val) {
-				this.second = String(val)
-			}
-		},
-		iValue() {
-			if (this.range) {
-				const start = (this.start.day || this.start.month) ? this.getStringValue(this.start) : ''
-				const end = (this.end.day || this.end.month) ? this.getStringValue(this.end) : ''
-				return `${start},${end}`
-			} else {
-				return this.getStringValue()
-			}
-		},
-		maxHour() {
-			let max = ''
-			if (typeof this.max === 'string') {
-				max = this.max.replace(/-/gi, '/')
-			} else {
-				max = this.max
-			}
-			return new Date(max).getHours()
-		},
-
-		isDisableDay() {
-			return (item) => {
-				if (this.year && this.month) {
-					let dateString = `${this.year}/${this.month}/${Number(item.value) + 1}`
-					let min = ''
-					// 默认使用 2023-03-01 格式时，其 hour = 8 而不是 0，所以要转为 2023/03/01 格式
-					if (typeof this.min === 'string') {
-						min = this.min.replace(/-/gi, '/')
-					} else {
-						min = this.min
-					}
-
-					let max = ''
-					if (typeof this.max === 'string') {
-						max = this.max.replace(/-/gi, '/')
-					} else {
-						max = this.max
-					}
-
-					return new Date(dateString) <= new Date(min) || new Date(dateString) > new Date(max)
-				} else {
-					return false
-				}
-			}
-		},
-
-		isDisableHour() {
-			return (item) => {
-				if (this.year && this.month && this.day) {
-					let dateString = `${this.year}/${this.month}/${this.day} ${Number(item) + 1}:00:00`
-					let min = ''
-					// 默认使用 2023-03-01 格式时，其 hour = 8 而不是 0，所以要转为 2023/03/01 格式
-					if (typeof this.min === 'string') {
-						min = this.min.replace(/-/gi, '/')
-					} else {
-						min = this.min
-					}
-
-					let max = ''
-					if (typeof this.max === 'string') {
-						max = this.max.replace(/-/gi, '/')
-					} else {
-						max = this.max
-					}
-
-					return new Date(dateString) <= new Date(min) || new Date(dateString) > new Date(max)
-				} else {
-					return false
-				}
-			}
-		},
-		isDisableMinute() {
-			return (item) => {
-				if (this.year && this.month && this.day && this.hour) {
-					let dateString = `${this.year}/${this.month}/${this.day} ${this.hour}:${Number(item) + 1}:00`
-					let min = ''
-					// 默认使用 2023-03-01 格式时，其 hour = 8 而不是 0，所以要转为 2023/03/01 格式
-					if (typeof this.min === 'string') {
-						min = this.min.replace(/-/gi, '/')
-					} else {
-						min = this.min
-					}
-
-					let max = ''
-					if (typeof this.max === 'string') {
-						max = this.max.replace(/-/gi, '/')
-					} else {
-						max = this.max
-					}
-
-					return new Date(dateString) < new Date(min) || new Date(dateString) > new Date(max)
-				} else {
-					return false
-				}
-			}
-		},
-		isDisableSecond() {
-			return (item) => {
-				if (this.year && this.month && this.day && this.hour && this.minute) {
-					let dateString = `${this.year}/${this.month}/${this.day} ${this.hour}:${this.minute}:${Number(item) + 1}`
-					let min = ''
-					// 默认使用 2023-03-01 格式时，其 hour = 8 而不是 0，所以要转为 2023/03/01 格式
-					if (typeof this.min === 'string') {
-						min = this.min.replace(/-/gi, '/')
-					} else {
-						min = this.min
-					}
-
-					let max = ''
-					if (typeof this.max === 'string') {
-						max = this.max.replace(/-/gi, '/')
-					} else {
-						max = this.max
-					}
-
-					return new Date(dateString) < new Date(min) || new Date(dateString) > new Date(max)
-				} else {
-					return false
-				}
-			}
-		}
-	},
-	watch: {
-		value(val) {
-			this.setData()
-			if (this.changeFrom === 'out') {
-				this.submitValue = val
-			}
-		},
-		submitValue(val) {
-			this.$emit('change', val)
-			this.changeFrom = 'in'
-			setTimeout(() => {
-				this.changeFrom = 'out'
-			}, 100);
-		},
-		min(val) {
-			this.min = val
-		},
-		max(val) {
-			this.max = val
-		},
-		point: {
-			handler() {
-				this.setDayData()
-			},
-			deep: true
-		}
-	},
-	created() {
-		this.setData()
-	},
-	methods: {
-		initCalendar() {
-			if (this.type === 'time') {
-				this.showTimeLayer()
-			} else {
-				this.timeLayer = false
-			}
-		},
-		// 根据 obj 获取当前时间值，入参格式形如：
-		// arg = {
-		// 	year: '2022',
-		// 	month: '02',
-		// 	day: '22'
-		// }
-		getValue(arg) {
-			return new Date(`${arg.year || this.year}/${arg.month || this.month}/${arg.day || this.day || '01'}`).getTime()
-		},
-
-		// 获取格式化为字符串后的日期
-		getStringValue(arg = {}) {
-			const year = arg.year || this.year
-			const month = arg.month || this.month
-			const day = arg.day || this.day
-			const hour = arg.hour || this.hourz
-			const minute = arg.minute || this.minutez
-			const second = arg.second || this.secondz
-			const imonth = `${year}-${this.addZero(month)}`
-			const iday = day ? `${this.addZero(day)}` : '01'
-			const itime = `${hour}:${minute}:${second}`
-			if (this.type === 'month') {
-				return imonth
-			} else if (this.type === 'datetime' || this.type === 'time') {
-				return `${imonth}-${iday} ${itime}`
-			} else {
-				return `${imonth}-${iday}`
-			}
-		},
-
-		// 获取格式化为对象的日期
-		getObjectValue(str) {
-			const date = new Date(str)
-			// eslint-disable-next-line no-debugger
-			if (this.isDate(str) && str) {
-				return {
-					year: date.getFullYear(),
-					month: date.getMonth() + 1,
-					day: date.getDate()
-				}
-			} else if (this.isMonth(str) && str) {
-				return {
-					year: date.getFullYear(),
-					month: date.getMonth() + 1,
-					day: ''
-				}
-			} else {
-				return {
-					year: '',
-					month: '',
-					day: ''
-				}
-			}
-		},
-
-		// 数据设置
-		setData() {
-			this.setCurrent()
-			this.setYearData()
-			this.setDayData()
-			this.setTimeData()
-		},
-		setCurrent() {
-			this.year = ''
-			this.month = ''
-			this.day = ''
-			if (this.range) {
-				let arr = this.value.split(',')
-				const start = arr[0]
-				const end = arr[1]
-
-				if (!start || this.isDate(start) || this.isMonth(start)) {
-					this.start = this.getObjectValue(start)
-				}
-				if (!end || this.isDate(end) || this.isMonth(end)) {
-					this.end = this.getObjectValue(end)
-				}
-				if (this.rangeType === 'end') {
-					this.year = this.year || new Date().getFullYear()
-					if ((this.end.day || this.end.month) && this.isAnyDate(this.getStringValue(this.end))) {
-						if (this.type === 'month') {
-							if (this.start.year === this.end.year) {
-								this.year = this.end.year + 1
-							} else {
-								this.year = this.end.year
-							}
-							this.month = 1
-						} else {
-							if (this.start.month === this.end.month) {
-								if (Number(this.month) === 12) {
-									this.year = this.end.year + 1
-									this.month = 1
-								} else {
-									this.month = this.end.month + 1
-								}
-							} else {
-								this.month = this.end.month
-							}
-						}
-					} else {
-						this.month = this.month || new Date().getMonth() + 2
-					}
-					if (this.month > 12) {
-						this.month = 1
-						this.year += 1
-					}
-				} else {
-					if ((this.start.day || this.start.month) && this.isAnyDate(this.getStringValue(this.start))) {
-						this.year = this.start.year
-						this.month = this.start.month
-					} else {
-						this.year = this.year || new Date().getFullYear()
-						this.month = this.month || new Date().getMonth() + 1
-					}
-				}
-			} else {
-				if (this.value && !isNaN(new Date(this.value))) {
-					this.year = new Date(this.value).getFullYear()
-					this.month = new Date(this.value).getMonth() + 1
-					this.day = new Date(this.value).getDate()
-					this.hour = String(new Date(this.value).getHours())
-					this.minute = String(new Date(this.value).getMinutes())
-					this.second = String(new Date(this.value).getSeconds())
-				} else if (this.value && isNaN(new Date(this.value)) && !isNaN(new Date(this.value.replace(/-/g, '/')))) {
-					const value = this.value.replace(/-/g, '/')
-					this.year = new Date(value).getFullYear()
-					this.month = new Date(value).getMonth() + 1
-					this.day = new Date(value).getDate()
-					this.hour = String(new Date(value).getHours())
-					this.minute = String(new Date(value).getMinutes())
-					this.second = String(new Date(value).getSeconds())
-				} else {
-					this.year = new Date().getFullYear()
-					this.month = new Date().getMonth() + 1
-					this.day = null
-					this.hour = '0'
-					this.minute = '0'
-					this.second = '0'
-				}
-			}
-		},
-		setYearData(year) {
-			year = year || this.year
-			let arr = [];
-			for (let i = 0; i < 10; i++) {
-				arr.push(Math.floor(year / 10) * 10 + i)
-			}
-			this.years = arr;
-		},
-		setDayData() {
-			let year = new Date(this.value).getFullYear()
-			let month = new Date(this.value).getMonth() + 1
-			let day = new Date(this.value).getDate()
-			const that = this
-			if (this.year === year && this.month === month) {
-				this.day = day
-			} else {
-				this.day = null
-			}
-			// 计算本月天数
-			const dayCount = this.getMonthDays(`${this.year}/${this.month}/1`);
-
-			// 计算前面有几天应该置空
-			const thisMonthFirstDay = new Date(`${this.year}/${this.month}/1`);
-			thisMonthFirstDay.setMonth(thisMonthFirstDay.getMonth(), 1);
-			const emptyLength = new Date(thisMonthFirstDay.setMonth(thisMonthFirstDay.getMonth(), 1)).getDay();
-
-			// 设置天数
-			this.days = (function() {
-				let arr = [];
-				for (let i = 0; i < emptyLength; i++) {
-					arr.push({});
-				}
-				for (let i = 1; i < dayCount + 1; i++) {
-					let obj = {};
-					obj.value = i;
-
-					// 星期天
-					if ((i + emptyLength) % 7 === 1) {
-						obj.sun = true;
-					}
-
-					// 星期六
-					if ((i + emptyLength) % 7 === 0) {
-						obj.sat = true;
-					}
-
-					// 重点日期
-					const point = that.point.filter((item)=>{return item.day === `${that.year}-${that.addZero(that.month)}-${that.addZero(i)}`})
-					obj.point = point
-
-					arr.push(obj);
-				}
-				return arr;
-			})();
-		},
-		setTimeData() {
-			this.hours = this.genNumbers(0, 23)
-			this.minutes = this.genNumbers(0, 59)
-			this.seconds = this.genNumbers(0, 59)
-			const hour = String(new Date(this.value).getHours())
-			const minute = String(new Date(this.value).getMinutes())
-			const second = String(new Date(this.value).getSeconds())
-			if (this.time) {
-				const arr = this.time.split(':')
-				this.hour = arr[0] || '0'
-				this.minute = arr[1] || '0'
-				this.second = arr[2] || '0'
-			}
-			if (!isNaN(hour) && !isNaN(minute) && !isNaN(second)) {
-				this.hour = hour
-				this.minute = minute
-				this.second = second
-			}
-		},
-
-		// 选择事件
-		selectYear(item) {
-			this.year = item
-		},
-		selectMonth(item) {
-			if (item) {
-				if (this.range && this.type === 'month') {
-					let start = {}
-					let end = {}
-					if (!this.start.month && !this.end.month) {
-						start.year = this.year
-						start.month = item
-						start.day = ''
-					}
-					if (this.start.month) {
-						if (this.end.month) {
-							start.year = this.year
-							start.month = item
-							start.day = ''
-							end.year = ''
-							end.month = ''
-							end.day = ''
-						} else {
-							if (this.getValue(this.start) > this.getValue({month: item})) {
-								end.year = this.start.year
-								end.month = this.start.month
-								end.day = ''
-								start.year = this.year
-								start.month = item
-								start.day = ''
-							} else {
-								start = JSON.parse(JSON.stringify(this.start))
-								end.year = this.year
-								end.month = item
-								end.day = ''
-							}
-						}
-					}
-					this.start = JSON.parse(JSON.stringify(start))
-					this.end = JSON.parse(JSON.stringify(end))
-					this.submitValue = this.iValue
-				} else {
-					if (this.type === 'month') {
-						this.$emit('beforeChange', this.getStringValue({
-							month: item
-						}))
-					}
-					if (this.beforeChange) {
-						const fn = this.beforeChange(this.getStringValue({
-							month: item
-						}))
-						if (fn && fn.then) {
-							fn.then(flag => {
-								this.selectMonthAction(item)
-							}).catch((e)=>{})
-						} else {
-							// 是同步方法，则返回为 true 执行
-							if (fn) {
-								this.selectMonthAction(item)
-							}
-						}
-					} else {
-						this.selectMonthAction(item)
-					}
-				}
-			}
-		},
-		selectMonthAction(item) {
-			this.month = item;
-			this.monthLayer = false;
-			this.setDayData();
-			if (this.type === 'month') {
-				this.day = 1
-				this.submitValue = this.iValue
-			}
-		},
-		selectDay(item) {
-			if (item.value) {
-				if (this.range) {
-					let start = {}
-					let end = {}
-					if (!this.start.day && !this.end.day) {
-						start.year = this.year
-						start.month = this.month
-						start.day = item.value
-					}
-					if (this.start.day) {
-						if (this.end.day) {
-							start.year = this.year
-							start.month = this.month
-							start.day = item.value
-							end.year = ''
-							end.month = ''
-							end.day = ''
-						} else {
-							if (this.getValue(this.start) > this.getValue({day: item.value})) {
-								end.year = this.start.year
-								end.month = this.start.month
-								end.day = this.start.day
-								start.year = this.year
-								start.month = this.month
-								start.day = item.value
-							} else {
-								start = JSON.parse(JSON.stringify(this.start))
-								end.year = this.year
-								end.month = this.month
-								end.day = item.value
-							}
-						}
-					}
-					this.start = JSON.parse(JSON.stringify(start))
-					this.end = JSON.parse(JSON.stringify(end))
-					this.submitValue = this.iValue
-				}
-				else {
-					let val = this.getStringValue({
-						day: item.value
-					})
-					if (!this.type || this.type === 'date') {
-						this.$emit('beforeChange', val)
-						if (this.beforeChange) {
-							const fn = this.beforeChange(this.getStringValue({
-								day: item.value
-							}))
-
-							if (fn && fn.then) {
-								fn.then(flag => {
-									this.selectDayAction(item)
-								})
-							} else {
-								// 是同步方法，则返回为 true 执行
-								if (fn) {
-									this.selectDayAction(item)
-								}
-							}
-						} else {
-							this.selectDayAction(item)
-						}
-					} else {
-						this.selectDayAction(item)
-					}
-				}
-			}
-		},
-		selectDayAction(item) {
-			this.day = item.value
-			if (!this.type || this.type === 'date') {
-				this.submitValue = this.iValue
-			}
-		},
-		selectTime() {
-			if (!this.day && !this.min && !this.max) {
-				this.day = new Date().getDate()
-			} else if (!this.day && this.min && this.max) {
-				this.$tip.error(this.t('to.calendar.tip.error.selectDate'))
-				return
-			}
-			this.$emit('beforeChange', this.getStringValue())
-			if (this.beforeChange) {
-
-				const fn = this.beforeChange(this.getStringValue())
-
-				if (fn && fn.then) {
-					fn(this.getStringValue()).then(flag => {
-						this.selectTimeAction()
-					})
-				} else {
-					// 是同步方法，则返回为 true 执行
-					if (fn) {
-						this.selectTimeAction()
-					}
-				}
-			} else {
-				this.selectTimeAction()
-			}
-		},
-		selectTimeAction() {
-			this.timeLayer = false
-			this.submitValue = this.iValue
-			this.$emit('close')
-		},
-		// 样式设置
-		setYearClass(item) {
-			return {
-				cur: this.curYear === item,
-				on: this.year === item
-			};
-		},
-		setMonthClass(item) {
-			let arr = []
-			if (this.year === this.curYear && this.curMonth === item) {
-				arr.push('cur')
-			}
-			if (this.range && this.type === 'month') {
-				if (this.year === this.start.year && item === this.start.month) {
-					if (this.end.month) {
-						arr.push('start')
-					} else {
-						arr.push('on')
-					}
-				}
-				if (this.year === this.end.year && item === this.end.month) {
-					arr.push('end')
-				}
-				const value = this.getValue({
-					year: this.year,
-					month: item,
-					day: 1
-				})
-				if ((value > this.getValue(this.start) || value === this.getValue(this.start)) && value < this.getValue(this.end)) {
-					arr.push('range')
-				}
-			} else {
-				if (this.month === item) {
-					arr.push('on')
-				}
-			}
-
-			if (item && (this.min || this.max)) {
-				let curData = this.year + '/' + (item > 9 ? item : '0' + item) + '/01'
-				let date = new Date()
-				let hour = date.getHours()
-				let minute = date.getMinutes()
-				let second = date.getSeconds()
-				curData = curData + ' ' + (hour > 9 ? hour : '0' + hour) + ':' + (minute > 9 ? minute : '0' + minute) + ':' + (second > 9 ? second : '0' + second)
-				let curTime = new Date(curData).getTime()
-				let min = new Date(this.min).getTime()
-				let maxTime = new Date(this.max).getTime()
-				let cur = curData.split(' ')[0]
-				let year = new Date(this.max).getFullYear()
-				let month = new Date(this.max).getMonth() + 1
-				let day = new Date(this.max).getDate()
-				let max = year + '/' + (month > 9 ? month : '0' + month) + '/' + (day > 9 ? day : '0' + day)
-				if (min === maxTime && cur !== max) {
-					if (curTime > maxTime) {
-						arr.push('to-dis')
-					}
-					if (curTime < min) {
-						arr.push('to-dis')
-					}
-				} else if (min !== maxTime && cur !== max) {
-					if (curTime > maxTime) {
-						arr.push('to-dis')
-					}
-					if (curTime < min) {
-						arr.push('to-dis')
-					}
-				}
-			}
-			return arr;
-		},
-		setDayClass(item) {
-			let arr = []
-			if (item.sat) {
-				arr.push('sat')
-			}
-			if (item.sun) {
-				arr.push('sun')
-			}
-			if (this.year === this.curYear && this.month === this.curMonth && this.curDay === item.value) {
-				arr.push('cur')
-			}
-			if (this.range) {
-				if (this.year === this.start.year && this.month === this.start.month && item.value === this.start.day) {
-					if (this.end.day) {
-						arr.push('start')
-					} else {
-						arr.push('on')
-					}
-				}
-				if (this.year === this.end.year && this.month === this.end.month && item.value === this.end.day) {
-					arr.push('end')
-				}
-				const value = this.getValue({
-					year: this.year,
-					month: this.month,
-					day: item.value
-				})
-				if (value > this.getValue(this.start) && value < this.getValue(this.end)) {
-					arr.push('range')
-				}
-			} else {
-				if (this.day === item.value) {
-					arr.push('on')
-				}
-			}
-			return arr;
-		},
-
-		// 界面控制
-		nextMonth() {
-			if (this.month === 12) {
-				this.year += 1;
-				this.month = 1;
-			} else {
-				this.month += 1;
-			}
-			this.setDayData();
-		},
-		lastMonth() {
-			if (this.month === 1) {
-				this.year -= 1;
-				this.month = 12;
-			} else {
-				this.month -= 1;
-			}
-			this.setDayData();
-		},
-		lastYears() {
-			this.yearsPage -= 1;
-			this.setYearData(this.year + 10 * this.yearsPage);
-		},
-		nextYears() {
-			this.yearsPage += 1;
-			this.setYearData(this.year + 10 * this.yearsPage);
-		},
-		nextYear() {
-			this.year += 1
-			let year = new Date(this.value).getFullYear()
-			let month = new Date(this.value).getMonth() + 1
-			let day = new Date(this.value).getDate()
-			if (this.year === year && this.month === month) {
-				this.day = day
-			} else {
-				this.day = null
-			}
-		},
-		lastYear() {
-			this.year -= 1
-			let year = new Date(this.value).getFullYear()
-			let month = new Date(this.value).getMonth() + 1
-			let day = new Date(this.value).getDate()
-			if (this.year === year && this.month === month) {
-				this.day = day
-			} else {
-				this.day = null
-			}
-		},
-		toggleMonthSelector() {
-			if (!this.monthLayer) {
-				// 打开
-				this.monthLayer = true;
-				this.tempYear = this.year;
-				this.setYearData(this.year);
-			} else {
-				// 关闭
-				this.monthLayer = false;
-			}
-		},
-		showTimeLayer() {
-			this.timeLayer = true;
-			this.$nextTick(function() {
-				this.$refs.hourScroll.adjust()
-				this.$refs.minuteScroll.adjust()
-				this.$refs.secondScroll.adjust()
-			})
-		},
-		closeTimeLayer() {
-			if (this.type === 'time') {
-				this.timeLayer = false
-				this.$emit('close')
-			} else {
-				this.timeLayer = false
-			}
-		},
-
-		// 内置方法
-		// 验证日期格式
-		isDate(date) {
-			const DateExp = /^[1-2][0-9]{3}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])$/
-			if (DateExp.test(date)) {
-				return (new Date(date).getDate() === Number(date.substring(date.length - 2)))
-			} else {
-				return false
-			}
-		},
-		isMonth(date) {
-			const DateExp = /^[1-2][0-9]{3}-(0[1-9]|1[0-2])$/
-			if (DateExp.test(date)) {
-				return (new Date(date + '-01').getDate() === Number(1))
-			} else {
-				return false
-			}
-		},
-		isDatetime(time) {
-			if (typeof time === 'string') {
-				var reg = /^(\d{1,4})(-|\/)(\d{2})\2(\d{1,2}) (\d{2}):(\d{2}):(\d{2})$/;
-				var r = time.match(reg);
-				if (r == null) return false;
-				var d = new Date(r[1], r[3] - 1, r[4], r[5], r[6], r[7]);
-				return (d.getFullYear() === Number(r[1]) && (d.getMonth() + 1) === Number(r[3]) && d.getDate() === Number(r[4]) && d.getHours() === Number(r[5]) && d.getMinutes() === Number(r[6]) && d.getSeconds() === Number(r[7]));
-			} else {
-				return true
-			}
-		},
-		isAnyDate(val) {
-			if ((this.isDate(val) && (this.type === '')) || (this.isDatetime(val) && this.type === 'datetime') || (this.isMonth(val) && this.type === 'month')) {
-				return true
-			} else {
-				return false
-			}
-		},
-
-		// 获取一个月的天数
-		getMonthDays(date) {
-			const thisMonthFirstDay = new Date(date);
-			const nextMonthFirstDay = new Date(date);
-			thisMonthFirstDay.setMonth(thisMonthFirstDay.getMonth(), 1);
-			nextMonthFirstDay.setMonth(nextMonthFirstDay.getMonth() + 1, 1);
-			return (nextMonthFirstDay.valueOf() - thisMonthFirstDay.valueOf()) / (1000 * 60 * 60 * 24);
-		},
-		// 格式化日期
-		formatDate(date, fmt) {
-			if (!fmt) {
-				if (this.type === 'datetime') {
-					fmt = 'yyyy-MM-dd HH:mm:ss'
-				} else {
-					fmt = 'yyyy-MM-dd'
-				}
-			}
-			if (/(y+)/.test(fmt)) {
-				fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
-			}
-			const o = {
-				'M+': date.getMonth() + 1,
-				'd+': date.getDate(),
-				'H+': date.getHours(),
-				'm+': date.getMinutes(),
-				's+': date.getSeconds()
-			};
-			for (const k in o) {
-				if (new RegExp('(' + k + ')').test(fmt)) {
-					const str = o[k] + '';
-					fmt = fmt.replace(RegExp.$1, RegExp.$1.length === 1 ? str : this.addZero(str));
-				}
-			}
-			return fmt;
-		},
-		// 生成循环数字
-		genNumbers(min, max, step = 1) {
-			let arr = []
-			for (let i = min; i <= max; i += step) {
-				arr.push(String(i))
-			}
-			return arr
-		},
-		// 给个位数的数字前面补 0
-		addZero(str) {
-			return ('00' + str).substr(str.toString().length);
-		}
-	}
-};
-</script>
+<template>
+	<div class="to-calendar" :class="{'to-calendar-type-month' : type === 'month', 'to-calendar-size-large' : size === 'large'}">
+		<!-- 头部 开始 -->
+		<div class="header">
+			<div class="prevYear" @click="lastYear"></div>
+			<div class="prev" @click="lastMonth"></div>
+			<div class="info" :class="{'info-unfold' : type !== 'month'}" @click="toggleMonthSelector">
+				<span class="year">{{ year }}</span>
+				<span class="month">{{ month | addZero }}</span>
+			</div>
+			<div class="next" @click="nextMonth"></div>
+			<div class="nextYear" @click="nextYear"></div>
+		</div>
+		<!-- 头部 结束 -->
+		<!-- 年月选择 开始 -->
+		<div v-show="monthLayer || type === 'month'" class="select">
+			<div class="year">
+				<span class="prev" @click="lastYears"></span>
+				<ul>
+					<li v-for="(item, index) in years" :key="index" :class="setYearClass(item)" @click="selectYear(item)">
+						{{ item }}
+					</li>
+				</ul>
+				<span class="next" @click="nextYears"></span>
+			</div>
+			<div class="month">
+				<ul>
+					<li :class="setMonthClass(1)" @click="selectMonth(1)">{{ t('to.calendar.month.m1') }}</li>
+					<li :class="setMonthClass(2)" @click="selectMonth(2)">{{ t('to.calendar.month.m2') }}</li>
+					<li :class="setMonthClass(3)" @click="selectMonth(3)">{{ t('to.calendar.month.m3') }}</li>
+					<li :class="setMonthClass(4)" @click="selectMonth(4)">{{ t('to.calendar.month.m4') }}</li>
+					<li :class="setMonthClass(5)" @click="selectMonth(5)">{{ t('to.calendar.month.m5') }}</li>
+					<li :class="setMonthClass(6)" @click="selectMonth(6)">{{ t('to.calendar.month.m6') }}</li>
+					<li :class="setMonthClass(7)" @click="selectMonth(7)">{{ t('to.calendar.month.m7') }}</li>
+					<li :class="setMonthClass(8)" @click="selectMonth(8)">{{ t('to.calendar.month.m8') }}</li>
+					<li :class="setMonthClass(9)" @click="selectMonth(9)">{{ t('to.calendar.month.m9') }}</li>
+					<li :class="setMonthClass(10)" @click="selectMonth(10)">{{ t('to.calendar.month.m10') }}</li>
+					<li :class="setMonthClass(11)" @click="selectMonth(11)">{{ t('to.calendar.month.m11') }}</li>
+					<li :class="setMonthClass(12)" @click="selectMonth(12)">{{ t('to.calendar.month.m12') }}</li>
+				</ul>
+			</div>
+		</div>
+		<!-- 年月选择 结束-->
+		<!-- 周 开始 -->
+		<div v-if="type!=='month'" class="week">
+			<ul>
+				<li>{{ t('to.calendar.week.w0') }}</li>
+				<li>{{ t('to.calendar.week.w1') }}</li>
+				<li>{{ t('to.calendar.week.w2') }}</li>
+				<li>{{ t('to.calendar.week.w3') }}</li>
+				<li>{{ t('to.calendar.week.w4') }}</li>
+				<li>{{ t('to.calendar.week.w5') }}</li>
+				<li>{{ t('to.calendar.week.w6') }}</li>
+			</ul>
+		</div>
+		<!-- 周 结束 -->
+		<!-- 日期 开始 -->
+		<div v-if="type!=='month'" class="day">
+			<ul>
+				<li v-for="(item, index) in days" :key="index" v-tip="item.point && item.point.tooltip ? item.point.tooltip : ''" v-dis="isDisableDay(item)" :class="setDayClass(item)" @click="selectDay(item)">
+					<slot :item="item" :index="index">
+						<span v-if="item.value" class="solar">{{ dayText(item.value) }}</span>
+						<span v-if="item.point && item.point.length > 0" class="to-calendar-points">
+							<to-tag v-for="(ipoint, pointIndex) in item.point" :key="pointIndex" :type="size === 'large' ? 'dot' : ''" :color="pointColor(ipoint.type)" :fillet="size === 'large' ? '' : 'round'">{{ ipoint.count }}</to-tag>
+						</span>
+					</slot>
+				</li>
+			</ul>
+		</div>
+		<!-- 日期 结束 -->
+		<div v-if="legend" class="to-calendar-legend">
+			<slot name="legend">
+				<to-tag type="dot" color="danger">逾期未完成</to-tag>
+				<to-tag type="dot" color="primary">正常进行中</to-tag>
+				<to-tag type="dot" color="success">已完成</to-tag>
+			</slot>
+		</div>
+		<!-- 时间 开始 -->
+		<div v-if="type === 'datetime' || type === 'time'" class="time">
+			<div class="input">
+				<to-input v-model="hour" type="number" mode="none" :placeholder="t('to.calendar.time.hPlaceholder')" width="full" :maxlength="2" :max="maxHour" :min="0" @click.native="showTimeLayer"></to-input>
+			</div>
+			<span class="text">:</span>
+			<span class="input">
+				<to-input v-model="minute" type="number" mode="none" :placeholder="t('to.calendar.time.mPlaceholder')" width="full" :maxlength="2" :max="new Date(max).getMinutes()" :min="0" @click.native="showTimeLayer"></to-input>
+			</span>
+			<span class="text">:</span>
+			<span class="input">
+				<to-input v-model="second" type="number" mode="none" :placeholder="t('to.calendar.time.sPlaceholder')" width="full" :maxlength="2" :max="new Date(max).getSeconds()" :min="0" @click.native="showTimeLayer"></to-input>
+			</span>
+			<to-button color="primary" @click="selectTime">{{ t('to.common.confirm') }}</to-button>
+			<div v-show="timeLayer" class="option">
+				<to-header :title="t('to.calendar.time.title')" color="primary" mode="fill">
+					<to-button mode="none" color="bg" icon="close" @click="closeTimeLayer"></to-button>
+				</to-header>
+				<div class="content">
+					<to-scroll ref="hourScroll" :vitrual="!$phone &&! $pad" bar-display="hover">
+						<to-padding :value="0.5">
+							<to-grid :col="2">
+								<to-grid-item v-for="item in hours" :key="item">
+									<to-card v-dis="isDisableHour(item)" fillet="normal" :color="hour === item ? 'warning' : 'default'" :mode="hour === item ? 'fill' : 'none'" link @click="hour = item;">{{ item }}</to-card>
+								</to-grid-item>
+							</to-grid>
+						</to-padding>
+					</to-scroll>
+					<to-scroll ref="minuteScroll" :vitrual="!$phone &&! $pad" bar-display="hover">
+						<to-padding :value="0.5">
+							<to-grid :col="2">
+								<to-grid-item v-for="item in minutes" :key="item">
+									<to-card v-dis="isDisableMinute(item)" fillet="normal" :color="minute === item ? 'warning' : 'default'" :mode="minute === item ? 'fill' : 'none'" link @click="minute = item;">{{ item }}</to-card>
+								</to-grid-item>
+							</to-grid>
+						</to-padding>
+					</to-scroll>
+					<to-scroll ref="secondScroll" :vitrual="!$phone &&! $pad" bar-display="hover">
+						<to-padding :value="0.5">
+							<to-grid :col="2">
+								<to-grid-item v-for="item in seconds" :key="item">
+									<to-card v-dis="isDisableSecond(item)" fillet="normal" :color="second === item ? 'warning' : 'default'" :mode="second === item ? 'fill' : 'none'" link @click="second = item;">{{ item }}</to-card>
+								</to-grid-item>
+							</to-grid>
+						</to-padding>
+					</to-scroll>
+				</div>
+			</div>
+		</div>
+		<!-- 时间 结束 -->
+	</div>
+</template>
+<script>
+import Locale from 'ai.touchui-vue/src/mixins/locale'
+export default {
+
+	// 注：下列注释中，“当前” 是指控件所处的日期/时间，“现在” 则是指实际所处的日期/时间
+	name: 'ToCalendar',
+	componentName: 'ToCalendar',
+	filters: {
+		addZero: function(str) {
+			return ('00' + str).substr(str.toString().length);
+		}
+	},
+	mixins: [Locale],
+	model: {
+		event: 'change'
+	},
+	props: {
+		// 假期，用于显示假期标识
+		// ['2024-04-03', '2024-04-04', '2024-04-05']
+		holiday: {
+			type: Array,
+			default() {
+				return []
+			}
+		},
+		// 重点日期（比如这天有待办之类的）
+		// [
+		// 	{
+		// 		day: '2024-04-02',
+		// 		tooltip: 'test',
+		// 		count: 1
+		// 	},
+		// 	{
+		// 		day: '2024-04-07',
+		// 		tooltip: 'test',
+		// 		count: 1
+		// 	}
+		// ]
+		point: {
+			type: Array,
+			default() {
+				return []
+			}
+		},
+		type: {
+			type: String,
+			default: ''
+		},
+		// 大小，支持 large
+		size: {
+			type: String,
+			default: ''
+		},
+		// 是否显示 point 提示信息
+		legend: Boolean,
+		value: {
+			type: [String, Date],
+			default() {
+				return ''
+			}
+		},
+		// 范围类型
+		// 开始：''
+		// 结束：'end'
+		rangeType: {
+			type: String,
+			default: ''
+		},
+		range: Boolean,
+		time: {
+			type: String,
+			default: ''
+		},
+		beforeChange: {
+			type: Function,
+			default: null
+		},
+		min: {
+			type: [String, Date, Number],
+			default: ''
+		},
+		max: {
+			type: [String, Date, Number],
+			default: ''
+		}
+	},
+	data() {
+		return {
+
+			// 缓存值
+			changeFrom: 'out',
+			submitValue: '',
+
+			// 现在时间记录
+			curYear: new Date().getFullYear(),
+			curMonth: new Date().getMonth() + 1,
+			curDay: new Date().getDate(),
+
+			// 默认值
+			year: '',
+			month: '',
+			day: '',
+			hour: '',
+			minute: '',
+			second: '',
+
+			// 页面数据
+			years: [],
+			days: [],
+			hours: [],
+			minutes: [],
+			seconds: [],
+
+			// 选择层
+			monthLayer: false,
+			timeLayer: false,
+
+			// 年份切换器
+			tempYear: 0, // 临时当前年，选择年月的时候，在选月份之前，年份是尚未确定的
+			yearsPage: 0,
+			now: new Date(),
+
+			// 范围
+			start: {
+				year: '',
+				month: '',
+				day: ''
+			},
+			end: {
+				year: '',
+				month: '',
+				day: ''
+			}
+		};
+	},
+	computed: {
+		dayText() {
+			const that = this
+			return function(val) {
+				// 凡是假期，都加上标记
+				const dayStr = that.year + '-' + that.addZero(that.month) + '-' + that.addZero(val)
+				if (that.holiday.length > 0 && that.holiday.indexOf(dayStr) > -1) {
+					return that.t('to.calendar.day.holiday')
+				} else {
+					return val
+				}
+			}
+		},
+		pointColor() {
+			return function(val) {
+				if (val === -1) {
+					return 'danger'
+				}
+				if (val === 0) {
+					return 'primary'
+				}
+				if (val === 1) {
+					return 'success'
+				}
+			}
+		},
+		hourz: {
+			get() {
+				return this.addZero(this.hour)
+			},
+			set(val) {
+				this.hour = String(val)
+			}
+		},
+		minutez: {
+			get() {
+				return this.addZero(this.minute)
+			},
+			set(val) {
+				this.minute = String(val)
+			}
+		},
+		secondz: {
+			get() {
+				return this.addZero(this.second)
+			},
+			set(val) {
+				this.second = String(val)
+			}
+		},
+		iValue() {
+			if (this.range) {
+				const start = (this.start.day || this.start.month) ? this.getStringValue(this.start) : ''
+				const end = (this.end.day || this.end.month) ? this.getStringValue(this.end) : ''
+				return `${start},${end}`
+			} else {
+				return this.getStringValue()
+			}
+		},
+		maxHour() {
+			let max = ''
+			if (typeof this.max === 'string') {
+				max = this.max.replace(/-/gi, '/')
+			} else {
+				max = this.max
+			}
+			return new Date(max).getHours()
+		},
+
+		isDisableDay() {
+			return (item) => {
+				if (this.year && this.month) {
+					let dateString = `${this.year}/${this.month}/${Number(item.value) + 1}`
+					let min = ''
+					// 默认使用 2023-03-01 格式时，其 hour = 8 而不是 0，所以要转为 2023/03/01 格式
+					if (typeof this.min === 'string') {
+						min = this.min.replace(/-/gi, '/')
+					} else {
+						min = this.min
+					}
+
+					let max = ''
+					if (typeof this.max === 'string') {
+						max = this.max.replace(/-/gi, '/')
+					} else {
+						max = this.max
+					}
+
+					return new Date(dateString) <= new Date(min) || new Date(dateString) > new Date(max)
+				} else {
+					return false
+				}
+			}
+		},
+
+		isDisableHour() {
+			return (item) => {
+				if (this.year && this.month && this.day) {
+					let dateString = `${this.year}/${this.month}/${this.day} ${Number(item) + 1}:00:00`
+					let min = ''
+					// 默认使用 2023-03-01 格式时，其 hour = 8 而不是 0，所以要转为 2023/03/01 格式
+					if (typeof this.min === 'string') {
+						min = this.min.replace(/-/gi, '/')
+					} else {
+						min = this.min
+					}
+
+					let max = ''
+					if (typeof this.max === 'string') {
+						max = this.max.replace(/-/gi, '/')
+					} else {
+						max = this.max
+					}
+
+					return new Date(dateString) <= new Date(min) || new Date(dateString) > new Date(max)
+				} else {
+					return false
+				}
+			}
+		},
+		isDisableMinute() {
+			return (item) => {
+				if (this.year && this.month && this.day && this.hour) {
+					let dateString = `${this.year}/${this.month}/${this.day} ${this.hour}:${Number(item) + 1}:00`
+					let min = ''
+					// 默认使用 2023-03-01 格式时，其 hour = 8 而不是 0，所以要转为 2023/03/01 格式
+					if (typeof this.min === 'string') {
+						min = this.min.replace(/-/gi, '/')
+					} else {
+						min = this.min
+					}
+
+					let max = ''
+					if (typeof this.max === 'string') {
+						max = this.max.replace(/-/gi, '/')
+					} else {
+						max = this.max
+					}
+
+					return new Date(dateString) < new Date(min) || new Date(dateString) > new Date(max)
+				} else {
+					return false
+				}
+			}
+		},
+		isDisableSecond() {
+			return (item) => {
+				if (this.year && this.month && this.day && this.hour && this.minute) {
+					let dateString = `${this.year}/${this.month}/${this.day} ${this.hour}:${this.minute}:${Number(item) + 1}`
+					let min = ''
+					// 默认使用 2023-03-01 格式时，其 hour = 8 而不是 0，所以要转为 2023/03/01 格式
+					if (typeof this.min === 'string') {
+						min = this.min.replace(/-/gi, '/')
+					} else {
+						min = this.min
+					}
+
+					let max = ''
+					if (typeof this.max === 'string') {
+						max = this.max.replace(/-/gi, '/')
+					} else {
+						max = this.max
+					}
+
+					return new Date(dateString) < new Date(min) || new Date(dateString) > new Date(max)
+				} else {
+					return false
+				}
+			}
+		}
+	},
+	watch: {
+		value(val) {
+			this.setData()
+			if (this.changeFrom === 'out') {
+				this.submitValue = val
+			}
+		},
+		submitValue(val) {
+			this.$emit('change', val)
+			this.changeFrom = 'in'
+			setTimeout(() => {
+				this.changeFrom = 'out'
+			}, 100);
+		},
+		min(val) {
+			this.min = val
+		},
+		max(val) {
+			this.max = val
+		},
+		point: {
+			handler() {
+				this.setDayData()
+			},
+			deep: true
+		}
+	},
+	created() {
+		this.setData()
+	},
+	methods: {
+		initCalendar() {
+			if (this.type === 'time') {
+				this.showTimeLayer()
+			} else {
+				this.timeLayer = false
+			}
+		},
+		// 根据 obj 获取当前时间值，入参格式形如：
+		// arg = {
+		// 	year: '2022',
+		// 	month: '02',
+		// 	day: '22'
+		// }
+		getValue(arg) {
+			return new Date(`${arg.year || this.year}/${arg.month || this.month}/${arg.day || this.day || '01'}`).getTime()
+		},
+
+		// 获取格式化为字符串后的日期
+		getStringValue(arg = {}) {
+			const year = arg.year || this.year
+			const month = arg.month || this.month
+			const day = arg.day || this.day
+			const hour = arg.hour || this.hourz
+			const minute = arg.minute || this.minutez
+			const second = arg.second || this.secondz
+			const imonth = `${year}-${this.addZero(month)}`
+			const iday = day ? `${this.addZero(day)}` : '01'
+			const itime = `${hour}:${minute}:${second}`
+			if (this.type === 'month') {
+				return imonth
+			} else if (this.type === 'datetime' || this.type === 'time') {
+				return `${imonth}-${iday} ${itime}`
+			} else {
+				return `${imonth}-${iday}`
+			}
+		},
+
+		// 获取格式化为对象的日期
+		getObjectValue(str) {
+			const date = new Date(str)
+			// eslint-disable-next-line no-debugger
+			if (this.isDate(str) && str) {
+				return {
+					year: date.getFullYear(),
+					month: date.getMonth() + 1,
+					day: date.getDate()
+				}
+			} else if (this.isMonth(str) && str) {
+				return {
+					year: date.getFullYear(),
+					month: date.getMonth() + 1,
+					day: ''
+				}
+			} else {
+				return {
+					year: '',
+					month: '',
+					day: ''
+				}
+			}
+		},
+
+		// 数据设置
+		setData() {
+			this.setCurrent()
+			this.setYearData()
+			this.setDayData()
+			this.setTimeData()
+		},
+		setCurrent() {
+			this.year = ''
+			this.month = ''
+			this.day = ''
+			if (this.range) {
+				let arr = this.value.split(',')
+				const start = arr[0]
+				const end = arr[1]
+
+				if (!start || this.isDate(start) || this.isMonth(start)) {
+					this.start = this.getObjectValue(start)
+				}
+				if (!end || this.isDate(end) || this.isMonth(end)) {
+					this.end = this.getObjectValue(end)
+				}
+				if (this.rangeType === 'end') {
+					this.year = this.year || new Date().getFullYear()
+					if ((this.end.day || this.end.month) && this.isAnyDate(this.getStringValue(this.end))) {
+						if (this.type === 'month') {
+							if (this.start.year === this.end.year) {
+								this.year = this.end.year + 1
+							} else {
+								this.year = this.end.year
+							}
+							this.month = 1
+						} else {
+							if (this.start.month === this.end.month) {
+								if (Number(this.month) === 12) {
+									this.year = this.end.year + 1
+									this.month = 1
+								} else {
+									this.month = this.end.month + 1
+								}
+							} else {
+								this.month = this.end.month
+							}
+						}
+					} else {
+						this.month = this.month || new Date().getMonth() + 2
+					}
+					if (this.month > 12) {
+						this.month = 1
+						this.year += 1
+					}
+				} else {
+					if ((this.start.day || this.start.month) && this.isAnyDate(this.getStringValue(this.start))) {
+						this.year = this.start.year
+						this.month = this.start.month
+					} else {
+						this.year = this.year || new Date().getFullYear()
+						this.month = this.month || new Date().getMonth() + 1
+					}
+				}
+			} else {
+				if (this.value && !isNaN(new Date(this.value))) {
+					this.year = new Date(this.value).getFullYear()
+					this.month = new Date(this.value).getMonth() + 1
+					this.day = new Date(this.value).getDate()
+					this.hour = String(new Date(this.value).getHours())
+					this.minute = String(new Date(this.value).getMinutes())
+					this.second = String(new Date(this.value).getSeconds())
+				} else if (this.value && isNaN(new Date(this.value)) && !isNaN(new Date(this.value.replace(/-/g, '/')))) {
+					const value = this.value.replace(/-/g, '/')
+					this.year = new Date(value).getFullYear()
+					this.month = new Date(value).getMonth() + 1
+					this.day = new Date(value).getDate()
+					this.hour = String(new Date(value).getHours())
+					this.minute = String(new Date(value).getMinutes())
+					this.second = String(new Date(value).getSeconds())
+				} else {
+					this.year = new Date().getFullYear()
+					this.month = new Date().getMonth() + 1
+					this.day = null
+					this.hour = '0'
+					this.minute = '0'
+					this.second = '0'
+				}
+			}
+		},
+		setYearData(year) {
+			year = year || this.year
+			let arr = [];
+			for (let i = 0; i < 10; i++) {
+				arr.push(Math.floor(year / 10) * 10 + i)
+			}
+			this.years = arr;
+		},
+		setDayData() {
+			let year = new Date(this.value).getFullYear()
+			let month = new Date(this.value).getMonth() + 1
+			let day = new Date(this.value).getDate()
+			const that = this
+			if (this.year === year && this.month === month) {
+				this.day = day
+			} else {
+				this.day = null
+			}
+			// 计算本月天数
+			const dayCount = this.getMonthDays(`${this.year}/${this.month}/1`);
+
+			// 计算前面有几天应该置空
+			const thisMonthFirstDay = new Date(`${this.year}/${this.month}/1`);
+			thisMonthFirstDay.setMonth(thisMonthFirstDay.getMonth(), 1);
+			const emptyLength = new Date(thisMonthFirstDay.setMonth(thisMonthFirstDay.getMonth(), 1)).getDay();
+
+			// 设置天数
+			this.days = (function() {
+				let arr = [];
+				for (let i = 0; i < emptyLength; i++) {
+					arr.push({});
+				}
+				for (let i = 1; i < dayCount + 1; i++) {
+					let obj = {};
+					obj.value = i;
+
+					// 星期天
+					if ((i + emptyLength) % 7 === 1) {
+						obj.sun = true;
+					}
+
+					// 星期六
+					if ((i + emptyLength) % 7 === 0) {
+						obj.sat = true;
+					}
+
+					// 重点日期
+					const point = that.point.filter((item)=>{return item.day === `${that.year}-${that.addZero(that.month)}-${that.addZero(i)}`})
+					obj.point = point
+
+					arr.push(obj);
+				}
+				return arr;
+			})();
+		},
+		setTimeData() {
+			this.hours = this.genNumbers(0, 23)
+			this.minutes = this.genNumbers(0, 59)
+			this.seconds = this.genNumbers(0, 59)
+			const hour = String(new Date(this.value).getHours())
+			const minute = String(new Date(this.value).getMinutes())
+			const second = String(new Date(this.value).getSeconds())
+			if (this.time) {
+				const arr = this.time.split(':')
+				this.hour = arr[0] || '0'
+				this.minute = arr[1] || '0'
+				this.second = arr[2] || '0'
+			}
+			if (!isNaN(hour) && !isNaN(minute) && !isNaN(second)) {
+				this.hour = hour
+				this.minute = minute
+				this.second = second
+			}
+		},
+
+		// 选择事件
+		selectYear(item) {
+			this.year = item
+		},
+		selectMonth(item) {
+			if (item) {
+				if (this.range && this.type === 'month') {
+					let start = {}
+					let end = {}
+					if (!this.start.month && !this.end.month) {
+						start.year = this.year
+						start.month = item
+						start.day = ''
+					}
+					if (this.start.month) {
+						if (this.end.month) {
+							start.year = this.year
+							start.month = item
+							start.day = ''
+							end.year = ''
+							end.month = ''
+							end.day = ''
+						} else {
+							if (this.getValue(this.start) > this.getValue({month: item})) {
+								end.year = this.start.year
+								end.month = this.start.month
+								end.day = ''
+								start.year = this.year
+								start.month = item
+								start.day = ''
+							} else {
+								start = JSON.parse(JSON.stringify(this.start))
+								end.year = this.year
+								end.month = item
+								end.day = ''
+							}
+						}
+					}
+					this.start = JSON.parse(JSON.stringify(start))
+					this.end = JSON.parse(JSON.stringify(end))
+					this.submitValue = this.iValue
+				} else {
+					if (this.type === 'month') {
+						this.$emit('beforeChange', this.getStringValue({
+							month: item
+						}))
+					}
+					if (this.beforeChange) {
+						const fn = this.beforeChange(this.getStringValue({
+							month: item
+						}))
+						if (fn && fn.then) {
+							fn.then(flag => {
+								this.selectMonthAction(item)
+							}).catch((e)=>{})
+						} else {
+							// 是同步方法，则返回为 true 执行
+							if (fn) {
+								this.selectMonthAction(item)
+							}
+						}
+					} else {
+						this.selectMonthAction(item)
+					}
+				}
+			}
+		},
+		selectMonthAction(item) {
+			this.month = item;
+			this.monthLayer = false;
+			this.setDayData();
+			if (this.type === 'month') {
+				this.day = 1
+				this.submitValue = this.iValue
+			}
+		},
+		selectDay(item) {
+			if (item.value) {
+				if (this.range) {
+					let start = {}
+					let end = {}
+					if (!this.start.day && !this.end.day) {
+						start.year = this.year
+						start.month = this.month
+						start.day = item.value
+					}
+					if (this.start.day) {
+						if (this.end.day) {
+							start.year = this.year
+							start.month = this.month
+							start.day = item.value
+							end.year = ''
+							end.month = ''
+							end.day = ''
+						} else {
+							if (this.getValue(this.start) > this.getValue({day: item.value})) {
+								end.year = this.start.year
+								end.month = this.start.month
+								end.day = this.start.day
+								start.year = this.year
+								start.month = this.month
+								start.day = item.value
+							} else {
+								start = JSON.parse(JSON.stringify(this.start))
+								end.year = this.year
+								end.month = this.month
+								end.day = item.value
+							}
+						}
+					}
+					this.start = JSON.parse(JSON.stringify(start))
+					this.end = JSON.parse(JSON.stringify(end))
+					this.submitValue = this.iValue
+				}
+				else {
+					let val = this.getStringValue({
+						day: item.value
+					})
+					if (!this.type || this.type === 'date') {
+						this.$emit('beforeChange', val)
+						if (this.beforeChange) {
+							const fn = this.beforeChange(this.getStringValue({
+								day: item.value
+							}))
+
+							if (fn && fn.then) {
+								fn.then(flag => {
+									this.selectDayAction(item)
+								})
+							} else {
+								// 是同步方法，则返回为 true 执行
+								if (fn) {
+									this.selectDayAction(item)
+								}
+							}
+						} else {
+							this.selectDayAction(item)
+						}
+					} else {
+						this.selectDayAction(item)
+					}
+				}
+			}
+		},
+		selectDayAction(item) {
+			this.day = item.value
+			if (!this.type || this.type === 'date') {
+				this.submitValue = this.iValue
+			}
+		},
+		selectTime() {
+			if (!this.day && !this.min && !this.max) {
+				this.day = new Date().getDate()
+			} else if (!this.day && this.min && this.max) {
+				this.$tip.error(this.t('to.calendar.tip.error.selectDate'))
+				return
+			}
+			this.$emit('beforeChange', this.getStringValue())
+			if (this.beforeChange) {
+
+				const fn = this.beforeChange(this.getStringValue())
+
+				if (fn && fn.then) {
+					fn(this.getStringValue()).then(flag => {
+						this.selectTimeAction()
+					})
+				} else {
+					// 是同步方法，则返回为 true 执行
+					if (fn) {
+						this.selectTimeAction()
+					}
+				}
+			} else {
+				this.selectTimeAction()
+			}
+		},
+		selectTimeAction() {
+			this.timeLayer = false
+			this.submitValue = this.iValue
+			this.$emit('close')
+		},
+		// 样式设置
+		setYearClass(item) {
+			return {
+				cur: this.curYear === item,
+				on: this.year === item
+			};
+		},
+		setMonthClass(item) {
+			let arr = []
+			if (this.year === this.curYear && this.curMonth === item) {
+				arr.push('cur')
+			}
+			if (this.range && this.type === 'month') {
+				if (this.year === this.start.year && item === this.start.month) {
+					if (this.end.month) {
+						arr.push('start')
+					} else {
+						arr.push('on')
+					}
+				}
+				if (this.year === this.end.year && item === this.end.month) {
+					arr.push('end')
+				}
+				const value = this.getValue({
+					year: this.year,
+					month: item,
+					day: 1
+				})
+				if ((value > this.getValue(this.start) || value === this.getValue(this.start)) && value < this.getValue(this.end)) {
+					arr.push('range')
+				}
+			} else {
+				if (this.month === item) {
+					arr.push('on')
+				}
+			}
+
+			if (item && (this.min || this.max)) {
+				let curData = this.year + '/' + (item > 9 ? item : '0' + item) + '/01'
+				let date = new Date()
+				let hour = date.getHours()
+				let minute = date.getMinutes()
+				let second = date.getSeconds()
+				curData = curData + ' ' + (hour > 9 ? hour : '0' + hour) + ':' + (minute > 9 ? minute : '0' + minute) + ':' + (second > 9 ? second : '0' + second)
+				let curTime = new Date(curData).getTime()
+				let min = new Date(this.min).getTime()
+				let maxTime = new Date(this.max).getTime()
+				let cur = curData.split(' ')[0]
+				let year = new Date(this.max).getFullYear()
+				let month = new Date(this.max).getMonth() + 1
+				let day = new Date(this.max).getDate()
+				let max = year + '/' + (month > 9 ? month : '0' + month) + '/' + (day > 9 ? day : '0' + day)
+				if (min === maxTime && cur !== max) {
+					if (curTime > maxTime) {
+						arr.push('to-dis')
+					}
+					if (curTime < min) {
+						arr.push('to-dis')
+					}
+				} else if (min !== maxTime && cur !== max) {
+					if (curTime > maxTime) {
+						arr.push('to-dis')
+					}
+					if (curTime < min) {
+						arr.push('to-dis')
+					}
+				}
+			}
+			return arr;
+		},
+		setDayClass(item) {
+			let arr = []
+			if (item.sat) {
+				arr.push('sat')
+			}
+			if (item.sun) {
+				arr.push('sun')
+			}
+			if (this.year === this.curYear && this.month === this.curMonth && this.curDay === item.value) {
+				arr.push('cur')
+			}
+			if (this.range) {
+				if (this.year === this.start.year && this.month === this.start.month && item.value === this.start.day) {
+					if (this.end.day) {
+						arr.push('start')
+					} else {
+						arr.push('on')
+					}
+				}
+				if (this.year === this.end.year && this.month === this.end.month && item.value === this.end.day) {
+					arr.push('end')
+				}
+				const value = this.getValue({
+					year: this.year,
+					month: this.month,
+					day: item.value
+				})
+				if (value > this.getValue(this.start) && value < this.getValue(this.end)) {
+					arr.push('range')
+				}
+			} else {
+				if (this.day === item.value) {
+					arr.push('on')
+				}
+			}
+			return arr;
+		},
+
+		// 界面控制
+		nextMonth() {
+			if (this.month === 12) {
+				this.year += 1;
+				this.month = 1;
+			} else {
+				this.month += 1;
+			}
+			this.setDayData();
+		},
+		lastMonth() {
+			if (this.month === 1) {
+				this.year -= 1;
+				this.month = 12;
+			} else {
+				this.month -= 1;
+			}
+			this.setDayData();
+		},
+		lastYears() {
+			this.yearsPage -= 1;
+			this.setYearData(this.year + 10 * this.yearsPage);
+		},
+		nextYears() {
+			this.yearsPage += 1;
+			this.setYearData(this.year + 10 * this.yearsPage);
+		},
+		nextYear() {
+			this.year += 1
+			let year = new Date(this.value).getFullYear()
+			let month = new Date(this.value).getMonth() + 1
+			let day = new Date(this.value).getDate()
+			if (this.year === year && this.month === month) {
+				this.day = day
+			} else {
+				this.day = null
+			}
+		},
+		lastYear() {
+			this.year -= 1
+			let year = new Date(this.value).getFullYear()
+			let month = new Date(this.value).getMonth() + 1
+			let day = new Date(this.value).getDate()
+			if (this.year === year && this.month === month) {
+				this.day = day
+			} else {
+				this.day = null
+			}
+		},
+		toggleMonthSelector() {
+			if (!this.monthLayer) {
+				// 打开
+				this.monthLayer = true;
+				this.tempYear = this.year;
+				this.setYearData(this.year);
+			} else {
+				// 关闭
+				this.monthLayer = false;
+			}
+		},
+		showTimeLayer() {
+			this.timeLayer = true;
+			this.$nextTick(function() {
+				this.$refs.hourScroll.adjust()
+				this.$refs.minuteScroll.adjust()
+				this.$refs.secondScroll.adjust()
+			})
+		},
+		closeTimeLayer() {
+			if (this.type === 'time') {
+				this.timeLayer = false
+				this.$emit('close')
+			} else {
+				this.timeLayer = false
+			}
+		},
+
+		// 内置方法
+		// 验证日期格式
+		isDate(date) {
+			const DateExp = /^[1-2][0-9]{3}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])$/
+			if (DateExp.test(date)) {
+				return (new Date(date).getDate() === Number(date.substring(date.length - 2)))
+			} else {
+				return false
+			}
+		},
+		isMonth(date) {
+			const DateExp = /^[1-2][0-9]{3}-(0[1-9]|1[0-2])$/
+			if (DateExp.test(date)) {
+				return (new Date(date + '-01').getDate() === Number(1))
+			} else {
+				return false
+			}
+		},
+		isDatetime(time) {
+			if (typeof time === 'string') {
+				var reg = /^(\d{1,4})(-|\/)(\d{2})\2(\d{1,2}) (\d{2}):(\d{2}):(\d{2})$/;
+				var r = time.match(reg);
+				if (r == null) return false;
+				var d = new Date(r[1], r[3] - 1, r[4], r[5], r[6], r[7]);
+				return (d.getFullYear() === Number(r[1]) && (d.getMonth() + 1) === Number(r[3]) && d.getDate() === Number(r[4]) && d.getHours() === Number(r[5]) && d.getMinutes() === Number(r[6]) && d.getSeconds() === Number(r[7]));
+			} else {
+				return true
+			}
+		},
+		isAnyDate(val) {
+			if ((this.isDate(val) && (this.type === '')) || (this.isDatetime(val) && this.type === 'datetime') || (this.isMonth(val) && this.type === 'month')) {
+				return true
+			} else {
+				return false
+			}
+		},
+
+		// 获取一个月的天数
+		getMonthDays(date) {
+			const thisMonthFirstDay = new Date(date);
+			const nextMonthFirstDay = new Date(date);
+			thisMonthFirstDay.setMonth(thisMonthFirstDay.getMonth(), 1);
+			nextMonthFirstDay.setMonth(nextMonthFirstDay.getMonth() + 1, 1);
+			return (nextMonthFirstDay.valueOf() - thisMonthFirstDay.valueOf()) / (1000 * 60 * 60 * 24);
+		},
+		// 格式化日期
+		formatDate(date, fmt) {
+			if (!fmt) {
+				if (this.type === 'datetime') {
+					fmt = 'yyyy-MM-dd HH:mm:ss'
+				} else {
+					fmt = 'yyyy-MM-dd'
+				}
+			}
+			if (/(y+)/.test(fmt)) {
+				fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
+			}
+			const o = {
+				'M+': date.getMonth() + 1,
+				'd+': date.getDate(),
+				'H+': date.getHours(),
+				'm+': date.getMinutes(),
+				's+': date.getSeconds()
+			};
+			for (const k in o) {
+				if (new RegExp('(' + k + ')').test(fmt)) {
+					const str = o[k] + '';
+					fmt = fmt.replace(RegExp.$1, RegExp.$1.length === 1 ? str : this.addZero(str));
+				}
+			}
+			return fmt;
+		},
+		// 生成循环数字
+		genNumbers(min, max, step = 1) {
+			let arr = []
+			for (let i = min; i <= max; i += step) {
+				arr.push(String(i))
+			}
+			return arr
+		},
+		// 给个位数的数字前面补 0
+		addZero(str) {
+			return ('00' + str).substr(str.toString().length);
+		}
+	}
+};
+</script>