vue 判断两个时间插件结束时间必选大于开始时间的代码


Posted in Javascript onNovember 04, 2020

效果展示:

vue 判断两个时间插件结束时间必选大于开始时间的代码

代码展示:

<template>
 <div id="date_time_picker">
 
 <van-button plain type="primary" @click="showPopFn()">点击选择日期</van-button>
 <van-field v-model="timeValue" placeholder="选择的日期结果" readonly />
 <van-popup v-model="show" position="bottom" :style="{ height: '40%' }">
  <van-datetime-picker v-model="currentDate" type="date" @change="changeFn()" @confirm="confirmFn()" @cancel="cancelFn()" />
 </van-popup>
 
 </div>
</template>
 
<script>
 export default {
 data() {
  return {
  msg: '',
  currentDate: new Date(),
  changeDate: new Date(),
  show: false, // 用来显示弹出层
  timeValue: ''
  }
 },
 methods: {
  showPopFn() {
  this.show = true;
  },
  showPopup() {
  this.show = true;
  },
  changeFn() { // 值变化是触发
  this.changeDate = this.currentDate // Tue Sep 08 2020 00:00:00 GMT+0800 (中国标准时间)
  },
  confirmFn() { // 确定按钮
  this.timeValue = this.timeFormat(this.currentDate);
  this.show = false;
  },
  cancelFn(){
  this.show = true;
  },
  timeFormat(time) { // 时间格式化 2019-09-08
  let year = time.getFullYear();
  let month = time.getMonth() + 1;
  let day = time.getDate();
  return year + '年' + month + '月' + day + '日'
  }
 },
 mounted() {
  this.timeFormat(new Date());
 }
 }
</script>
 
<style>
</style>

注意:如果是按需引入的话,记得在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

<van-datetime-picker
 class="datePick"
 v-model="currentDate"
 type="date"
 :min-date="minDate"
 :max-date="maxDate"
  readonly="readonly"
  @confirm="confirmDate"
  @cancel="cancelDate"/>
 
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 判断两个时间插件结束时间必选大于开始时间的代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
通过jquery实现tab标签浏览效果
Feb 20 Javascript
window.onload 加载完毕的问题及解决方案(下)
Jul 09 Javascript
js函数的延迟加载实现代码
Oct 11 Javascript
js数组与字符串的相互转换方法
Jul 09 Javascript
一款基jquery超炫的动画导航菜单可响应单击事件
Nov 02 Javascript
AngularJs实现ng1.3+表单验证
Dec 10 Javascript
MUI  Scroll插件的使用详解
Apr 13 Javascript
详解最新vue-cli 2.9.1的webpack存在问题
Dec 16 Javascript
浅谈vue项目4rs vue-router上线后history模式遇到的坑
Sep 27 Javascript
JS中实现浅拷贝和深拷贝的代码详解
Jun 05 Javascript
在Uni中使用Vue的EventBus总线机制操作
Jul 31 Javascript
vue中h5端打开app(判断是安卓还是苹果)
Feb 26 Vue.js
vant 时间选择器--开始时间和结束时间实例
Nov 04 #Javascript
Vue绑定用户接口实现代码示例
Nov 04 #Javascript
vant picker+popup 自定义三级联动案例
Nov 04 #Javascript
解决vue-pdf查看pdf文件及打印乱码的问题
Nov 04 #Javascript
vantUI 获得piker选中值的自定义ID操作
Nov 04 #Javascript
浅谈vant组件Picker 选择器选单选问题
Nov 04 #Javascript
vue项目打包后请求地址错误/打包后跨域操作
Nov 04 #Javascript
You might like
用文本文件制作留言板提示(下)
2006/10/09 PHP
PHP中设置时区,记录日志文件的实现代码
2013/01/07 PHP
PHP中使用break跳出多重循环代码实例
2015/01/21 PHP
php中header设置常见文件类型的content-type
2015/06/23 PHP
php实现网站顶踩功能的完整前端代码
2015/07/19 PHP
总结对比php中的多种序列化
2016/08/28 PHP
PHP反射基础知识回顾
2020/09/10 PHP
网站上面有这种切换效果
2006/06/26 Javascript
javascript js cookie的存储,获取和删除
2007/12/29 Javascript
jquery实现点击文字可编辑并修改保存至数据库
2014/04/15 Javascript
jquery插件bxslider用法实例分析
2015/04/16 Javascript
JavaScript中的pow()方法使用详解
2015/06/15 Javascript
JS实现动态表格的添加,修改,删除功能(推荐)
2016/06/15 Javascript
JS阻止事件冒泡行为和闭包的方法
2016/06/16 Javascript
vue实现表格增删改查效果的实例代码
2017/07/18 Javascript
vuejs使用FormData实现ajax上传图片文件
2017/08/08 Javascript
关闭Vue计算属性自带的缓存功能方法
2018/03/02 Javascript
写gulp遇到的ES6问题详解
2018/12/03 Javascript
vue使用swiper实现中间大两边小的轮播图效果
2019/11/24 Javascript
微信小程序实现上传多张图片、删除图片
2020/07/29 Javascript
python开启多个子进程并行运行的方法
2015/04/18 Python
Python中的异常处理相关语句基础学习笔记
2016/07/11 Python
django drf框架中的user验证以及JWT拓展的介绍
2019/08/12 Python
Django实现网页分页功能
2019/10/31 Python
python scatter函数用法实例详解
2020/02/11 Python
CSS3教程(5):网页背景图片
2009/04/02 HTML / CSS
伯克斯奥特莱斯:Burkes Outlet
2019/03/30 全球购物
自我鉴定注意事项
2014/01/19 职场文书
cf搞笑广告词
2014/03/14 职场文书
党建工作先进材料
2014/05/02 职场文书
大学生军训自我鉴定范文
2014/09/18 职场文书
2014年教师德育工作总结
2014/11/10 职场文书
五四青年节活动总结
2015/02/10 职场文书
学籍证明模板
2015/06/18 职场文书
2015年防灾减灾工作总结
2015/07/24 职场文书
python库sklearn常用操作
2021/08/23 Python