emis-app/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="showTools" @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">
		<u-calendar title="请选择日期范围" :minDate="minDate" :monthNum="monthNum" color="#B12D29" :mode="mode" rowHeight="90" closeOnClickOverlay :show="showCladar" :defaultDate="value" @confirm="handleClaOk" @close="handleSwitchCladar"
		></u-calendar>
	</view>
	
</template>

<script>
	import {  } from "@/common/untool"
	import dayjs from "dayjs"
	const formatStr = 'YYYY-MM-DD'
	
	export default {
		computed: {
			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)
					}
				}
				return val && (val.length > 1 ? val.join("~") : val[0])
			},
		},
		props: {
			value: {
				default () {
					return ''
				}
			},
			placeholder:{
				default () {
					return '请选择日期'
				}
			},
			fontSize: {
				default () {
					return 26
				}
			},
			minDate: {
				default() {
					return dayjs().subtract(12, 'months').format(`${formatStr}`)
				}
			},
			monthNum: {
				default() {
					return 24
				}
			},
			mode: {
				default() {
					return 'range' // single | multiple | range
				}
			},
			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.handleSwitchCladar()
			},
			handleChange(val){
				val[0] = dayjs(val[0]).format(`${formatStr} 00:00:00`)
				val[1] = dayjs(val[1]).format(`${formatStr} 23:59:59`)
				this.$emit('change', val)
				this.$emit('update:value', val) 
			},
			handleClaOk(res){
				const ary = Object.values(res)
				const val = [ary[0], ary[ary.length-1]]
				this.handleChange(val)
				this.handleSwitchCladar()
			},
			handleSwitchCladar() {
				this.showCladar = !this.showCladar
			},
			handleToolsRangChange(val) {
				if(val == -1) {
					this.handleSwitchCladar()
				} else {
					let sltRang = this.toolsRangesList.filter(t=> t.val == val)[0].range
					this.handleChange(sltRang)
				}
			}
		}
	}
</script>

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