【uni-app】uni-app表单日期与时间选择器

日期格式

时间格式

代码

<template>
	<u-form :model="form" ref="uForm">
		<u-form-item :label-position="labelPosition" label="日期" prop="patrolDate" label-width="150">
			<u-input :border="border" placeholder="请选择日期" v-model="form.patrolDate" type="select" 
                     :select-open="pickerTime" @click="pickerTime = true"></u-input>
		</u-form-item> 
		<u-form-item :label-position="labelPosition" label="时间" prop="patrolTime" label-width="150">
			<u-input :border="border" type="select" :select-open="selectShow" v-model="form.patrolTime" 
                     placeholder="请选择时间" @click="selectShow = true"></u-input>
		</u-form-item>			
	</u-form>

			<!-- 时间控件 -->
			<u-select mode="single-column" :list="selectList" v-model="selectShow" @confirm="selectConfirm"></u-select>
			<!-- 日期控件 -->
			<u-picker mode="time" v-model="pickerTime" @confirm="timeConfirm"></u-picker>
</template>

<script>
export default {
	data() {
		return {
			selectShow: false,
            labelPosition: 'left',
			border: false,
			pickerTime: false,//控制日期显示
            
			//时间list
            selectList: [
                {
                    value: '00:00',
                    label: '00:00'
                },
                {
                    value: '02:00',
                    label: '02:00'
                },
                {
                    value: '04:00',
                    label: '04:00'
                },
            ],
		}
	},
    
	methods: {
        
        // 时间回调
        selectConfirm(e) {
            this.form.patrolTime = '';
            e.map((val, index) => {
                this.form.patrolTime += this.form.patrolTime == '' ? val.label : '-' + val.label;
            })
        },
        
        //日期回调
        timeConfirm(e){
            this.form.patrolDate = e.year + '-' + e.month + '-' + e.day;
        },		
	}

}
</script>