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 相关文章推荐
在 IE 中调用 javascript 打开 Excel 表
Dec 21 Javascript
QUnit jQuery的TDD框架
Nov 04 Javascript
FusionCharts图表显示双Y轴双(多)曲线
Nov 22 Javascript
Javascript算符的优先级介绍
Mar 20 Javascript
教你用AngularJS框架一行JS代码实现控件验证效果
Jun 23 Javascript
JavaScript语言对Unicode字符集的支持详解
Dec 30 Javascript
js实现常用排序算法
Aug 09 Javascript
Vue2.0实现购物车功能
Jun 05 Javascript
每个 JavaScript 工程师都应懂的33个概念
Oct 22 Javascript
Vue2 添加数据可视化支持的方法步骤
Jan 02 Javascript
js实现无缝轮播图效果
Mar 09 Javascript
vue-cli4.x创建企业级项目的方法步骤
Jun 18 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
SESSION信息保存在哪个文件目录下以及能够用来保存什么类型的数据
2012/06/17 PHP
php输出xml必须header的解决方法
2014/10/17 PHP
PHP多线程编程之管道通信实例分析
2015/03/07 PHP
PHP编程中的__clone()方法使用详解
2015/11/27 PHP
PHP PDOStatement::fetchColumn讲解
2019/01/31 PHP
用javascript实现给图片加链接
2007/08/15 Javascript
读jQuery之五(取DOM元素)
2011/06/20 Javascript
form表单只提交数据而不进行页面跳转的解决方案
2013/09/18 Javascript
一张Web前端的思维导图分享
2015/07/03 Javascript
jquery实现的仿天猫侧导航tab切换效果
2015/08/24 Javascript
js图片轮播效果实现代码
2020/04/18 Javascript
JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例
2016/01/26 Javascript
JavaScript 函数模式详解及示例
2016/09/07 Javascript
详解Node.js串行化流程控制
2017/05/04 Javascript
vue2.0 自定义 饼状图 (Echarts)组件的方法
2018/03/02 Javascript
Javascript的console['']常用输入方法汇总
2018/04/26 Javascript
Vue自定义指令封装节流函数的方法示例
2018/07/09 Javascript
Vue cli构建及项目打包以及出现的问题解决
2018/08/27 Javascript
vue: WebStorm设置快速编译运行的方法
2018/10/18 Javascript
nodejs中实现用户注册路由功能
2019/05/20 NodeJs
2020淘宝618理想生活列车自动领喵币js脚本的代码
2020/06/02 Javascript
Python中super的用法实例
2015/05/28 Python
Python自动扫雷实现方法
2015/07/25 Python
Python文件和流(实例讲解)
2017/09/12 Python
python如何使用unittest测试接口
2018/04/04 Python
使用python+whoosh实现全文检索
2019/12/09 Python
python 普通克里金(Kriging)法的实现
2019/12/19 Python
flask框架渲染Jinja模板与传入模板变量操作详解
2020/01/25 Python
CSS3实现的炫酷菜单代码分享
2015/03/12 HTML / CSS
canvas 实现 github404动态效果的示例代码
2017/11/15 HTML / CSS
澳大利亚Rockwear官网:女子瑜伽、健身和运动服
2021/01/26 全球购物
Javascript如何发送一个Ajax请求
2015/01/26 面试题
建筑班组长岗位职责
2014/01/02 职场文书
教师节商场活动方案
2014/02/13 职场文书
班级出游活动计划书
2014/08/15 职场文书
反四风个人对照检查材料
2014/09/26 职场文书