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>

效果如下：