uniProject/components/dialog/dateSelectDl.vue

<template>
	<uni-popup ref="commonPopup" :animation="false" :is-mask-click="false"
	 mask-background-color="rgba(0, 0, 0, 0.4)">
	 <view class="phone-common-dialog">
		<view class="common-body-box">
			<view class="common-title">请选择日期</view>
			<view class="common-content" :class="dialogContentClass">
				<uni-datetime-picker v-model="infoDate.selected" type="daterange" @change="dateConfirm" />
			</view>
			<view class="common-btn-box">
				<view class="confirm-btn" @click="confirmBtn">确认</view>
			</view>
		</view>
	 </view>
	</uni-popup>
</template>

<script setup>
	import { ref,reactive } from 'vue';
	const props = defineProps({
	  title: {
	    type: String,
	    default: ''
	  },
	  content: {
	    type: String,
		require: true,
	    default: ''
	  },
	  dialogContentClass: {
	    type: String,
	  	require: true,
	    default: 'content-center-class'
	  },
	  notBtn: {
	    type: String,
	  	require: true,
	    default: '取消'
	  },
	  okBtn: {
	    type: String,
	  	require: true,
	    default: '确认'
	  },
	});
	const commonPopup = ref(null); // 索引
	const $emit = defineEmits(['confirm-btn', 'date-reset'])
	
	/**
	 * 获取任意时间
	 */
	function getDate(date, AddDayCount = 0) {
		if (!date) {
			date = new Date()
		}
		if (typeof date !== 'object') {
			date = date.replace(/-/g, '/')
		}
		const dd = new Date(date)
	
		dd.setDate(dd.getDate() + AddDayCount) // 获取AddDayCount天后的日期
	
		const y = dd.getFullYear()
		const m = dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1 // 获取当前月份的日期，不足10补0
		const d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate() // 获取当前几号，不足10补0
		return {
			fullDate: y + '-' + m + '-' + d,
			year: y,
			month: m,
			date: d,
			day: dd.getDay()
		}
	}
	const infoDate = reactive({
		lunar: true,
		range: true,
		insert: false,
		selected: [],
		valueData: null
	})
	
	function dateConfirm(data) {
		infoDate.selected = data;
	}
	
	// 打开弹窗
	function handleShow(data) {
		if (data) {
			infoDate.selected = data;
		}
		commonPopup.value.open();
	}
	// 取消
	function handleClose() {
		commonPopup.value.close();
	}
	// 确认
	function confirmBtn(){
		if (!infoDate.selected.lenth||infoDate.selected.length>1) {
			$emit('confirm-btn',infoDate.selected);
			commonPopup.value.close();
		} else {
			uni.showToast({
				title: '请选择日期',
				icon: 'none'
			})
		}
	}
	function handleReset() {
		$emit('date-reset')
		infoDate.selected = []
		handleClose();
	}
	defineExpose({
			handleShow,
			handleClose
		})
</script>

<style>
</style>