Vue 查看一周日期

Vue3 - Element Plus 日期选择器 el-date-picker,设置 type=week 变成周选择器后,将选择周时修改为 “周一至周日“ 为一组范围(详细示例代码,新手小白秒会) vue3,element-plus,DatePicker日期选择器,el-date-picker,周,type=week,周选择器,日期选择器week怎么拿到具体的时间范围,如何取week周选择器的value值,format如何设置,时间选择器按周选择时展示具体日期范围,vue3elementPlus日期选择器选择一周7天的数据格式怎么拿到,el-date-picker设置type等于week后怎么设置format属性,format和value-format怎么设置,范围选择器周,一周,选择一周7天时间 阅读详情

效果
在这里插入图片描述

代码:
html代码:

<div class="week-item" v-on:click="dateActive(index)" v-for="(day,index) in week"  v-bind:class="{ active:index==current}">
     <div class="week-date">{{day.ts}}</div>
      <div class="week-name">{{day.xq}}</div>
 </div>

方法:

data: {
current 0;//控制样式切换
week: [],//初始为空
}
                       created: function () {
 var currentTime = new Date();
     var nowDayOfWeek = currentTime.getDay();//当前周的第几天
     var nowDay = currentTime.getDate();//当前日
     var nowMonth = currentTime.getMonth();//当前月
     var nowYear = currentTime.getFullYear();//当前年
     currentTime = new Date(nowYear, nowMonth, nowDay - nowDayOfWeek + 1);//完整日期
     var weeks = ["星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"]
     for (var i = 0; i < 7; i++) {
         if (i == 0) {
            currentTime = currentTime.setDate(currentTime.getDate());
         } else {
            currentTime = currentTime.setDate(currentTime.getDate() + 1);
         }
         currentTime = new Date(currentTime);
         var currentDays = currentTime.getDate();
         var currentMon = currentTime.getMonth() + 1;
         var dateDay = currentDays//某一天
         var dates = {};
         dates.ts = currentMon + "-" + dateDay
         dates.xq = weeks[i]
         this.week.push(dates)
   }
                //this.weekstar = weekstar;
                //this.currentMon = currentMon;
            },

选中样式切换:

                dateActive: function (index) {
                    this.current = index;
                    var need = this.week[index].xq//获取选中的值
                    console.log(need)
                },
Vue编写可显示周和月模式的日历 Vue自定义日历内容的显示 主要为大家详细介绍了Vue编写可显示周和月模式的日历,Vue自定义日历内容的显示,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 立即下载

相关推荐

NR RRC协议(2)---RRC连接建立流程

RRC连接建立目的是建立SRB1 RRC连接建立还用于将初始NAS消息从UE传送到网络 RRC连接的初始阶段期间,不激活AS安全性 RRC连接建立由UE侧发起

crg2046的博客 1957

VUE 输入’周数‘获取周所在日期范围

2、 // 获取当前年份第一天是星期几,如果是周日则为7。4、// 1 + adjustedDay 第一周是几号。1、// 获取当前年份的第一天。5、//日期的第一天、最后一天。3、// 计算需要加几天。

贺吱吱的博客 893

MBIST --- PATR1.Memorybist测试原理

mem bist作为现在design设计中不可或缺的DFT设计内容,越发重要。本章节主要介绍mem bist组成部分,测试的原理以及注意事项。

sinat_27691203的博客 1万+

vue项目——获取指定日期是周几和第几周的信息——表格展示

vue项目——获取指定日期是周几和第几周的信息——表格展示

yehaocheng520的博客 6206

tuts4you-lena151-Crackme-tutorial06

一、前言      本次研究的是lena151-Crackme-tutorial06,也是一个应用程序,但因为平台迭代的关系,程序不能正常运行,只能完成部分破解。 (一)·本次我们要破解的目标是个应用程序,如下图 (二)、使用工具:x32dbg 二、过程 这个程序的破解的方法很多,首先最简单的一种不外乎就是搜索字符串,我就按照这个思路来完成。 (一)查找字符串&lt;Unregis...

h123120的专栏 520

Linux下开机异常(fsck exited with status code 4)

Linux下开机异常事情是这样的,本来我呢跑着程序听着歌,结果忽然就死机了,我只能强制关机,再次打开系统的时候,就提示这样fsck from util-linux 2.26.2 /dev/sda10 contains a file system with errors, check forced. /dev/sda10: Inodes that were part of a corrupted pr

