微信的組件有很多限制了，比如picker的樣式，顏色無法更改或與 UI 的主題不符，我們可以用 picker-view來做開發(fā)

父組件

<Dates :selectedDate="dischargeTime" @dateSelected="setDischargeTime" @popType="datesPopFunc" v-if="datesPop" />

// 時(shí)間組件 傳遞參數(shù)
// dischargeTime  選中時(shí)間：String類型，如為空則選擇當(dāng)日
// setDischargeTime 設(shè)置選中時(shí)間： func類型，改變選中值顯示到頁面的函數(shù)
// datesPopFunc 改變 v-if 的函數(shù)

子組件

<template>
    <view class="Date">
        <view class="content">
            <view class="title">
                <image class="title_b" src="/static/archives/title.png"></image>
                <view class="esc" @click="esc">取消</view>
                <text>選擇時(shí)間</text>
                <view class="ack" @click="ack">確認(rèn)</view>
            </view>
            <picker-view :value="value" :indicator-style="indicatorStyle" @change="bindChange" class="picker-view">
                <picker-view-column>
                    <view class="item" v-for="(item,index) in years" :key="index">{{item}}年</view>
                </picker-view-column>
                <picker-view-column>
                    <view class="item" v-for="(item,index) in months" :key="index">{{item}}月</view>
                </picker-view-column>
                <picker-view-column>
                    <view class="item" v-for="(item,index) in days" :key="index">{{item}}日</view>
                </picker-view-column>
            </picker-view>
        </view>
    </view>
</template>

<script>
    export default {
        props: {
            selectedDate: {
                type: String,
                default: "",
            },
        },
        data() {
            return {
                years: [],
                year: '',
                months: [],
                month: '',
                days: [],
                day: '',
                value: [],
            }
        },
        mounted() {
            const date = new Date();
            const year = date.getFullYear()
            const month = date.getMonth() + 1
            const day = date.getDate()
            const selectedYear = new Date(this.selectedDate).getFullYear() || year;
            const selectedMonth = new Date(this.selectedDate).getMonth() + 1 || month;
            const selectedDay = new Date(this.selectedDate).getDate() || day;
            setTimeout(() => {
                this.value = [this.years.indexOf(selectedYear),selectedMonth - 1,selectedDay - 1];
                this.year = selectedYear;
                this.month = selectedMonth < 10 ? `0${selectedMonth}` : selectedMonth;
                this.day = selectedDay < 10 ? `0${selectedDay}` : selectedDay;
            }, 0)
        },
        created() {
            this.init();
        },
        methods: {
            init () {
                const date = new Date();
                const year = date.getFullYear()
                const month = date.getMonth() + 1
                const day = date.getDate()
                const years = []
                const months = []
                for (let i = date.getFullYear() - 3; i < date.getFullYear() + 3; i++) {
                    years.push(i)
                }
                for (let i = 1; i <= 12; i++) {
                    months.push(i)
                }
                this.years = years
                this.months = months
                this.getDays(year, month);
            },
            getDays(year, month) {
                const day = new Date(year, month, 0).getDate();
                const days = []
                for (let i = 1; i <= day; i++) {
                    days.push(i)
                }
                this.days = days;
            },
            bindChange: function(e) {
                const val = e.detail.value
                this.year = this.years[val[0]]
                this.month = this.months[val[1]] < 10 ? `0${this.months[val[1]]}` : this.months[val[1]]
                if (this.value[1] !== val[1]) {
                    this.getDays(this.year, this.month);
                }
                this.day = this.days[val[2]] < 10 ? `0${this.days[val[2]]}` : this.days[val[2]]
                this.value = [val[0], val[1], val[2]]
            },
            esc() {
                this.$emit('popType', false);
            },
            ack() {
                const date = `${this.year}-${this.month}-${this.day}`;
                this.$emit('dateSelected', date)
            },
        }
    }
</script>

<style lang="scss" scoped>
    .Date {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100vh;
    background: rgba(0,0,0, .6);
    .content {
        position: absolute;
        bottom: 0;
        left: 0;
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 700rpx;
        background: #FFFFFF;
        border-radius: 20rpx 20rpx 0rpx 0rpx;
        padding-bottom: 30rpx;
        box-sizing: border-box;
        .title {
            display: flex;
            align-items: center;
            flex: none;
            position: relative;
            width: 100%;
            height: 114rpx;
            font-size: 36rpx;
            font-weight: 500;
            color: #333333;
            overflow: hidden;
            text {
                position: absolute;
                left: 0;
                top: 0;
                display: block;
                width: 100%;
                height: 114rpx;
                line-height: 114rpx;
                text-align: center;
            }
            .title_b {
                width: 100%;
                height: 114rpx;
            }
            .esc {
                position: absolute;
                z-index: 1;
                left: 40rpx;
                font-size: 30rpx;
                color: #666666;
            }
            .ack {
                position: absolute;
                z-index: 1;
                right: 40rpx;
                font-size: 30rpx;
                color: #0063C3;
            }
        }
        .picker-view {
            width: 750rpx;
            height: 586rpx;
            margin-top: 20rpx;
        }
        .item {
            line-height: 68rpx;
            text-align: center;
        }
    }
}
</style>