hlt_app/components/DateSelect/CustomDateSelect.vue

<!-- 自定义样式的时间范围选择器 -->
<!-- 使用插槽实现样式修改 -->
<template>
	<view class="custom-date-select">
		<uni-datetime-picker @change="handleSelect" v-model="dateRange" type="daterange">
			<view class="content">
				<view class="left date-box">
					<view class="date">
						{{dateRange[0]}}
					</view>
					<view class="icon">
						<image style="width: 100%; height: 100%;" src="/static/images/components/dateSelect/time.svg" mode="scaleToFill"></image>
					</view>
				</view>
				<view class="middle">
					-
				</view>
				<view class="right date-box">
					<view class="date">
						{{dateRange[1]}}
					</view>
					<view class="icon">
						<image style="width: 100%; height: 100%;" src="/static/images/components/dateSelect/time.svg" mode="scaleToFill"></image>
					</view>
				</view>
			</view>
		</uni-datetime-picker>
	</view>
</template>

<script>
	import {
		defineComponent,
		watch,
		ref
	} from 'vue';
	import moment from 'moment';
	const props = {
		range: {
			type: Array,
			default: ()=>[]
		}
	}
	export default defineComponent({
		props,
		setup(props, {
			emit
		}) {
			const dateRange = ref([moment().subtract(1,'days').format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')])
			watch(
				() => props.range,
				(newVal) => {
					if(newVal && newVal.length){
						dateRange.value = newVal
					}
				}, {
					immediate: true
				}
			)
			const handleSelect = () => {
				emit('dateChange', dateRange.value)
			}
			return {
				dateRange,
				handleSelect
			}
		}
	})
</script>

<style lang="scss" scoped>
	.custom-date-select{
		margin-top: 20rpx;
		
		::v-deep .content{
			display: flex;
			align-items: center;
			justify-content: space-between;
			
			.date-box{
				padding: 20rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: calc(46% - 40rpx);
				border-radius: 12rpx;
				background: #FFFFFF;
				
				.icon{
					width: 32rpx;
					height: 32rpx;
				}
			}
		}
	}
</style>