element-ui周选择器,如何获取年、周、起止日期?

说明

版本:vue2、element-ui@2.15.14
element-ui的日期选择器可以设为周,即type=week,官方示例如下:
在这里插入图片描述
如果你什么都不操作,那么获取的周的值为:

value1: Tue Aug 06 2024 00:00:00 GMT+0800 (中国标准时间)

如果给周选择器设置value-format,那么用weekValue值进行计算的时候,大概率会报错!
那么,怎能能同时获取所选周的年份、第几周、周的起止日期呢?

实现步骤

效果图:

在这里插入图片描述

代码:
 <el-date-pickerv-model="weekValue"type="week"format="yyyy 第 WW 周"placeholder="选择周":picker-options="weekOptions"style="width: 100%;"@change="changeWeek"
>
</el-date-picker>
export default {data() {return {weekValue: null,weekOptions: {firstDayOfWeek: 1,}}}methods: {changeWeek(val) {const year = val.getFullYear();const firstDayOfYear = new Date(year, 0, 1);const pastDaysOfYear = Math.floor((val - firstDayOfYear) / (24 * 60 * 60 * 1000));const week = Math.ceil((pastDaysOfYear + firstDayOfYear.getDay()) / 7);let startTime = new Date(val.getTime()); //开始时间let endTime = new Date(val.getTime() + (24 * 60 * 60 * 1000) * 6); //结束时间let timeArr = [startTime.toISOString().slice(0, 10), endTime.toISOString().slice(0, 10)];console.log('周的起止日期', timeArr)console.log('year', year)console.log('week', week)}}
}
简单解析
  • 步骤一:给周的picker-options属性的firstDayOfWeek设置1,即默认周的第一天是周一,element-ui的默认值为7,即周日;这样你就能根据所选值计算出周的起止日期了,改变选择时周的val值就是周一,加+就是所选的周日了。
  • 步骤二:计算年份:val.getFullYear()
  • 步骤三:根据年份计算是第几周,最后自己赋值给响应的变量即可!

最后

小编是前端开发者,目前正在持续更新《若依nodejs全栈》系列,请大家多多关注。

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

asp.net医院权限管理系统

医院管理的设计与实现程序 医院管理系统asp.netsqlserver 医院权限管理系统sqlserver 挂号管理 挂号类型管理 挂号登记 挂号查询 药品管理 计量单位管理药 品分类管理 药品编辑 病人资料 病人资料录入 病人资料编辑 病人资料查询 住院管理 住院登记 住院查询办理出院 病例管理 …

鸿蒙HarmonyOS开发:如何灵活运用动画效果提升用户体验

文章目录 一、动画概述1、动画的目的 二、显式动画 (animateTo)1、接口2、参数3、AnimateParam对象说明4、示例5、效果 三、属性动画 (animation)1、接口2、参数3、AnimateParam对象说明4、系统可动画属性4、示例5、效果 一、动画概述 动画的原理是在一个时间段内&#xff0c;…

HAProxy原理及实例

目录 目录 haproxy简介 haproxy的基本信息 haproxy下载并查看版本 haproxy的基本配置信息 global配置 ​编辑多进程和多线程 启用多进程 启用多线程 haproxy开启多线程和多进程有什么用 proxies配置 defaults frontend backend listen socat工具 实例&#xff1a…

Particle Swarm Optimization粒子群算法

目录 1.粒子群算法入门 1.1 简单的优化问题 1.1.1 盲目搜索 1.1.2 粒子群算法流程图 1.1.3 粒子群算法的核心公式 1.1.4 预设参数 1.1.5 初始化粒子的位置和速度 1.1.6 计算适应度 1.1.7 循环体&#xff1a;更新粒子速度和位置 1.1.8 模型改进 2.深入研究粒子群算法 …

CLEFT 基于高效大语言模型和快速微调的语言-图像对比学习

CLEFT: Language-Image Contrastive Learning with Efficient Large Language Model and Prompt Fine-Tuning github.com paper CLEFT是一种新型的对比语言图像预训练框架&#xff0c;专为医学图像而设计。它融合了医学LLM的预训练、高效微调和提示上下文学习&#xff0c;展…

【Linux】线程同步与互斥

目录 线程相关问题 线程安全 常见的线程安全的情况 常见的线程不安全的情况 可重入函数与不可重入函数 常见不可重入的情况 常见可重入的情况 可重入与线程安全的关系 联系 区别 线程同步与互斥 互斥锁 使用 死锁 死锁的四个必要条件 如何避免死锁 条件变量 同…

Unity读取Android外部文件

最近近到个小需求,需要读Android件夹中的图片.在这里做一个记录. 首先读写部分,这里以图片为例子: 一读写部分 写入部分: 需要注意的是因为只有这个地址支持外部读写,所以这里用到的地址都以 :Application.persistentDataPath为地址起始. private Texture2D __CaptureCamera…

【JavaEE】初步认识多线程

&#x1f525;个人主页&#xff1a; 中草药 &#x1f525;专栏&#xff1a;【Java】登神长阶 史诗般的Java成神之路 &#x1f3b7; 一.线程 1.概念 线程&#xff08;Thread&#xff09;是在计算机科学中&#xff0c;特别是操作系统领域里的一个关键概念。它是操作系统能够进行…

Android中的Binder

binder是Android平台的一种跨进程通信&#xff08;IPC&#xff09;机制&#xff0c;从应用层角度来说&#xff0c;binder是客户端和服务端进行通信的媒介。 ipc原理 ipc通信指的是两个进程之间交换数据&#xff0c;如图中的client进程和server进程。 Android为每个进程提供了…

【聚类算法】

聚类算法是一种无监督学习方法&#xff0c;用于将数据集中的数据点自动分组到不同的类别中&#xff0c;这些类别也称为“簇”或“群”。聚类的目标是让同一簇内的数据点尽可能相似&#xff0c;而不同簇之间的数据点尽可能不相似。聚类算法广泛应用于多种领域&#xff0c;如数据…

xtrabackup搭建MySQL 8.0 主从复制

xtrabackup搭建MySQL 8.0 主从复制 安装MySQL 8.0.37安装xtrabackupGTIDs初始化从库参考&#xff1a;GTID概述GTID相较与传统复制的优势GTID自身存在哪些限制GTID工作原理简单介绍如何开启GTID复制GTID与传统模式建立复制时候语句的不同点传统复制GTID复制 GTID同步状态简单解析…

Linux系统编程 day09 线程同步

Linux系统编程 day09 线程同步 1.互斥锁2.死锁3.读写锁4.条件变量&#xff08;生产者消费者模型&#xff09;5.信号量 1.互斥锁 互斥锁是一种同步机制&#xff0c;用于控制多个线程对共享资源的访问&#xff0c;确保在同一时间只有一个线程可以访问特定的资源或执行特定的操作…

机器学习第一课

1.背景 有监督学习&#xff1a;有标签&#xff08;连续变量&#xff08;回归问题&#xff1a;时间序列等&#xff09;、分类变量&#xff08;分类&#xff09;&#xff09; 无监督学习&#xff1a;没有标签&#xff08;聚类、关联&#xff08;相关性分析&#xff1a;哪些相关…

代码随想录算法训练营Day35 | 01背包问题 | 416. 分割等和子集

今日任务 01背包问题 题目链接&#xff1a; https://kamacoder.com/problempage.php?pid1046题目描述&#xff1a; Code #include <iostream> #include <vector> #include <functional> #include <algorithm>using namespace std;int main(void)…

工作随记:我在OL8.8部署oracle rac遇到的问题

文章目录 一、安装篇问题1&#xff1a;[INS-08101] Unexpected error while executing the action at state:supportedosCheck问题1解决办法&#xff1a;问题2&#xff1a;[INS-06003] Failed to setup passwordless SSH connectivity with thefollowing nodeis): [xxxx1, xxxx…

go语言后端开发学习(四) —— 在go项目中使用Zap日志库

一.前言 在之前的文章中我们已经介绍过如何使用logrus包来作为我们在gin框架中使用的日志中间件&#xff0c;而今天我们要介绍的就是我们如何在go项目中如何集成Zap来作为日志中间件 二.Zap的安装与快速使用 和安装其他第三方包没什么区别&#xff0c;我们下载Zap包只需要执…

pod详解 list-watch机制 预选优选策略 如何指定节点调度pod

K8S是通过 list-watch 机制实现每个组件的协同工作 controller-manager、scheduler、kubelet 通过 list-watch 机制监听 apiserver 发出的事件&#xff0c;apiserver 也会监听 etcd 发出的事件 scheduler的调度策略&#xff1a; 预选策略&#xff08;Predicates&#xff09;…

Pytorch_cuda版本的在线安装命令

pip3 install torch torchvision torchaudio --index-url https://download.pytorch.org/whl/cu121 运行效果如下&#xff1a; 这个方法是直接从pytorch官网进行在线下载和安装。 cu121&#xff0c;表示当前您安装的cuda版本是12.1

【Redis】持久化—RDB和AOF机制

目录 什么是持久化&#xff1f; RDB&#xff08;定期备份&#xff09; 触发机制 bgsave命令的运作流程 RDB文件的处理 RDB文件 RDB的优缺点 AOF&#xff08;实时备份&#xff09; AOF工作流程 AOF 缓冲区同步⽂件策略 AOF重写机制 AOF重写流程 Redis根据持久化文件…

2015款到18款奔驰GLC升级为2021款的HU6主机后,实现了触摸屏人机交互和Carplay功能

奔驰GLC是北京奔驰生产的一款中型SUV。有车主将2015款奔驰GLC升级为2021款的HU6主机后&#xff0c;实现了触摸屏人机交互和Carplay功能。该车主分享了使用体验&#xff1a; • Carplay功能&#xff1a;可以直接在车机大屏幕上显示导航、音乐和电话信息&#xff0c;让用户在开车…