在vue项目中引用vant组件库中的DatetimePicker组件实例

html

<div class="birthday-box">
          <span class="placeholder" >
            <van-datetime-picker
              ref="datetime"
              v-model="currentDate"
              type="date"
              :show-toolbar="false"//是否显示顶部栏
              :visible-item-count="3"//可见的选项个数
              :min-date="minDate"
              :max-date="maxDate"
              :formatter="formatter"选项格式化函数
              @change="timeChange"
            />
          </span>
  </div>

js

<script>
  import {Dialog, Popup, DatetimePicker, Picker} from 'vant';


  export default {
    name: "index",
    data() {
      return {
        loading: false,
        birthday: 0，
        minDate: new Date(1900, 0, 1),//可选的最小时间
        maxDate: new Date(),//可选的最大时间----new Date()当前时间
        currentDate: new Date("1995/01/01"),//默认选择的时间
  
      }
    },
    components: {
      [Popup.name]: Popup,
      [DatetimePicker.name]: DatetimePicker,
    },
    computed: {
      solar_id() {
      //this.$route.query获取url地址栏参数
        if (this.$route.query.solar_id) {
          return this.$route.query.solar_id
        } else {
          return localStorage.getItem('solar_id')
        }
      }
    },
    methods: {
      nextStep() {
     // 通过 ref 可以获取到 DatetimePicker 实例并调用实例方法
        let ref = this.$refs['datetime'].getPicker().getValues();
        this.birthday =ref.map(v=>parseInt(v)<10?'0'+parseInt(v):parseInt(v)).join('-')
       // console.log(this.birthday）1995-01-01
        localStorage.setItem('birthday', this.birthday)
        if (this.birthday) {
          this.$router.push({name: 'test'})
        } else {
          Dialog.alert({
            message: '请选择生日！'
          })
          return
        }

      },
      solarshow() {
        console.log(this.solar_id)
      },
      redirect(url) {
        redirect(url)
      },
      /* 时间格式 */
      formatter(type, val) {
        if (type === 'year') {
          return `${val}年`;
        } else if (type === 'month') {
          return `${val}月`;
        }
        return val+'日';
      },
    },
  }
</script>

通过 ref 可以获取到 DatetimePicker 实例并调用实例方法,具体参考vant

感谢vant-轻量、可靠的移动端vue组件库