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

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

原生小程序的方法在下面

这里是mpvue

//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()
        },
        // 关闭弹窗
        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>

原生小程序html

<!--components/DateC/index.wxml-->
<view class="born_pick_box1">
  <view class="close_picker_box1" bindtap="closePicker"></view>
  <view class="birthday_box1 birthday_show1">
    <view class="picker_header1">
      <view class="picker_btn1" catchtap="closePicker">取消</view>
      <view class="picker_btn1" catchtap="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}}" bindchange="dateChange">
      <picker-view-column>
        <view style="width:250rpx;line-height:80rpx;height:80rpx;z-index:80; text-align: center;" wx:for="{{yearNew}}" wx:for-item="item" wx: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;" wx:for="{{monthNew}}" wx:for-item="item" wx: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;" wx:for="{{dayNew}}" wx:for-item="item" wx:key="index">{{item}}日</view>
      </picker-view-column>
    </picker-view>
  </view>
</view>

原生小程序js

// components/DateC/index.js
let myDate = new Date();
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    start: '',
    end: '',
    timeVal: '',
    timeShow: ''
  },

  /**
   * 组件的初始数据
   */
  data: {
    dateNew: [],
    yearNew: [],
    monthNew: [],
    dayNew: [],
    start: '',
    end: '',
    timeNew: '',
    timeShowNew: '',
    only:''
  },

  /**
   * 组件的方法列表
   */
  methods: {
    setDateFn() {
      if (this.data.timeShowNew) {
        var a = this.data.timeShowNew.split('-')
        for (var i = 0; i <= this.data.yearNew.length; i++) {
          if (a[0] == this.data.yearNew[i]) {
            this.setData({
              ['dateNew[0]']: i
            })
            break;
          }
        }
        for (var i = 0; i <= this.data.monthNew.length; i++) {
          var c = a[1].split('')
          if (c[0] > 0) {
            if (a[1] == this.data.monthNew[i]) {
              this.setData({
                ['dateNew[1]']: i
              })
              break;
            }
          } else {
            if (c[1] == this.data.monthNew[i]) {
              this.setData({
                ['dateNew[1]']: i
              })
              break;
            }
          }
        }
        for (var i = 1; i <= this.data.dayNew.length; i++) {
          if (a[2] == this.data.dayNew[i]) {
            this.setData({
              ['dateNew[2]']: i
            })
            break;
          }
        }
      }
    },
    //获取年份
    setYear() {
      this.setData({
        yearNew:[]
      })
      let data = []
      for (let i = myDate.getFullYear() - this.data.end; i <= myDate.getFullYear() - this.data.start; i++) {
        data.push(i)
      }
      this.setData({
        yearNew: data
      }, function () {
        this.setMonth()
      })
    },
    // 获取月份
    setMonth() {
      let data = []
      let yue = myDate.getMonth() + 1
      for (let i = 1; i <= 12; i++) {
        if (myDate.getFullYear() - this.data.start == this.data.yearNew[this.data.dateNew[0]] && yue < i ) {
          break;
        }
        data.push(i)
      }
      this.setData({
        monthNew: data
      }, function () {
        this.setDay()
      })
    },
    // 获取天数
    setDay() {
      let data = []
      let ri = myDate.getDate()
      let a = new Date(this.data.yearNew[this.data.dateNew[0]], this.data.monthNew[this.data.dateNew[1]], 0)
      let b = a.getDate()
      for (let i = 1; i <= b; i++) {
        if (myDate.getFullYear() - this.data.start == this.data.yearNew[this.data.dateNew[0]] && ri < i) {
          break;
        }
        data.push(i)
      }
      this.setData({
        dayNew: data
      }, function () {
        if(this.data.only != 2){
          this.setDateFn()
        }
      })
    },
    // 滑动选择
    dateChange(e) {
      this.setData({
        dateNew: e.detail.value,
        only:'2'
      }, function () {
        this.setMonth()
      })

    },
    // 关闭弹窗
    closePicker() {
      this.triggerEvent('closeFn')
    },
    // 确认选择
    selectCityFn() {
      this.setData({
        timeNew: this.data.yearNew[this.data.dateNew[0]] + '-' + this.data.monthNew[this.data.dateNew[1]] + '-' + this.data.dayNew[this.data.dateNew[2]]
      })
      this.triggerEvent('getDateFn', {
        dateNew: this.data.dateNew,
        data: this.data.timeNew
      })
    }
  },
  attached() {
    this.setData({
      start: this.properties.start,
      end: this.properties.end,
      timeVal: this.properties.timeVal,
      timeShowNew: this.properties.timeShow,
      dateNew: this.properties.timeVal
    }, function () {
      console.log(this.properties.timeVal,this.properties.timeShow)
      this.setYear()
    })
  },
})

原生小程序css

/* components/DateC/index.wxss */
.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;
}
/* 自定义动画 */
.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_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;
}

原生小程序页面引用
html

  <DateList wx:if="{{dateShow}}" start='{{start}}' end="{{end}}" timeVal="{{dateVal}}" timeShow="{{newvalue}}"  bind:closeFn="closeFn" bind:getDateFn="getDateFn" />

json

{
  "usingComponents": {
    "NoBackImg":"/components/noBackImg/index",
    "DateList":"/components/DateC/index"
  },
  "navigationStyle": "custom"
}

	data:{
	    dateShow: false,
    dateVal: [76, 0, 0],
    start: 12,
    end: 90,
    timeShow: '',
	}
	 // 获取选择日期
  bindDateChange: function (e) {
    this.setData({
      newvalue: e.detail.value
    })
  },
  dateShowfn() {
    this.setData({
      dateShow: true
    })
  },
  //关闭日期弹窗
  closeFn() {
    this.setData({
      dateShow: false
    })
  },
  // 设置日期
  getDateFn(e) {
    console.log(e,'==========')
    var a = e.detail.data.split('-')
    if (a[1] < 10) {
      a[1] = '0' + a[1]
    }
    if (a[2] < 10) {
      a[2] = '0' + a[2]
    }
    this.setData({
      timeShow: false,
      newvalue: a.join('-'),
      dateShow: false,
      dateVal:e.detail.dateNew
    })
  },