el-date-picker 结合dayjs 快速实现周选择、月选择,并设置控件的显示格式

news2024/11/27 14:28:08

目录

  • 情况需求
  • 思路:使用el-date-picker 配置type属性,结合dayjs
    • dayjs的安装以及常用api
    • 实现效果图
  • 实现代码
  • 其他配置
    • 设置周选择控件显示一行为星期一 至 星期日

情况需求

在传递查询条件时,要求时间参数需要为 一周一个月

思路:使用el-date-picker 配置type属性,结合dayjs

dayjs的安装以及常用api

此次代码中使用到了dayjs 获取当前周、当前月的方法。能够快速获取我们想要的数据!
dayjs(val).startOf('month').format('YYYY-MM-DD HH:mm:ss');
dayjs(val).endOf('month').format('YYYY-MM-DD HH:mm:ss');

dayjs(val).startOf('week').add(1, 'day').format('YYYY-MM-DD HH:mm:ss');
dayjs(val).endOf('week').add(1, 'day').format('YYYY-MM-DD HH:mm:ss');

dayjs的安装以及常用的处理方法可参阅之前写的一篇博客 ----《Day.js 安装使用,以及常用知识点记录》

实现效果图

提供选择器,可供选择为 按月选择按周选择
type=‘month’ / type=‘week’
按月选择

按周选择

实现代码

<el-select
  v-model="dateType"
  placeholder="电压等级"
  @change="dateTypeChange"
  style="width: 110px"
>
  <el-option label="按月选择" :value="0"></el-option>
  <el-option label="按周选择" :value="1"></el-option>
</el-select>
<el-date-picker
  style="width: 380px"
  :format="`  ${queryForm.startDate} 至 ${queryForm.endDate}`"
  v-if="dateType === 0"
  v-model="dateTime"
  type="month"
  @change="dateTimeChange"
  placeholder="选择月">
</el-date-picker>
<el-date-picker
  style="width: 380px"
  :picker-options="{ firstDayOfWeek: 1 }"
  :format="`  ${queryForm.startDate} 至 ${queryForm.endDate}`"
  v-if="dateType === 1"
  v-model="dateTime"
  type="week"
  @change="dateTimeChange"
  placeholder="选择周">
</el-date-picker>
// 时间选择类型切换
dateTypeChange() {
  this.dateTime = ' ';
},
// 时间选择改变
dateTimeChange(val) {
  if(val) {
    if(this.dateType === 0) {
      this.queryForm.startDate = dayjs(val).startOf('month').format('YYYY-MM-DD HH:mm:ss');
      this.queryForm.endDate = dayjs(val).endOf('month').format('YYYY-MM-DD HH:mm:ss');
    } else {
      this.queryForm.startDate = dayjs(val).startOf('week').add(1, 'day').format('YYYY-MM-DD HH:mm:ss');
      this.queryForm.endDate = dayjs(val).endOf('week').add(1, 'day').format('YYYY-MM-DD HH:mm:ss');
    }
  }
  console.log(this.queryForm.startDate, this.queryForm.endDate);
},

其他配置

设置周选择控件显示一行为星期一 至 星期日

因为按周选取是从 星期一 至 星期日
所以这里给el-date-picker 按周选择,配置了周起始日为星期一
:picker-options=“{ firstDayOfWeek: 1 }”
这样选择的时候,控件一行显示为 星期一 至 星期日,而不是 星期日 至 星期六
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/650930.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

系统移植 编译uboot和linux源码及驱动配置

写在前面&#xff1a;若是有些命令执行失败&#xff0c;前面添加sudo后再执行 目录 写在前面&#xff1a;若是有些命令执行失败&#xff0c;前面添加sudo后再执行 uboot源码获取和编译&#xff1a; Linux源码获取和编译 关于驱动配置 uboot源码获取和编译&#xff1a; 获…

驾驶安全、便捷,尽在车载Notification开发的掌握

Notification 概述 通知&#xff08;Notification&#xff09;是移动应用中常用的一种交互方式&#xff0c;用于向用户展示重要的信息、提醒事件或提供即时反馈等。通知可以以弹出窗口、图标或声音等形式呈现给用户。 以下是关于通知的一些基本概念和要点&#xff1a; 通知栏…

React基础教程(三):JSX语法

React基础教程(三)&#xff1a;JSX语法 1、JSX简介 全称&#xff1a;JavaScript XMLreact定义的一种类似于XML的JS扩展语法&#xff1a;JSXML本质是React.createElement(component, props, ...children)方法的语法糖作用&#xff1a;用来简化创建虚拟DOM&#xff08;注意&…

【数据库三】MySQL事务

MySQL事务 1.事务的概念2.事务的ACID特点3.知识点总结 1.事务的概念 事务是一种机制、一个操作序列&#xff0c;包含了一组数据库操作命令&#xff0c;并且把所有的命令作为一个整体&#xff0c;一起向系统提交或撤销操作请求&#xff0c;即这一组数据库命令要么都执行&#x…

JAVA0615_2

04JDK的下载和安装 05常用dos命令

golang-gin-mysql转gorm-struct--gen-model

背景:python-django项目用go-gin重构&#xff0c;数据库已存在&#xff0c;gin中使用gorm 所以需要工具将mysql数据库中的表结构转到orm的model中。 前提&#xff1a;因为国内访问github需要稳定的代理 Goproxy.cn 推荐这个 1.在项目路径中下载gen-model模块 go get -u git…

测试员怎么克服职业惯性获得成功?

