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 相关文章推荐
javascript开发技术大全 第4章 直接量与字符集
Jul 03 Javascript
基于jQuery实现图片的前进与后退功能
Apr 24 Javascript
JS关键字球状旋转效果的实例代码
Nov 29 Javascript
使用javascript获取页面名称
Dec 23 Javascript
利用js实现禁止复制文本信息
Jun 03 Javascript
动态JavaScript所造成一些你不知道的危害
Sep 25 Javascript
微信小程序 表单Form实例详解(附源码)
Dec 22 Javascript
angular2中Http请求原理与用法详解
Jan 11 Javascript
详解使用VUE搭建后台管理系统(vue-cli更新至3.0)
Aug 22 Javascript
vuex actions传递多参数的处理方法
Sep 18 Javascript
微信小程序实现的图片保存功能示例
Apr 24 Javascript
浅析Angular 实现一个repeat指令的方法
Jul 21 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
Zend Framework开发入门经典教程
2016/03/23 PHP
PHP读取CSV大文件导入数据库的实例
2017/07/24 PHP
动态加载js的几种方法
2006/10/23 Javascript
JavaScript 拖拉缩放效果
2008/12/10 Javascript
JSON JQUERY模板实现说明
2010/07/03 Javascript
非阻塞动态加载javascript广告实现代码
2010/11/17 Javascript
JavaScript 匿名函数(anonymous function)与闭包(closure)
2011/10/04 Javascript
javascript重写alert方法的实例代码
2013/03/29 Javascript
jquery单选框radio绑定click事件实现方法
2015/01/14 Javascript
url中的特殊符号有什么含义(推荐)
2016/06/17 Javascript
javascript实现简单的可随机变色网页计算器示例
2016/12/30 Javascript
详解JS异步加载的三种方式
2017/03/07 Javascript
Angular学习教程之RouterLink花式跳转
2018/05/03 Javascript
js中位运算的运用实例分析
2018/12/11 Javascript
基于 jQuery 实现键盘事件监听控件
2019/04/04 jQuery
vue ssr+koa2构建服务端渲染的示例代码
2020/03/23 Javascript
基于leaflet.js实现修改地图主题样式的流程分析
2020/05/15 Javascript
vue-cli3自动消除console.log()的调试信息方式
2020/10/21 Javascript
Python回文字符串及回文数字判定功能示例
2018/03/20 Python
Python中将变量按行写入txt文本中的方法
2018/04/03 Python
python读取和保存图片5种方法对比
2018/09/12 Python
Python脚本修改阿里云的访问控制列表的方法
2019/03/08 Python
Django ORM 聚合查询和分组查询实现详解
2019/08/09 Python
python django 原生sql 获取数据的例子
2019/08/14 Python
利用Python产生加密表和解密表的实现方法
2019/10/15 Python
python多项式拟合之np.polyfit 和 np.polyld详解
2020/02/18 Python
在pycharm中debug 实时查看数据操作(交互式)
2020/06/09 Python
Python无损压缩图片的示例代码
2020/08/06 Python
CSS3的一个简单导航栏实现
2015/08/03 HTML / CSS
服务员自我评价
2014/01/25 职场文书
2014年助理工程师工作总结
2014/11/14 职场文书
搞笑老公保证书
2015/02/26 职场文书
我的中国梦主题教育活动总结
2015/05/07 职场文书
积极心理学课程心得体会
2016/01/22 职场文书
2017公司年会主持人开幕词
2016/03/04 职场文书
2016年万圣节活动总结
2016/04/05 职场文书