芳草碧连天 2万+

vue3 实现el-date-picker日期筛选过程

希望我的愚见能够帮助你哦~,若有不足之处,还望指出,你们有更好的解决方法,欢迎大家在评论区下方留言支持,大家一起相互学习参考呀~选中时间2,禁止选中时间1,当前值传递给 startTime 和 endTime。选中时间1,禁止选中时间2,当前值传递给 startTime。有2个查询条件,startTime 和 endTime。

weixin_50450473的博客 2445

IGBT单管并联方案全解析:从均流设计到热管理实战技巧

本文深入解析了IGBT单管并联技术在新能源车电驱系统中的应用,重点探讨了均流设计与热管理实战技巧。通过优化寄生电感控制、动态均流和驱动电路设计,提升系统稳定性和效率,为工程师提供了一套完整的解决方案。

weixin_28720573的博客 441

vue3自定义日历

vue3+ts自定义日历

usernotdefined的博客 1681

抖音移动端Web用户主页视频列表爬虫实战:逆向加密参数与高频采集方案

App端Hook/抓包:需要安卓逆向、Xposed或Frida,门槛高且容易被风控。官方开放API:限制极多,几乎不开放用户级视频列表。PC端Web:页面加载方式繁杂,且大量依赖懒加载与内部状态。移动端Web(:接口相对稳定,加密逻辑集中,且适合使用Requests/HTTPSession模拟,无需渲染引擎。本文聚焦于移动端Web下的用户主页视频列表爬取,采用Python 3.11 + httpx + PyExecJS + 正则/JSON解析的组合,破解X-Bogus签名和_signature。

2201_76125261的博客 858

WordPress插件depicter存在SQL注入漏洞(CVE-2025-2011)

Depicter 是一款功能强大的 WordPress 幻灯片插件,允许用户通过直观的拖放编辑器轻松创建响应式滑块、轮播和动态内容展示。该插件提供丰富的模板库、动画效果和图层控制,支持多媒体内容嵌入(如图片、视频、HTML),并优化了移动端显示和SEO性能。其无代码操作界面适合非技术用户,同时提供高级自定义选项,适用于产品展示、营销推广和视觉叙事等多种场景,是提升网站视觉吸引力的高效工具。

m0_50125527的博客 555

vue获取当前一周日期

日常开发笔记,此次记录了获取本周日期并排序,思路从模糊到清晰,虽然逻辑实现,但是我认为应该有更好的方法,如果有可以私信我

weixin_51265675的博客 6380

Android 14.0 SystemUI下拉通知栏通知去掉长按事件

在14.0的系统rom产品定制化开发中,在systemui模块中关于下拉状态栏这块也是非常重要的部分,最近在关于systemui下拉通知栏的每条通知部分 要求去掉通知栏通知的长按事件,不需要长按功能,所以就需要分析下关于长按事件是在哪里注册的,然后去掉就可以了,接下来分析实现 相关功能

安卓兼职framework和app工程师的博客 277

简单一周日期展示及选择切换

简单的js,html实例。切换玩调用后台接口,实现后续逻辑。医院挂号,可能需要切换日期,选择一周内的某一天。提供一周内的日期段,通过点击,切换到不同天。使用Vue,插值语法,更简单。

DickDiShuiShiChuan的博客 283

精雕软件(JDpaint) 5.5 绿色版

精雕软件(JDpaint) 5.5 绿色版精雕软件(JDpaint) 5.5 绿色版精雕软件(JDpaint) 5.5 绿色版

ssm框架搭建

这个是一个在idea上成功跑起来的ssm框架项目,保存在这里方便以后使用直接下载

Element-ui 周日期选择 显示

######vue element ui 周日期选择组件选中时,默认返回当前行的第二列时间, dtArr = [] week = '' // 日期change事件 change(val) { this.getOs(val) // 获取当前周 周一、周日 this.getWeek(this.dtArr[1]) } // 获取时间所属的周的周一和周日 getOs(val) { const week = val.getDay() const dys = week ? wee.

qq_34196373的博客 1275

最新的sdio 4.0 spec 协议标准 带书签 高清完整PDF版

Part-E1-SDIO-Specification-Ver4.00-Final-120220.pdf:最新的sdio 4.0 spec 协议标准 带书签 高清完整PDF版,包括SDIO 接口的外设,SDIO 接口官方协议等。

日期从周五到周四为一周,本周不可选;周一开始为一周,选周日后在周日的时候,发现选择上一周的周一,却变成了本周一等问题

目录1 、在终端输入yarn add dayjs2 、在 main.js里面引用和注册组件:import dayjs from 'dayjs'; //引用Vue.prototype.dayjs = dayjs; //注册3.在页面里面用,这里是比如要获取本周的上一周的周一:mounted() {const dayjs = require('dayjs');// 获取当前日期const lastMonday = dayjs().add(-1, 'week').startOf('week').add(1, 'd

Jjacica的博客 1619

蓝牙模块HM-10手册

蓝牙模块HM-10手册,该手册对蓝牙模块HM-10进行了详细的介绍和使用方法以及一些AT指令。

vue周日历组件, 支持自定义样式

vue周日历组件, 支持自定义样式

收集、分享 722

如何在Vue项目中快速集成vuejs-datepicker:5分钟快速入门指南

想要为你的Vue.js应用添加一个功能强大且易于使用的日期选择器吗?vuejs-datepicker正是你需要的解决方案!这款简单易用的Vue.js日期选择器组件支持日期禁用、内联模式和多语言翻译,让日期选择变得轻松简单。本文将为你提供一个完整的5分钟快速入门指南,帮助你快速掌握这个实用的Vue日期选择器组件。 ## 什么是vuejs-datepicker? 🤔 vuejs-datepick

gitblog_01124的博客 973

vue获取任意日期并且一周日期,包括周几

vue获取任意日期并且一周日期,包括周几

qq_45479398的博客 788

vue 求上一周,周一,周日的日期

需求请求接口,但是必须是上一周,周一到周日的日期,比如今天是2021.7.23 ,周五。因为是周五,所以我请求接口要用上一周,周一到周日的日期。那经过计算,上周周一对应的日期是 2021.7.12。上周周日对应的日期是2021.7.18.那这两个日期就是要求的日期 下面开始代码实现 created() { this.getDays(); }, methods:{ getDays() { var day1 = new Date(); var day2 = new

不想起床 930

vue日历排班组件_vue 周日历滑动组件

文档地址:https://github.com/wuclown/vue-calendar-week效果:https://www.zhihu.com/video/1221113464674107392使用:npm i vue-calendar-week -S import VueCalendarWeek from "vue-calendar-week" <VueCalendarWeek v...

weixin_39534780的博客 1598

终极Vue.js日期选择器指南:从零开始掌握vuejs-datepicker

Vue.js日期选择器(vuejs-datepicker)是一个功能强大且易于使用的Vue.js组件,专为现代Web应用程序设计。这个轻量级组件支持日期禁用、内联模式和多语言翻译,是Vue.js开发者处理日期选择需求的完美解决方案。无论你是Vue.js初学者还是经验丰富的开发者,本指南将帮助你快速掌握vuejs-datepicker的核心功能和使用技巧。 ## 📅 为什么选择vuejs-dat

gitblog_01110的博客 455

Vue实现连续上一周、本周、连续下一周日期时间显示

调用事件: data(){return{ weekTime:"" }} //记录当前显示的周 周一0时的时间戳 // status: 0 本周 1 下一周 -1 上一周 changeWeek(status){ let timeArr = this.getMonday(status); for(let i=0;i<7;i++){ this.thead[i].date = timeArr[i]; } } // 实现方法 getMonday(dates) { let arr = [

qq_36605157的博客 1014

vue周日历组件,从周一开始周日结束

4、 如一周内出现两个月份,则当前选择的月份正常显示,未选中页面则置灰。1、左右按钮为【上一周】【下一周】。日期显示一到日(对应为周一到周日)3、 点击对应月份的时间,则该月份亮起,顶部时间显示对应月份。活动日历组件,从周一开始。2、默认选中当前日期;

timebeign的博客 2582

vue 一周日历展示,上一周下一周展示。

Vue代码展示 <template> <div class="table_box"> <div> <span>{{todayDate}}</span> </div> <div class="timeall"> <i class="el-icon-arrow-left lastbt" @click="lastclick"></i

douguaiwo521521的博客 1367

vue周日历组件

<template> <div class="date"> <!-- 年份 月份 --> <div class="month"> <Icon color="#ff9900" type="ios-arrow-back" size="30" @click="weekPre"/> <spa...

chu_haiquan的博客 4217
上一篇: 点击查看一个星期的日期
下一篇: vue循环 点击加减
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值