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实现奇偶行赋值不同css值
Feb 17 Javascript
JavaScript NaN和Infinity特殊值 [译]
Sep 20 Javascript
Vue.js render方法使用详解
Apr 05 Javascript
利用vueJs实现图片轮播实例代码
Jun 03 Javascript
JavaScript之iterable_动力节点Java学院整理
Jun 29 Javascript
浅谈vue的踩坑路
Aug 31 Javascript
Javascript之高级数组API的使用实例
Mar 08 Javascript
浅谈一个webpack构建速度优化误区
Jun 24 Javascript
小程序实现分类页
Jul 12 Javascript
vue 组件基础知识总结
Jan 26 Vue.js
如何在JavaScript中使用localStorage详情
Feb 04 Javascript
MutationObserver在页面水印实现起到的作用详解
Jul 07 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中$this-&amp;gt;含义分析
2009/11/29 PHP
thinkPHP实现表单自动验证
2014/12/24 PHP
阿里云PHP SMS短信服务验证码发送方法
2017/07/11 PHP
PHP实现获取ip地址的5种方法,以及插入用户登录日志操作示例
2019/02/28 PHP
PHP实现文件上传与下载
2020/08/28 PHP
JS之小练习代码
2008/10/12 Javascript
ExtJs中简单的登录界面制作方法
2010/08/19 Javascript
jquery键盘事件使用介绍
2011/11/01 Javascript
JS获取键盘上任意按键的值(实例代码)
2013/11/12 Javascript
对Jquery中的ajax再封装,简化操作示例
2014/02/12 Javascript
JavaScript避免代码的重复执行经验技巧分享
2014/04/17 Javascript
Nodejs学习笔记之测试驱动
2015/04/16 NodeJs
png在IE6 下无法透明的解决方法汇总
2015/05/21 Javascript
使用jQuery制作Web页面遮罩层插件的实例教程
2016/05/26 Javascript
vue.js+Echarts开发图表放大缩小功能实例
2017/06/09 Javascript
js学习总结_选项卡封装(实例讲解)
2017/07/13 Javascript
vue debug 二种方法
2018/09/16 Javascript
全面分析JavaScript 继承
2019/05/30 Javascript
微信小程序之左右布局的实现代码
2019/12/13 Javascript
微信小程序实用代码段(收藏版)
2019/12/17 Javascript
[47:06]DOTA2上海特级锦标赛主赛事日 - 4 败者组第五轮 MVP.Phx VS EG第一局
2016/03/05 DOTA
Python实现单词翻译功能
2017/06/06 Python
postman模拟访问具有Session的post请求方法
2019/07/15 Python
基于Python实现全自动下载抖音视频
2020/11/06 Python
利用Python批量识别电子账单数据的方法
2021/02/08 Python
HTML5文档结构标签
2017/04/21 HTML / CSS
编写html5时调试发现脚本php等网页js、css等失效
2013/12/31 HTML / CSS
印尼最大的婴儿用品购物网站:Orami
2017/09/28 全球购物
大学生毕业鉴定
2014/01/31 职场文书
《难忘的泼水节》教学反思
2014/02/27 职场文书
中秋节主持词
2014/04/02 职场文书
夏季药店促销方案
2014/08/22 职场文书
2015年学校总务处工作总结
2015/05/19 职场文书
出生证明格式
2015/06/15 职场文书
mysql 带多个条件的查询方式
2021/06/05 MySQL
Python可变集合和不可变集合的构造方法大全
2021/12/06 Python