利用uniapp的picker封装预约时间的组件

实例图

知识点

picker多列选择器

1.mode为multiSelector多列选择器

2.@columnchange 某一列的改变

<picker v-if="multiArray.length>0" 
	:style="{ backgroundColor: 'white', color: 'black' }"
	mode="multiSelector"
	@change="bindChange"
	@columnchange="bindMultiPickerColumnChange"
	:value="multiIndex"
	:range="multiArray">
		<input :disabled="true" placeholder-style="color:#bbbbbb" :placeholder="placeholder" :value="value_text" />
</picker>

vue3语法的props emit

1.props

defineProps先从vue中引入

const props = defineProps({
	timestamp: {
		type: Number,
		default: 0
	},
}）

2.emit

(1).defineEmits用于在setup中注册自定义事件，是一个宏函数，使用时无需导入

(2).defineEmits接受一个数组，元素为自定义事件名

const emit=defineEmits(['dtPickerChanged'])

(3).defineEmit返回一个触发器，用于触发事件，第一个参数是具体事件，第二个是传递的值

emit('dtPickerChanged',timeStamp)

父组件

子组件完整代码

<template>
	<view class="uni-list-cell-db">
		<picker v-if="multiArray.length>0" :style="{ backgroundColor: 'white', color: 'black' }" mode="multiSelector" @change="bindChange" @columnchange="bindMultiPickerColumnChange" :value="multiIndex" :range="multiArray">
			<!-- <view class="uni-input">{{multiArray[0][multiIndex[0]]}} {{multiArray[1][multiIndex[0]]}}:{{multiArray[2][multiIndex[0]]}}</view> -->
			<input :disabled="true" placeholder-style="color:#bbbbbb" :placeholder="placeholder"
				:value="value_text" />
		</picker>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		onBeforeMount,
		defineProps,
		toRaw,
		watch
	} from 'vue'
	const props = defineProps({
		timestamp: {
			type: Number,
			default: 0
		},
		emptyText: {
			type: String,
			default: ''
		},
		placeholder:{
			type: String,
			default:'请选择时间'
		}
	})
	// 多列选择器
	const multiArrayFull=ref([])
	const multiArray=ref([])
	let multiIndex=ref([0, 0, 0])
	const value_text = ref('')
	// 当前值
	let self_days = null
	let self_days_text=''
	let self_hours=null
	let self_seconds=null
	// 当前时间
	const now= new Date()
	const emit=defineEmits(['dtPickerChanged'])
	onBeforeMount(()=>{
		timestampToString(props.timestamp)
		buildMultiSelectData()
	})
	// 构建多列选择器的数据
	const buildMultiSelectData=()=>{
			const days = []
			const days_text = []
			// 最近20天			
			// 利用自动格式化函数来格式化日期的
			for(let i=1; i<20; i++){
				const date = now.getTime() + i * 24 * 60 * 60 * 1000;
				// const mmdd = formatDateAuto(date, 'MM-dd').replace('-','月')
				const mmdd = formatDateAuto(date, 'MM-dd')
				const yymmdd = formatDateAuto(date, 'yyyy-MM-dd')
				let day_text= ''
				if(i == 0){
						day_text += ' (今天)';
				  }
					if(i == 1){
						day_text += ' (明天)';
					}
					if(i == 2){
						day_text += ' (后天)';
					}
				// const formattedDate = `${mmdd}日${day_text}`;
				const formattedDate = `${mmdd}${day_text}`;
				days_text.push(formattedDate)
				days.push(yymmdd)
			}
			const hours = ['00', '01','02', '03', '04','05','06','07', '08', '09', '10',
					'11', '12','13', '14','15','16','17','18','19','20','21','22','23']
			const seconds =[
				'00', '01','02', '03', '04','05','06', '07', '08', '09', '10',
				'11', '12','13', '14','15','16','17','18','19','20',
				'21', '22','23', '24','25','26','27','28','29','30',
				'31', '32','33', '34','35','36','37','38','39','40',
				'41', '42','43', '44','45','46','47','48','49','50',
				'51', '52','53', '54','55','56','57','58','59'
			]
			const range =[];
			range[0]= days_text;
			range[1]= hours;
			range[2]= seconds;
			console.log(range,"range")
			multiArrayFull.value = [days,hours,seconds]
			multiArray.value = range
			// value_text.value =`${days_text[0]} ${hours[8]}:${seconds[0]}`
			// 当前数组
			self_days = days
			self_days_text = days_text
			self_hours = hours
			self_seconds = seconds
			
	}
	const timestampToString =(nd)=>{
		if(!nd) return
		const date_text = formatDateAuto(nd, 'MM-dd HH:mm');
		value_text.value = date_text
	}
	const bindMultiPickerColumnChange=(evt)=>{
		// console.log('多列选择器列选项evt=',evt)
	}
	const bindChange=(evt)=>{
		// console.log('选择器evt=',evt)
		// 选择后多选择索引的值
		multiIndex.value=evt.detail.value
		const indexArr = toRaw(multiIndex.value)
		const multiArr = toRaw(multiArray.value)
		value_text.value=`${multiArr[0][indexArr[0]]} ${multiArr[1][indexArr[1]]}:${multiArr[2][indexArr[2]]}`
		// 返回父
		const fullArr= toRaw(multiArrayFull.value)
		let  datetime =''
		if(fullArr[0][indexArr[0]]){
			datetime= `${fullArr[0][indexArr[0]]} ${fullArr[1][indexArr[1]]}:${fullArr[2][indexArr[2]]}`
		}
		let timeStamp=0
		if(datetime){
			// 获取时间戳
			timeStamp=new Date(datetime.replace(/-/g,'/')).getTime()
			console.log('日期=',datetime,'时间戳=',timeStamp)
		}
		emit('dtPickerChanged',timeStamp)
	}
	watch(props.timestamp,(nd)=>{
		timestampToString(nd)
	},{ immediate: true })
	const formatDateAuto=(dt, format = 'yyyy-MM-dd HH:mm:ss')=> { 
			let date = new Date(dt);
	    let year = date.getFullYear();  
	    let month = String(date.getMonth() + 1).padStart(2, '0');  
	    let day = String(date.getDate()).padStart(2, '0');  
	    let hour = String(date.getHours()).padStart(2, '0');  
	    let minute = String(date.getMinutes()).padStart(2, '0');  
	    let second = String(date.getSeconds()).padStart(2, '0');  
	  
	    let obj = {  
	        'M+': month, // 月份  
	        'd+': day, // 日  
	        'h+': hour, // 小时  
	        'm+': minute, // 分  
	        's+': second, // 秒  
	        // 'yyyy': year, // 年份  
	        'MM': month,  
	        'dd': day,  
	        'HH': hour,  
	        'mm': minute,  
	        'ss': second  
	    };  
			
			if(/(y+)/i.test(format)){
				format=format.replace(RegExp.$1,(date.getFullYear()+'').substr(4 - RegExp.$1.length))
			}
	    for (let k in obj) {  
	        if (new RegExp(`(${k})`).test(format)) {  
						// || RegExp.$1.length === 4
	            format = format.replace(RegExp.$1, (RegExp.$1.length === 1 ) ? (obj[k]) : (('00' + obj[k]).substr(('' + obj[k]).length)));  
	        }  
	    } 
	  
	    return format;  
	}  
	  
</script>

<style scoped>
	/* 设置 Picker 组件的背景颜色和文本颜色 */
	.picker {
	    background-color: white; /* 背景色设置为白色 */
	    color: black; /* 文字颜色设置为黑色 */
	}
</style>