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 相关文章推荐
AJAX异步从优酷专辑中采集所有视频及信息(JavaScript代码)
Nov 20 Javascript
js注意img图片的onerror事件的分析
Jan 01 Javascript
JavaScript高级程序设计 事件学习笔记
Sep 10 Javascript
深入理解Javascript作用域与变量提升
Dec 09 Javascript
javascript对象的使用和属性操作示例详解
Mar 02 Javascript
jQuery自带的一些常用方法总结
Sep 03 Javascript
JS实现文字掉落效果的方法
May 06 Javascript
实例详解JSON数据格式及json格式数据域字符串相互转换
Jan 07 Javascript
JS Canvas定时器模拟动态加载动画
Sep 17 Javascript
js实现滑动到页面底部自动加载更多功能
Feb 15 Javascript
javascript实现文字无缝滚动效果
Aug 26 Javascript
webpack+vue中使用别名路径引用静态图片地址
Nov 20 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
PHP下利用header()函数设置浏览器缓存的代码
2010/09/01 PHP
供参考的 php 学习提高路线分享
2011/10/23 PHP
php编写的简单页面跳转功能实现代码
2013/11/27 PHP
PHP实现获取ip地址的5种方法,以及插入用户登录日志操作示例
2019/02/28 PHP
PHP超全局变量实现原理及代码解析
2020/09/01 PHP
让回调函数 showResponse 也带上参数的代码
2007/08/13 Javascript
ASP中用Join和Array,可以加快字符连接速度的代码
2007/08/22 Javascript
基于jquery点击自以外任意处,关闭自身的代码
2012/02/10 Javascript
JavaScript实现x秒后自动跳转到一个页面
2013/01/03 Javascript
js加强的经典分页实例
2013/03/15 Javascript
javascript中call和apply方法浅谈
2013/09/27 Javascript
jquery属性选择器not has怎么写 行悬停高亮显示
2013/11/13 Javascript
JS+CSS实现实用的单击输入框弹出选择框的方法
2015/02/28 Javascript
js获取新浪天气接口的实现代码
2016/06/06 Javascript
javascript类型系统——undefined和null全面了解
2016/07/13 Javascript
浅谈JS验证表单文本域输入空格的问题
2017/02/14 Javascript
jquery中attr、prop、data区别与用法分析
2019/09/25 jQuery
flexible.js实现移动端rem适配方案
2020/04/07 Javascript
JS实现省市县三级下拉联动
2020/04/10 Javascript
[06:35]2014DOTA2国际邀请赛 老男孩梦圆西雅图中国军团世界最强
2014/07/22 DOTA
Python抓取聚划算商品分析页面获取商品信息并以XML格式保存到本地
2018/02/23 Python
Python BS4库的安装与使用详解
2018/08/08 Python
python清除字符串前后空格函数的方法
2018/10/21 Python
使用Python做垃圾分类的原理及实例代码附源码
2019/07/02 Python
wxPython实现文本框基础组件
2019/11/18 Python
Python txt文件如何转换成字典
2020/11/03 Python
python 实现全球IP归属地查询工具
2020/12/18 Python
Django使用django-simple-captcha做验证码的实现示例
2021/01/07 Python
英国香水店:The Perfume Shop
2017/03/27 全球购物
Athleta官网:购买女士瑜伽服、技术运动服和休闲运动服
2020/11/12 全球购物
保健品市场营销方案
2014/03/31 职场文书
2014统计局民主生活会对照检查材料思想汇报
2014/10/02 职场文书
茶楼服务员岗位职责
2015/02/09 职场文书
幼儿园教学工作总结2015
2015/05/12 职场文书
六年级作文之家庭作文
2019/12/12 职场文书
Golang 切片(Slice)实现增删改查
2022/04/22 Golang