vue 实现日期选择器(time-picker)与Popup结合-----vant

vue 实现日期选择器(time-picker)与Popup结合-----vant_第1张图片

刚开始本来想用ant-design-mobile,但是react的库和vue不兼容,所以最后找到了vux ,但是这个包有问题 ,最后就找到了vant的库,使用它的datepicker和popup组件,实现了我的功能,点击选择日期就弹出选择框:

      <el-form-item label="日期" >
        <el-input
          class="inputAlign"
          v-model="timeString"
          @focus="showpopup()"
          placeholder="选择日期"
          type="primary" ></el-input>
          <van-popup v-model="show" safe-area-inset-bottom position="bottom">
           <van-datetime-picker
            v-model="currentDate"
            type="date"
            :min-date="minDate"
            :max-date="maxDate"
            @confirm='saveTime'
          />
        </van-popup>
      </el-form-item>
import {
      DatetimePicker, Popup } from 'vant';
import 'vant/lib/index.css';

export default(){
     
	data(){
     
 		 currentDate: new Date(),
      	 minDate: new Date(2020, 0, 1),
      	 maxDate: new Date(2025, 10, 1),
      	 timestring:''
	},
	methods:{
     
		showpopup() {
     
	      if (!this.show) {
     
	        this.show = true;
	      } else {
     
	        this.show = false;
	      }
	    },
	  	timeFormatter(time) {
     
	      const d = new Date(time);
	      const timeString = `${
       this.timeFormat(d.getFullYear())}-${
       this.timeFormat(d.getMonth() + 1)}-${
       this.timeFormat(d.getDate())}`;
	      return timeString;
	    },
	   saveTime(val) {
     
	      this.show = false;
	      this.formLabelAlign.tripDate = Date.parse(val); // 选择时间的时间戳
	      this.timeString = this.timeFormatter(Date.parse(val)); // 选择时间日期 2019-01-30
	    },
		}
}

写项目遇到的问题,希望会有用!

你可能感兴趣的:(前端,vue)