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

系统管理员 2023-07-03 08:27 7阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5ODk3OTc4_size_16_color_FFFFFF_t_70]

刚开始本来想用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
    	    },
    		}
    }

写项目遇到的问题，希望会有用！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5ODk3OTc4_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200205115535934.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5ODk3OTc4,size_16,color_FFFFFF,t_70