vue+element设置选择日期最大范围（优秀版）
element的选择日期组件里没有像移动端vant直接设置max-date的api，因此在不能动态设置选择的第二个时间(需要分别选择起止时间和结束时间，但可以加上关联)，
看了很多博客有的效果直接出不来，有的代码格式看不懂要不就是不完全符合自己的需求，自己摸索看前人可取的方法终于实现了（帮后台写的，等写完后台需求已经不需要了，记录下笔记，例子范围是7天）
效果：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
<el-date-picker
v-model="value1"
type="date"
placeholder="开始日期"
value-format="timestamp"
:picker-options="pickerOptions0">
</el-date-picker>
<el-date-picker
v-model="value2"
type="date"
placeholder="结束日期"
value-format="timestamp"
:picker-options="pickerOptions1">
</el-date-picker>
</div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
new Vue({
el: '#app',
data(){
return {
value1:'',
value2:'',
maxLength:7, //设置两个日期的最大间隔
pickerOptions0: {
disabledDate:(time)=>{
if(this.value2!=''){
//console.log(this.value2) //清除结束日期时this.value2的值为null
if(this.value2===null){
return time.getTime() < Date.now();
}else{
let lastTime = this.value2-this.maxLength*24*3600*1000 + 8.64e7
return time.getTime() > this.value2 || time.getTime() < lastTime
}
}else{
return time.getTime() < Date.now(); //将比当前时间还早的时间不可选
}
}
},
pickerOptions1: {
disabledDate:(time)=>{
if(this.value1!=''){
let nextTime = this.value1+this.maxLength*24*3600*1000 - 8.64e7
return time.getTime() < this.value1||time.getTime() > nextTime;
}else{
return time.getTime() < Date.now()
}
}
},
}
},
})
</script>
</html>
vue+element设置选择日期最大范围（优秀版）的更多相关文章
- MTK Android 设置-选择日期格式 [管理和组织首选项，ListPreference,CheckBoxPreference,EditTextPreference,RingtonePreference]
###android.preference.ListPreference的一些特性 android:key 选项的名称或键 android:title 选项的标题 android:summary ...
- layui日历控件设置选择日期不能超过当前日期
layui.use('laydate', function() { var laydate = layui.laydate; laydate.render({ elem : '#begin', max ...
- Vue+Element实现网页版个人简历系统
这篇文章介绍一个使用Vue+Element实现的个人简历系统,主要用到的技术有:vue.element.css3.css定位. 作者在window10进行开发,目前只在chrome上进行过测试,没有大 ...
- vue+element ui 的时间控件选择 年月日时分
前言:工作中用到 vue+element ui 的前端框架,需要选择年月日时分,但element ui官网demo有没有,所以记录一下.转载请注明出处:https://www.cnblogs.com/ ...
- 自定义Vue&Element组件，实现用户选择和显示
在我们很多前端业务开发中,往往为了方便,都需要自定义一些用户组件,一个是减少单一页面的代码,提高维护效率:二个也是方便重用.本篇随笔介绍在任务管理操作中,使用自定义Vue&Element组件, ...
- 在基于ABP框架的前端项目Vue&Element项目中采用日期格式处理，对比Moment.js和day.js的处理
Day.js 是一个轻量的处理时间和日期的 JavaScript 库,和 Moment.js 的 API 设计保持完全一样. 如果您曾经用过 Moment.js, 那么您已经知道如何使用 Day.js ...
- vue+element ui中select组件选择失效问题原因与解决方法
codejing 2020-07-10 09:13:31 652 收藏 分类专栏: Web Vue Element UI 版权 .当表单form赋完值后,如果后续又对form中某一属性值进行操作如 ...
- My97DatePicker设置，包括隐藏 清空，设置最大日期等 转载
My97DatePicker是一款非常灵活好用的日期控件.使用非常简单. 1.下载My97DatePicker组件包 2.在页面中引入该组件js文件: <script type=&quo ...
- Vue+Element UI 实现视频上传
一.前言 项目中需要提供一个视频介绍,使用户能够快速.方便的了解如何使用产品以及注意事项. 前台使用Vue+Element UI中的el-upload组件实现视频上传及进度条展示,后台提供视频上传AP ...
- 循序渐进VUE+Element 前端应用开发(15）--- 用户管理模块的处理
在前面随笔介绍了ABP+Vue前后端的整合处理,包括介绍了ABP的后端设计,以及前端对ABP接口API的ES6的封装,通过JS的继承类处理,极大减少了重复臃肿的代码,可以简化对后端API接口的封装,而 ...
随机推荐
- [HTML、CSS]细节、经验
[版权声明]未经博主同意,谢绝转载!(请尊重原创,博主保留追究权) https://blog.csdn.net/m0_69908381/article/details/130134573 出自[进步* ...
- 【Spring注解驱动开发】@PostConstruct与@PreDestroy源码的执行过程
写在前面 在前面的<[String注解驱动开发]你真的了解@PostConstruct注解和@PreDestroy注解吗?>一文中,我们简单的介绍了@PostConstruct注解与@Pr ...
- 做easyexcel遇到的问题数据库采用的mybatis-plus
导入坐标 <!-- easyexcel依赖--><dependency> <groupId>com.alibaba</groupId> <arti ...
- 基于quartus的高级时序分析
基于quartus的高级时序分析 一.派生时钟和异步存储器 派生时钟就是和独立时钟存在频率或者相位关系的时钟,异步存储器就是具有存储读写异步功能的存储器.在时序分析中,这两个部分的静态时序分析是需要设 ...
- java基础 韩顺平老师的 面向对象（高级） 自己记的部分笔记
373,类变量引出 代码就提到了问题分析里的3点 package com.hspedu.static_; public class ChildGame { public static void mai ...
- KingbaseES中查询对象大小的SQL及函数区别
--查看所有数据库大小 select sys_database.datname, sys_size_pretty(sys_database_size(sys_database.datname)) AS ...
- Hadoop_05 使用xsync脚本命令分发，手动配置脚本
在/usr/local/bin 目录下创建 xsync 文件,向里面添加 1 #!/bin/sh 2 # 获取输入参数个数,如果没有参数,直接退出 3 pcount=$# 4 if((pcount== ...
- RabbitMQ 02 安装
安装 推荐使用Docker进行安装. 执行如下命令. docker run -d --restart always --name rabbitmq \ -e RABBITMQ_DEFAULT_USER ...
- 报表格式太难？一文教你Excel融合分析
Excel是我们最经常使用的处理报表工具了,尤其是金融行业更是需要天天和报表打交道.但是Excel有一个问题,如果面对的数据庞杂,则处理起来就会相当麻烦,当需要从多个数据源获取数据来制作一个报表时,这 ...
- 三步配置阿里巴巴durid监控
三步配置阿里巴巴durid监控 官方文档 环境:jdk17, 框架springboot3 引入依赖 <properties> <druid>1.2.21</druid&g ...