uniapp-uView表單中如何新增日期控制元件？

賴忠標發表於2021-12-18
APPView控制元件

環境：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>

 

相關文章