长期从事质量控制的测试员&#xff0c;容易患上职业病——挑毛病、谈风险&#xff0c;踩刹车&#xff0c;大部分时候说的和做的都对。正所谓“手里拿个锤子&#xff0c;看什么都是钉子”。但事情成功者往往是那些有想法&#xff0c;有冲劲的乐观主义者&#xff0c;正所谓“悲观…

使用docker快速搭建redis哨兵模式

说明 本文主要参考&#xff1a; https://www.cnblogs.com/coderaniu/p/15352323.html https://developer.aliyun.com/article/892805 但是这两篇博客均缺失部分关键性细节&#xff0c;所以重新撰文。读者可以结合本文和上述文章一起阅读。 安装步骤 安装docker和docker-co…

【机器学习】——深度学习与神经网络

目录 引入 一、神经网络及其主要算法 1、前馈神经网络 2、感知器 3、三层前馈网络&#xff08;多层感知器MLP&#xff09; 4、反向传播算法 二、深度学习 1、自编码算法AutorEncoder 2、自组织编码深度网络 ①栈式AutorEncoder自动编码器 ②Sparse Coding稀疏编码 …

【Java基础学习打卡10】JDK下载与安装

目录 前言一、JDK下载1.JDK官网2.版本说明3.JDK 11下载 二、JDK安装1.JDK安装2.JDK安装目录介绍 总结 前言 本文主要介绍JDK 11 如何从官网下载&#xff0c;及如何在 Windows 11 系统安装&#xff0c;下载与安装很简单&#xff0c;主要是有少许的细节需要说明。 一、JDK下载 …

AI实战营第二期 第九节 《底层视觉与MMEditing》——笔记10

文章目录 AI实战营第二期 第九节 《底层视觉与MMEditing》什么是超分辨率图像分辨率的目标应用方向超分的类型单图超分的解决思路 深度学习时代的超分辨率算法SRCNNFast SRCNNSRResNet 感知损失 VS. 均方误差均方误差感知损失 对抗生成网络GAN应用于超分辨率如何学习生成器网络…

flutter:数据持久化

简单的数据持久化 保存数据到本地磁盘是应用程序常用功能之一&#xff0c;比如保存用户登录信息、用户配置信息等。而保存这些信息通常使用 shared_preferences&#xff0c;它保存数据的形式为 Key-Value&#xff08;键值对&#xff09;&#xff0c;支持 Android 和 iOS。shar…

1. linux系统下在QT中配置OPenCV开发环境

1. 说明: 在Linux系统下配置OpenCV的开发环境,需要在官网上下载源码,并使用CMake工具对源码进行编译,与在Windows系统中配置相比复杂许多,本文linux系统为linux minit,opencv是最新版本4.7.0,不过对于linux和opencv的版本要求行不高。 效果展示: 2. 配置步骤: 2.1 …

深度学习(22)——YOLO系列

深度学习&#xff08;22&#xff09;——YOLO系列 文章目录 深度学习&#xff08;22&#xff09;——YOLO系列1. 物体检测方法的两种类型2. YOLO-v12.1 网络结构2.2 loss 函数2.3 NMS(非极大值抑制)2. 4 优缺点 3. YOLO v23. 1 相较于v1改进点3. 2 网络结构3.3 感受野3.4 特征融…

使用无代码工具开发一款问卷调查小程序

目录 1 创建项目2 创建页面3 创建后台4 前端调用后端5 预览总结 自2017年小程序概念提出以来&#xff0c;越来越多的场景已经可以在小程序上实现。比如我们在线预约、点餐、查询各类信息、购物等等。小程序的特点是不需要预先按照应用程序&#xff0c;使用时打开&#xff0c;不…

dpdk21.11 添加igb_uio模块

文章目录 前言igb_uio模块下载链接编译编译方式1&#xff1a;make编译方式2&#xff1a;mesonninja1. 解压&#xff0c;复制 dpdk-kmods/linux/igb_uio/ 到 dpdk-stable-21.11.4/kernel/linux/ 目录下2. vi dpdk-stable-21.11.4/kernel/linux/meson.build 4创建文件 meson.buil…

大模型入门(五)—— 基于peft微调ChatGLM模型

ChatGLM 是基于 General Language Model (GLM) 架构&#xff0c;针对中文问答和对话进行了优化。经过中英双语训练&#xff0c;辅以监督微调、反馈自助、人类反馈强化学习等技术&#xff0c;ChatGLM因为是中文大模型&#xff0c;在中文任务的表现要优于LLaMa&#xff0c;我在一…

ARP协议,带你了解ARP协议

目录 一、ARP协议概述 二、使用ARP的四种情况 三、ARP缓存 四、ARP的工作原理 1. 地址解析 2. 地址缓存 五、ARP报文格式 1. ARP请求报文格式 2. ARP响应报文格式 六、免费ARP 七、代理ARP 一、ARP协议概述 ARP&#xff08;Address Resolution Protocol&#xff09;地…

1、产品经理的宏观定义

什么是产品经理&#xff1f;为了引出来定义&#xff0c;我们来看一段对话&#xff0c;这个对话方式中的场景就是小明上了一年班&#xff0c;回家过年了&#xff0c;那亲戚可能就会会问小明在外面是做什么的&#xff1f; 亲戚&#xff1a;小明&#xff0c;你在外面是做什么的啊&…

# SIG Mesh协议学习

SIG Mesh协议学习 1. 简介 Bluetooth SIG组织在2017年7月17日发布了蓝牙Mesh标准. 蓝牙Mesh不同于传统Bluetooth Low Energy(BLE)协议的1对1, 1对多的通信方式, 它实现了多对多的通信. 这使得mesh网络中的各个节点之间可以相互通信. 蓝牙Mesh协议建立在BLE的物理层和链路层之…