emis-sapp/components/tpx-date-input/tpx-date-input.vue

<template>
	<view @click="handleSelectDate" class="pos-rlt">
		<u-input :placeholder="placeholder" :fontSize="fontSize" :modelValue="inputValue"
			:custom-style="`border-radius: 10rpx;padding: 11rpx 20rpx;${customStyle};`" 
			readonly="true"
		>
			<template v-slot:suffix>
				<u-icon name="calendar" :size="fontSize*1.5"></u-icon>
			</template>
		</u-input>
		<view class="pos-abt-all">
			<view v-if="showRangeTools" @click.stop="">
				<tpx-select :list="toolsRangesList" v-model:value="rangeVal" mode="drop" @onChange="handleToolsRangChange">
					<view :style="`height: 64rpx;`" ></view>
				</tpx-select>
			</view>
		</view>
	</view>
	<!-- 日历 -->
	<view v-if="showCladar">
		<uni-datetime-picker ref="unDateTimePckRef" @maskClick="handleClaClose" 
			:start="minDate" :end="maxDate" v-model="proxyValue"
			:type="mode" @change="handleClaValChange"
			:placeholder="placeholder"
		>
			<!-- 使用自定义显示 -->
			<view></view>
		</uni-datetime-picker>
	</view>
	
</template>

<script>
	// uni-datetime-picker 插件地址：  https://ext.dcloud.net.cn/plugin?id=3962
	import dayjs from "dayjs"
	const formatStr = 'YYYY-MM-DD'
	
	export default {
		computed: {
			proxyValue: {
				get() {
					return this.value
				}
			},
			showRangeTools(){
				return this.mode?.indexOf("range") > -1 && this.showTools
			},
			inputValue() {
				let val = this.value
				if(Array.isArray(val)) {
					val = [].concat(val)
					if(val.length > 1) {
						val[0] = dayjs(val[0]).format(formatStr)
					}
					if(val.length > 1) {
						val[1] = dayjs(val[1]).format(formatStr)
					}
				}
				// 范围是数组，单个是字符串
				if(this.mode?.indexOf("range") > -1) {
					val = val && (val.length > 1 ? val.join("~") : val[0])
				}
				return val
			},
		},
		props: {
			value: {
				default () {
					return ''
				}
			},
			placeholder:{
				default () {
					return '请选择日期'
				}
			},
			fontSize: {
				default () {
					return 28
				}
			},
			minDate: {
				default() {
					return dayjs().subtract(12, 'months').format(`${formatStr}`)
				}
			},
			maxDate: {
				default() {
					return dayjs().add(12, 'months').format(`${formatStr}`)
				}
			},
			mode: {
				default() {
					return 'daterange' // datetime | date | datetimerange | daterange
				}
			},
			customStyle:{
				default () {
					return ''
				}
			},
			showTools:{
				default () {
					return true
				}
			},
			toolsRangesList: {
				default () {
					let today = dayjs().format(`${formatStr}`),
					yesterday = dayjs().subtract(1, 'days').format(`${formatStr}`),
					lastWeek = dayjs().subtract(7, 'days').format(`${formatStr}`)
					return [
						{ title: '今日', val: '1', range: [ today, today ] },
						{ title: '昨日', val: '2', range: [yesterday, yesterday] },
						{ title: '最近一周', val: '3', range: [lastWeek, today]  },
						{ title: '自定义', val: '-1', range: [] },
					]
				}
			},
			placeholderStyle:{
				default () {
					return ''
				}
			},
		},
		data() {
			return {
				showCladar: false,
				rangeVal: ''
			}
		},
		created() {

		},
		onHide() {

		},
		unmounted() {},
		
		methods: {
			handleSelectDate() {
				this.handleClaShow()
			},
			handleChange(val){
				if(Array.isArray(val)) {
					// 补全 时间戳
					if(val[0].indexOf(":") == -1) {
						val[0] = dayjs(val[0]).format(`${formatStr} 00:00:00`)
					}
					if(val[1].indexOf(":") == -1) {
						val[1] = dayjs(val[1]).format(`${formatStr} 23:59:59`)
					}
				}
				this.$emit('change', val)
				this.$emit('update:value', val) 
			},
			handleClaValChange(val) {
				this.handleChange(val)
				this.handleClaClose()
			},
			handleClaClose(res){
				this.showCladar = false
			},
			handleClaShow() {
				this.showCladar = true
				// 手动唤起日期事件
				setTimeout(()=> {
					this.$refs.unDateTimePckRef.show()
				}, 1000)
			},
			handleToolsRangChange(val) {
				this.rangeVal = val
				if(val == -1) {
					this.handleClaShow()
				} else {
					let sltRang = this.toolsRangesList.filter(t=> t.val == val)[0].range
					this.handleChange(sltRang, )
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	
</style>