vue滚动年月日选择器DatetimePicker

一、首先引入mint-UI库，具体步骤参考mint-ui官方文档

mint-ui地址：http://mint-ui.github.io/#!/zh-cn

关注我的微信公众号【前端基础教程从0开始】，加我微信，可以免费为您解答问题。回复“1”，拉你进程序员技术讨论群。回复“小程序”，领取300个优秀的小程序开源代码+一套入门教程。回复“领取资源”，领取300G前端，Java，微信小程序，Python等资源，让我们一起学前端。

二、查看引入DatetimePicker步骤

具体代码如下：
<template>
  <div>
    <div class="birth">
      <div @click="openPicker1">{{startText}}</div>
      <div @click="openPicker2">{{endText}}</div>
    </div>
    <div class="datePicker">
      <mt-datetime-picker
        type="date"
        ref="picker1"
        year-format="{value} 年"
        month-format="{value} 月"
        date-format="{value} 日"
        @confirm="handleConfirm1"
        :startDate="startDate"
        v-model="dateVal"
            >
        </mt-datetime-picker>
        <mt-datetime-picker
        type="date"
        ref="picker2"
        year-format="{value} 年"
        month-format="{value} 月"
        date-format="{value} 日"
        @confirm="handleConfirm2"
        :startDate="startDate"
        v-model="dateVal"
            >
        </mt-datetime-picker>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { DatetimePicker,Toast,Popup,Picker  } from 'mint-ui';
Vue.component(DatetimePicker.name, DatetimePicker);
  export default {
    data(){
      return{
        startText:"", 
        endText:"",
        startDate: new Date('1980-01-01'),
        dateVal:'',
        nowDate:''
      }
    },
    components:{
      [DatetimePicker.name]: DatetimePicker
    },
    mounted() {
      this.timeFormate() 
    },
    methods: {
      //当前时间
      timeFormate() {
        var date = new Date();
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var strDate = date.getDate();
        var strDateEnd = date.getDate()+1;
        if (month >= 1 && month <= 9) {
            month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
            strDate = "0" + strDate;
        }
        if (strDateEnd >= 0 && strDateEnd <= 9) {
            strDateEnd = "0" + strDateEnd;
        }
        if(strDateEnd>30){
            strDateEnd = date.getDate();
        }
        var startText = year + '年'+ month + '月' + strDate +'日';
        var endText= year + '年'+ month + '月' + strDateEnd +'日';
        this.currentdate1=startText;
        this.currentdate2=endText;
        var timeSign1=year+month+strDate
        var timeSign2=year+month+strDateEnd
        this.advertValidDate=timeSign1
        this.advertInValidDate=timeSign2
      },
      openPicker1() {
        if(this.nowDate){
          this.dateVal=this.nowDate
        }else{
          this.dateVal=new Date()
        }
        this.$refs.picker1.open();
      },
      openPicker2() {
        if(this.nowDate){
          this.dateVal=this.nowDate
        }else{
          this.dateVal=new Date()
        }
        this.$refs.picker2.open();
      },
      handleConfirm1 (data) {
        var arr1 = this.getDate(this.dateVal).split('-')
        this.startText=arr1[0]+'年'+arr1[1]+'月'+arr1[2]+'日'
      },
      handleConfirm2 (data) {
        var arr2 = this.getDate(this.dateVal).split('-')
        this.endText=arr2[0]+'年'+arr2[1]+'月'+arr2[2]+'日'
      },
      getDate(data) {   
        const y = data.getFullYear()   
        let m = data.getMonth() + 1   
        m = m < 10 ? '0' + m : m   
        let d = data.getDate()   
        d = d < 10 ? ('0' + d) : d  
        return y + '-' + m + '-' + d  
      },  
    }
  };
</script>
<style>
.mint-datetime-action{
  width: 32% !important;
}
.picker-selected{
  font-family: PingFangSC-Semibold;
  font-size: 24px;
  letter-spacing: -0.04px;
}
.picker-item{
  color:#999999;
  font-family: PingFangSC-Light;
  font-size: 16px;
  letter-spacing: -0.04px;
}
</style>

欢迎加我微信交流：zhao17733750596