效果展示:
代码展示:
点击选择日期
注意:如果是按需引入的话,记得在main.js里面引入相应的文件奥。
// main.js文件里面的部分代码
import {Button} from 'vant'
import { DatetimePicker } from 'vant';
import { Popup } from 'vant';
import { Field } from 'vant';
Vue.use(Button)
Vue.use(DatetimePicker)
Vue.use(Popup)
Vue.use(Field);
---------完。
补充知识:Vue + Vant DatetimePicker 日期选择 常见的日期限制(只允许选择当前月,整月选择)
安装Moment.js(Moment.js Javascript 日期处理类库 http://momentjs.cn/)
npm install moment --save # npm
yarn add moment # Yarn
mounted() { let dateLimit = new Date(); let year = date.getFullYear(); let month = date.getMonth()+1; let d = new Date(year, month, 0); //最大允许选择当前日期 this.maxDate = new Date(this.$moment(dateLimit).format('YYYY/MM/DD')); //最大允许选择当前日期+3个月 this.maxDate = new Date(this.$moment(dateLimit).add('3','M').format('YYYY/MM/DD')); //最小允许选择当前日期 this.minDate = new Date(this.$moment(dateLimit).format('YYYY/MM/DD')); //最小允许选择当前日期-3个月 this.minDate = new Date(this.$moment(dateLimit).subtract('3','M').format('YYYY/MM/DD'); //最小允许选择当前日期-3个月(当前月不算,减去三个整月2020/06/01----2020/09/22) this.minDate = new Date(this.$moment(dateLimit).subtract('3','M').format('YYYY/MM')+'/01'); //只允许选择当前月 let year = dateLimit.getFullYear(); let month = dateLimit.getMonth()+1; let d = new Date(year, month, 0); let enddate = d.getDate(); this.minDate = new Date(this.$moment(dateLimit).format('YYYY/MM/')+'01'); this.maxDate = new Date(this.$moment(dateLimit).format('YYYY/MM/')+ enddate); }
其中minData 和maxData 两两组合即可日期限制。
以上这篇vue 判断两个时间插件结束时间必选大于开始时间的代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持考高分网。



