partnerApp/pages/components/date-picker.vue

<template>
  <div >
   <u-popup ref="popup" class="popup" :mask="true" mode="bottom" >
   	<view >
   		<view class="popup-title ">
   			<text >自定义时间</text>
   			<text  @click="$refs.popup.close()">×</text>
   		</view>
   		<view style="padding: 15px">
   			<view class="popup-data dis j-s">
   				<text :class="startShow? 'active' :''" @click="startClick()">{{ interviewStartTime||'开始时间' }}</text>至
   				<text :class="endShow? 'active' :''" @click="endClick()">{{ interviewEndTime || '结束时间' }}</text>
   			</view>
   			<picker-view v-show="visible" :indicator-style="indicatorStyle" :value="value" @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>
   	<view class="popup-footer dis j-s">
   		<text @click.stop="reset" >重置</text>
   		<text @click.stop="confirm" >确定</text>
   	</view>
   </u-popup>
  </div>
</template>
<script>
  export default {
    data() {
      return {
		  startShow: false,
		  endShow: false,
		  interviewStartTime:'',
		  interviewEndTime:'',
        years: [],
        year: null,
        months: [],
        month: null,
        days: [],
        day: null,
        hours: [],
        hour: null,
        minutes: [],
        minute: null,
        value: [],
        indicatorStyle: `height: 50px;color:#2D6DFF `,
		visible:false
      }
    },
    props: {
      // visible: {
      //   type: Boolean,
      //   default: true
      // },
      
      // interviewTime: {
      //   type: String,
      //   default() {
      //     return '';
      //   },
      // }
    },
    mounted() {
      this.init();
    },
    watch: {
      // visible: {
      //   handler(newValue, oldValue) {
      //     if (newValue) {
      //       if (this.interviewTime) {
      //         this.init(this.interviewTime);
      //       }
      //     }
      //   },
      //   immediate: false,
      //   deep: true
      // }
    },
    methods: {
		open(){
			this.$refs.popup.open()
		},
      bindChange: function (e) {
        const val = e.detail.value
        let year = this.years[val[0]] 
        let isDay = 30, days = [];
        if (val[1]+1 == 2) {
            if((val[0]%4==0 && year%100!=0)||(year%400==0)){
            console.log('闰年')
            isDay = 29;
          }else {
            isDay = 28;
             console.log('平年')
          }
        } else if ([1,3,5,7,8,10,12].includes(val[1]+1)) {
          isDay = 31;
        } else {
          isDay = 30;
        }
      
        for (let i = 1; i <= isDay; i++) {
          days.push(i)
        }
        this.days = days;
        this.year = this.years[val[0]]
        this.month =  this.months[val[1]]
        this.day = this.days[val[2]]
        if(this.startShow){
      	  this.interviewStartTime=this.year+'-'+this.month+'-'+this.day
        }
        if(this.endShow){
        		this.interviewEndTime=this.year+'-'+this.month+'-'+this.day
        }
      },
      init() {
        const date =  new Date();
        const years = []
        const year = date.getFullYear()
        const months = []
        const month = date.getMonth() + 1
        const days = []
        const day = date.getDate()
      
        let isDay = 30;
        if (month == 2) {
          if((year%4==0 && year%100!=0)||(year%400==0)){
            isDay = 29;
          }else {
            isDay = 28;
          }
        } else if ([1,3,5,7,8,10,12].includes(month)) {
          isDay = 31;
        } else {
          isDay = 30;
        }
      
        for (let i = date.getFullYear();  i >= 1900; i--) {
          years.push(i)
        }
        for (let i = 1; i <= 12; i++) {
          months.push(i)
        }
        for (let i = 1; i <= isDay; i++) {
          days.push(i)
        }
      
        this.years = years
        this.year = year
        this.months = months
        this.month = month
        this.days = days
        this.day = day
        this.value = [0, month-1, day-1]
      },
      // 补0
      padZeroStr(originStr){
         if(+originStr < 10){
            return  String(originStr).padStart(2,'0')
         }
         return originStr + ''
      },
      close(){
        this.$emit('update:visible', false);
      },
	  reset(){
        this.$emit('update:visible', false);
        this.interviewStartTime=''
        this.interviewEndTime =''
      },
      startClick(){
        // this.interviewStartTime=''
        console.log(this.year ,this.month );
        this.interviewStartTime = this.year+'-'+this.month+'-'+this.day
        this.visible=true
        this.startShow = true
        this.endShow = false
      },
      endClick(){
        this.interviewEndTime= this.year+'-'+this.month+'-'+this.day
        this.visible=true
        this.startShow = false
        this.endShow = true
      },
      confirm() {
        // let monthStr = this.padZeroStr(this.month)
        // let dayStr = this.padZeroStr(this.day)
        // let hourStr = this.padZeroStr(this.hour)
        // let minuteStr = this.padZeroStr(this.minute)
        // this.timeValue = `${this.year}/${monthStr}/${dayStr} ${hourStr}:${minuteStr}:00`;
        this.$emit('confirmPickDate', this.interviewStartTime,this.interviewEndTime);
		    this.$refs.popup.close()
      },
    },
  }
</script>
<style lang="scss" scoped>
	.popup {
	  border-radius:10px 10px 0 0 !important; 
	}
  .popup-title{
  	font-size: 15px;
  	color: #333333;
  	padding:10px;
  	margin-bottom: 10px;
  	position: relative;
  	text-align: center;
  	text:first-child {
  		font-weight: 600;
  	}
  	text:last-child {
  		position: absolute;
  		right: 10px;
  		font-size: 21px;
  		color: #999999;
  		line-height: 23px;
  	}
  }
  .popup-footer{
  	margin:10px 15px;
  	text{
  		font-size: 16px;
  		padding: 5px 0;
  		color: #FFFFFF;
  		display: inline-block;
  		width: 45%;
  		text-align: center;
  	}
  	text:first-child {
  		color: #2D6DFF;
  		background: rgba(45,109,255,0.1);
  		border-radius: 5px 5px 5px 5px;
  	}
  	text:last-child {
  		background: linear-gradient( 132deg, #2DD9FF 0%, #2D6DFF 100%);
  		border-radius: 5px 5px 5px 5px;
  	}
  }
  .popup-data{
  	line-height: 25px;
  	text{
  		font-size: 14px;
  		color: #999999 ;
  		display: inline-block;
  		width: 45%;
  		text-align: center;
  		border: 1px solid #DDDDDD;
		border-radius: 2px 2px 2px 2px;
  	}
  	.active{
  		border: 1px solid #2D6DFF;
  		color: #2D6DFF;
  	}
  }
   .picker-view {
          width: 100%;
          height: 150px;
        }
</style>