小程序 日期选择器 日期段选择器 处理小程序原生日期选择设置起始日期后，ios依旧可以显示非起始日期段的日期

简单的日期选择器， 处理小程序原生日期选择设置起始日期后，ios依旧可以显示非起始日期段的日期
参数
:start开始日期 12 如果是18岁以前就写 18
:end结束日期 90 如果是最大90岁 就写 90
:timeVal页面展示的数据源下标
:timeShow初始页面值 ‘2022-01-13’ 没有可以不用传
@closeFn 关闭事件
@getDateFn 改变事件

//DatePopup 组件

<template>
    <view class="born_pick_box1">
        <view class="close_picker_box1" @click="closePicker"></view>
        <view class="birthday_box1 birthday_show1">
            <view class="picker_header1"> 
                <view class="picker_btn1" @click.stop="closePicker">取消</view>
                <view class="picker_btn1" @click.stop="selectCityFn" style="color:#3ec46f">确定</view>
            </view>
            <picker-view indicator-style="height: 40px;line-height:40px;" style="width: 100%; height: 300px;text-align: center;" :value="dateNew" @change="dateChange">
                <picker-view-column>
                    <view style="width:250rpx;line-height:80rpx;height:80rpx;z-index:80; text-align: center;" v-for="(item,index) in yearNew " :key="index">{{item}}年</view>
                </picker-view-column>
                <picker-view-column>
                    <view style="width:250rpx;line-height:80rpx;height:80rpx;z-index:80;text-align: center;" v-for="(item,index) in monthNew " :key="index">{{item}}月</view>
                </picker-view-column>
                <picker-view-column>
                    <view style="width:250rpx;line-height:80rpx;height:80rpx;z-index:80;text-align: center;" v-for="(item,index) in dayNew " :key="index">{{item}}日</view>
                </picker-view-column>
            </picker-view>
        </view>
    </view>
</template>

<script>
let myDate = new Date();
export default {
    data(){
        return{
            dateNew:[],
            yearNew:[],
            monthNew:[],
            dayNew:[],
            start:'',
            end:'',
            timeNew:'',
            timeShowNew:''
        }
    },
    props:['start','end','timeVal','timeShow'],
    created(){
        this.start = this.start
        this.end = this.end
        this.dateNew = this.timeVal
        this.timeShowNew = this.timeShow
        console.log(this.timeShowNew,this.timeShow)
        this.setDateFn()

    },
    methods:{
        setDateFn(){
            this.setYear()
            this.setMonth()
            this.setDay()
            if(this.timeShowNew){
                var a = this.timeShowNew.split('-')
                for(var i=0;i<=this.yearNew.length;i++){
                    if(a[0 ] == this.yearNew[i]){
                        this.dateNew[0] = i
                        break;
                    }
                }
                for(var i=1;i<=this.monthNew.length;i++){
                    if(a[1 ] == this.monthNew[i]){
                        this.dateNew[1] = i
                        break;
                    }
                }
                for(var i=1;i<=this.dayNew.length;i++){
                    if(a[2 ] == this.dayNew[i]){
                        this.dateNew[2] = i
                        break;
                    }
                }
            }
        },
        //获取年份
        setYear(){
            for(let i = myDate.getFullYear() - this.end; i <= myDate.getFullYear() - this.start ;i++){
                this.yearNew.push(i)
            }
        },
        // 获取月份
        setMonth(){
            this.monthNew = []
            let yue = myDate.getMonth() + 1
            for(let i = 1 ;i <= 12;i++){
                if( myDate.getFullYear() - this.start == this.yearNew[this.dateNew[0]] && yue < i  ){
                    break;
                }
                this.monthNew.push(i)
            }
        },
        // 获取天数
        setDay(){
            this.dayNew = []
            let ri = myDate.getDate()
            let a = new Date( this.yearNew[this.dateNew[0]] , this.monthNew[this.dateNew[1]]  ,0)
            let b = a.getDate()
            for(let i = 1 ; i <= b ; i++){
                if( myDate.getFullYear() - this.start == this.yearNew[this.dateNew[0]] && ri < i  ){
                    break;
                }
                this.dayNew.push(i)
            }
        },
        // 滑动选择
        dateChange(e){
            this.dateNew = e.mp.detail.value
            this.setMonth()
            this.setDay()
        },
        // 关闭d窗
        closePicker(){
            this.$emit('closeFn')
        },
        // 确认选择
        selectCityFn(){
            this.timeNew = this.yearNew[this.dateNew[0]] +'-'+this.monthNew[this.dateNew[1]]+'-'+this.dayNew[this.dateNew[2]]
            this.$emit('getDateFn',{
                dateNew:this.dateNew,
                data: this.timeNew
            })
        }


    },
}
</script>
<style scoped>
 /*** 城市选择器 ***/
    /* 自定义遮罩层*/
    .born_pick_box1{
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 999;
        background: rgba(0,0,0,0.6);
    }
    .close_picker_box1{
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
    }
    /* 自定义按钮 */
    .picker_header1 {
        box-sizing: border-box;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        padding: 0 4vw;
        height: 100rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-top: 1px solid #F2F2F2;
        border-bottom: 1px solid #F2F2F2;
        z-index: 999;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .picker_btn1 {
        padding: 0 4vw;
        line-height: 100rpx;
        color: #333;
        font-size: 3.73vw;
    }
    .picker_btn1:last-child {
        /* color: #333; */
    }
    /* 自定义动画 */
    .birthday_box1 {
        width: 100%;
        height: 600rpx;
        padding-top: 16.53vw;
        background-color: #fff;
        position: fixed;
        bottom: 0;
        left: 0;
        /* transform: translateY(100%); */
        /* transition: 0.5s; */
        border-radius: 4.27vw 4.27vw 0px 0px;
        overflow: hidden;
        box-shadow:0px -1px 1px 0px rgba(0,0,0,0.05);
    }
    .birthday_show1 {
        /* transform: translateY(0); */
    }
    .birthday_picker1 {
        width: 100%;
        height: 100%;
        text-align: center;
    }
    .birthday_indicator1 {
        height: 13.3vw;
        line-height: 13.3vw;
        border-color: #f2f2f2
    }
    .birthday_picker1 picker-view-column view {
        display: flex;
        justify-content: center;
        align-items: center;
    }
</style>

//页面引入
<template>
<div class="index_picker no_picker" @click="dateShow = true">
                <div v-if="!inputVlue">选择你的出生日期</div>
                <div v-else>{{ inputVlue }}</div>
            </div>
            <DatePopup v-if="dateShow" :start='start' :end="end" :timeVal="dateVal" :timeShow="timeShow"  @closeFn="closeFn" @getDateFn="getDateFn" />
</template>

<script>
 import DatePopup from '@/components/Date'; 
 export default {
        components: {
            DatePopup 
        },
        data(){
        		dateShow:false,
                dateVal:[78,0,0],
                start:12,
                end:90,
                timeShow:'',
        },
        onLoad(){
        	this.timeShow = '2022-01-13'
        },
        methods:{
            // 设置日期
            getDateFn(e){
                this.timeShow = false
                this.dateVal = e.dateNew
                var a = e.data.split('-')
                if(a[1] < 10){
                    a[1] = '0'+a[1]
                }
                if(a[2] < 10){
                    a[2] = '0'+a[2]
                }
                this.inputVlue = a.join('-')
                this.dateShow = false
                this.constellation = getAstro(this.inputVlue)
            },
        }
 }
</script>