当前位置: 首页 > news >正文

element时间选择器的默认值

概览:vue使用element组件,需要给时间选择器设置默认值,场景一:默认时间选择器,场景二:时间范围选择器,开始时间和结束时间。

一、默认时间选择器

实现思路:

element组件的v-model绑定的数据变化,则时间选择器的默认值变化。可以在生命周期mounted() 或者 onMounted()组件挂载时进行赋值。

实现代码:

1.1布局:

<div class="search_right"><div class="echart1_titleBox">时间:</div><div class="searchInnerBox"><el-date-picker v-model="data.crewOverViewTime" type="date" value-format="YYYY-MM-DD"placeholder="请选择" clearable :default-value="new Date()"@change="handleChangeTime" /></div>
</div>

1.2逻辑: 

/** * 默认选中当前时间*/
let defalutTime = replaceTime(new Date());
data.crewOverViewTime = defalutTime
const replaceTime = (date) => {// 获取当前月份let nowMonth = date.getMonth() + 1;// 获取当前是几号let strDate = date.getDate();// 添加分隔符“-”let seperator = "-";// 对月份进行处理,1-9月在前面添加一个“0”if (nowMonth >= 1 && nowMonth <= 9) {nowMonth = "0" + nowMonth;}// 对月份进行处理,1-9号在前面添加一个“0”if (strDate >= 0 && strDate <= 9) {strDate = "0" + strDate;}// 最后拼接字符串,得到一个格式为(yyyy-MM-dd)的日期let nowDate = date.getFullYear() + seperator + nowMonth + seperator + strDate;return nowDate;
};

1.3效果展示

二、时间范围选择器

实现思路:

element组件的v-model绑定数据,在组件挂载的生命周期onMounted()进行赋值。注意:时间范围选择器的v-modle绑定的动态数据data是一个数组,数组索引=0是开始时间,数组索引=1是结束时间。

实现代码:

1.1页面:

<div class="searchTimerBox"><div class="searchTimerBox_titleBox">时间:</div><div class="searchInnerBox"><el-date-picker v-model="data.valueTwoTimer" type="monthrange" value-format="YYYY-MM"range-separator="到" start-placeholder="开始时间" end-placeholder="结束时间":unlink-panels="true" @change="handleChangeTime" /></div>
</div>

1.2逻辑:

/*** 默认选中此月往前推的12个月*/
const getTimerPiker = () => {let newData = new Date()let seperator = "-";let nowMonth = newData.getMonth() + 1if (nowMonth >= 1 && nowMonth <= 9) {nowMonth = "0" + nowMonth;}nowMonth = newData.getFullYear() + seperator + nowMonth;const beforeMonth = minDate(newData, 11)data.valueTwoTimer.push(beforeMonth)data.valueTwoTimer.push(nowMonth)
}
//获取当前日期的 前n个月
const minDate = (_nowDate,_latestMonth) => {_nowDate.setMonth(_nowDate.getMonth() - _latestMonth)let year = _nowDate.getFullYear();let month = (_nowDate.getMonth() + 1).toString().padStart(2, '0');let time = year + '-' + monthreturn time
};

1.3效果展示

http://www.lryc.cn/news/106140.html

相关文章:

  • fiddler过滤器
  • 面试必考精华版Leetcode2130.链表最大孪生和
  • qemu kvm 新建虚拟机
  • Charles抓包工具使用(一)(macOS)
  • 2023年8月美团外卖3-18元红包优惠券天天领取活动日历及美团外卖红包领取使用
  • 深度学习各层负责什么内容?
  • 【硬件设计】模拟电子基础二--放大电路
  • 基于应用值迭代的马尔可夫决策过程(MDP)的策略的机器人研究(Matlab代码实现)
  • 控件旋转90度,并跟随大小缩放
  • 软件外包开发的PHP开发框架
  • D2L学习记录-10-词嵌入word2vec
  • 海外独立站怎么搭建?7个海外独立站搭建指南
  • flask中实现restful-api
  • Centos7 安装man中文版手册
  • untiy代码打压缩包,可设置密码
  • 【iOS】—— UIKit相关问题
  • Linux系统防火墙Firewalld
  • STM3232 GPIO的配置寄存器(为了移植IIC)
  • K8s的详细介绍
  • JavaWeb(8)——前端综合案例2(节流和防抖)
  • Spring优雅的在事务提交/回滚前后插入业务逻辑
  • day48-ajax+SSM分页
  • 如何在本地环境使用 CodeQL 扫描出代码中的安全漏洞?
  • 关于领导要求logback日志时间格式要求为“年-月-日 时:分:秒,毫秒”
  • 软件测试--一些生命周期
  • Mr. Cappuccino的第57杯咖啡——简单手写Mybatis大致原理
  • 机房环境、动力、网络、安防,帮您提高运维效率,确保机房安全
  • 大数据课程E1——Flume的概述
  • 01.Redis实现发送验证码
  • Vue中对组件的调用