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 相关文章推荐
使用户点击后退按钮使效三行代码
Jul 07 Javascript
不懂JavaScript应该怎样学
Apr 16 Javascript
jQuery学习笔记[1] jQuery中的DOM操作
Dec 03 Javascript
jquery监听div内容的变化具体实现思路
Nov 04 Javascript
node.js中的events.EventEmitter.listenerCount方法使用说明
Dec 08 Javascript
JQuery遍历DOM节点的方法
Jun 11 Javascript
JavaScript实现移动端滑动选择日期功能
Jun 21 Javascript
JavaScript基础教程之如何实现一个简单的promise
Sep 11 Javascript
LayUI switch 开关监听 获取属性值、更改状态的方法
Sep 21 Javascript
vue中axios的二次封装实例讲解
Oct 14 Javascript
vue+element使用动态加载路由方式实现三级菜单页面显示的操作
Aug 04 Javascript
vue自动添加浏览器兼容前后缀操作
Aug 13 Javascript
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
ThinkPHP做文字水印时提示call an undefined function exif_imagetype()解决方法
2014/10/30 PHP
PHP实现留言板功能的详细代码
2017/03/25 PHP
PHP获取php,mysql,apche的版本信息及更多服务器信息
2021/03/09 PHP
JavaScript 事件查询综合
2009/07/13 Javascript
XENON基于JSON变种
2010/07/27 Javascript
基于jquery实现的类似百度搜索的输入框自动完成功能
2011/08/23 Javascript
分析Node.js connect ECONNREFUSED错误
2013/04/09 Javascript
图片Slider 带左右按钮的js示例
2013/08/30 Javascript
JS调用页面表格导出excel示例代码
2014/03/18 Javascript
使用百度地图api实现根据地址查询经纬度
2014/12/11 Javascript
分享9点个人认为比较重要的javascript 编程技巧
2015/04/27 Javascript
深入浅析JavaScript中的arguments对象(强力推荐)
2016/06/03 Javascript
微信 java 实现js-sdk 图片上传下载完整流程
2016/10/21 Javascript
js倒计时小实例(多次定时)
2016/12/08 Javascript
JS中正则表达式全局匹配模式 /g用法详解
2017/04/01 Javascript
iview日期控件,双向绑定日期格式的方法
2018/03/15 Javascript
在微信小程序里使用watch和computed的方法
2018/08/02 Javascript
JS实现图片切换特效
2019/12/23 Javascript
小程序实现背景音乐播放和暂停
2020/06/19 Javascript
python使用multiprocessing模块实现带回调函数的异步调用方法
2015/04/18 Python
为Python的Tornado框架配置使用Jinja2模板引擎的方法
2016/06/30 Python
Python绑定方法与非绑定方法详解
2017/08/18 Python
python3 pillow生成简单验证码图片的示例
2017/09/19 Python
Python实现简单网页图片抓取完整代码实例
2017/12/15 Python
详解django三种文件下载方式
2018/04/06 Python
pandas筛选某列出现编码错误的解决方法
2018/11/07 Python
python基于celery实现异步任务周期任务定时任务
2019/12/30 Python
Python如何获取文件指定行的内容
2020/05/27 Python
Python colormap库的安装和使用详情
2020/10/06 Python
Sephora丝芙兰菲律宾官方网站:购买化妆品和护肤品
2017/04/05 全球购物
英国工具中心:UK Tool Centre
2017/07/10 全球购物
Jdbc数据访问技术面试题
2012/03/30 面试题
农业开发项目建议书
2014/05/16 职场文书
2014年人力资源工作总结
2014/11/19 职场文书
幼儿园2016圣诞节活动总结
2016/03/31 职场文书
python识别围棋定位棋盘位置
2021/07/26 Python