uniapp的picker日期选择器使用

官方文档：https://uniapp.dcloud.net.cn/component/picker.html。

picker从底部弹起的滚动选择器。支持五种选择器，通过mode来区分，分别是普通选择器，多列选择器，时间选择器，日期选择器，省市区选择器，默认是普通选择器。

日期选择器

日期选择器 的使用需将 mode属性 设置为 date，示例代码如下：

<!-- 日期选择器 --><picker mode="date">日期选择器</picker>

点击 “日期选择器” 文字时，将从底部弹起的滚动选择器，选择器内容为一个 由年、月、日组成的三列选择器，效果图如下：

属性说明

日期选择器的格式为：YYYY-MM-DD，具体说明如下：

注意fields的使用，不同的值选显示不同的选择器粒度。示例代码如下：​​​​​​​

<view class="uni-list-cell">   <view class="tit">日期选择器</view>   <view class="uni-list-cell-db">       <picker mode="date" :value="date" :start="startDate" :end="endDate" fields="day" @change="bindDateChange">           <view class="uni-input">{{date}}</view>       </picker>   </view></view>
<!--js--><script>export default {    data() {        const currentDate = this.getDate({            format: true        })        return {            date: currentDate        }    },    computed:{        startDate() {            return this.getDate('start');        },        endDate() {            return this.getDate('end');        }    },    methods: {        bindDateChange: function(e) { //选择日期            this.date = e.detail.value            console.log('date', this.date)        },        getDate(type) { //年月日            const date = new Date();            // const date = new Date();            let year = date.getFullYear();            let month = date.getMonth() + 1;            let day = date.getDate();
            if (type === 'start') {                year = year - 60;            } else if (type === 'end') {                year = year + 2;            }            month = month > 9 ? month : '0' + month;            day = day > 9 ? day : '0' + day;            return `${year}-${month}-${day}`;        },    }}    </script>

效果如下：

fields属性 设置成 month、year效果如下：

平台差异

日期选择默认在App端和H5端（PC版Chrome以及PC版FireFox)调用的是os的原生日期选择控件，在不同平台有不同的ui表现，当配置fields参数后使用统一的展示方式。