uniapp-uView表单中如何添加日期控件？

环境：uniapp，uview-ui，Picker 选择器，本次我们用uview中的Picker 选择器来写一个日期功能此选择器有四种弹出模式一是时间模式，可以配置年，日，月，时，分，秒参数二是地区模式，可以配置省，市，区参数三是单列模式四是多列模式基本使用：通过mode参数设置为time、region、selector、multiSelector，区分时间、地区、单列，多列模式。通过v-mode

青茶360

3904人浏览 · 2021-12-18 15:57:53

青茶360 · 2021-12-18 15:57:53 发布

环境：uniapp，uview-ui，Picker 选择器，

本次我们用uview中的Picker 选择器来写一个日期功能

此选择器有四种弹出模式

一是时间模式，可以配置年，日，月，时，分，秒参数
二是地区模式，可以配置省，市，区参数
三是单列模式
四是多列模式

基本使用：

通过mode参数设置为time、region、selector、multiSelector，区分时间、地区、单列，多列模式。
通过v-model双向绑定一个值为布尔值的变量，来打开或者收起picker。

<template>
	<view>
		<u-picker v-model="show" mode="time"></u-picker>
		<u-button @click="show = true">打开</u-button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false
			}
		}
	}
</script>

案例使用：

//数据渲染
<u-form-item :label-position="labelPosition" label="日期" prop="time">
	<u-input :border="border" placeholder="请输入日期" v-model="model.birthdate" type="select" :select-open="pickerTime" @click="pickerTime = true"></u-input>
</u-form-item>

//日期控件
<u-picker mode="time"   v-model="pickerTime" @confirm="timeConfirm"></u-picker>


<script>
pickerTime: false,//控制日期显示

methods: {
//日期数据回调
		timeConfirm(e){
			console.log(e);
			this.model.birthdate = e.year + '-' + e.month + '-' + e.day;
		},
}
</script>

作者：忠标

日期：2021.12.18

坐标：广州