实现一个周选择器组件

news2024/11/17 13:34:45

1、需求:

默认每个月的第一个周一为该月的第一周开始,规则如图所示
在这里插入图片描述

2、使用到的工具:

vue2+vant2+momentjs

3、父组件:

data中定义涉及到的参数

minDate: new Date(this.$moment().subtract(12,'month'))
maxDate: new Date(),
selectWeek: []

处理selectWeek,获取当前日期所在的周

getWeek() {
	// 当天是周几
	let weekDay = this.$moment().weekday();
	if(weekDay === 0) {
		// 周日
		weekDay = 7;
	}
	let monday = this.$moment().subtract(weekDay - 1, 'd').format('YYYY-MM-DD');
	let sunday = this.$moment().add(7 - weekDay, 'd').format('YYYY-MM-DD');
	return [monday, sunday]
}

4、周选择器组件:

<template>
	<!-- 周选择器组件 -->
	<van-picker
		ref="pickerWeek"
		@confirm="confirm"
		@change="handleChange"
		@cancel="cancel"
		show-toolbar
		title="选择周"
		:columns="columns"
		:item-height="$lessVariables.vanPickerItemHeight"/>
</template>

文件参考资源文件:文件地址

5、展示效果如图:

在这里插入图片描述

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

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

相关文章

OpenCV 入门教程:全局阈值处理

OpenCV 入门教程&#xff1a;全局阈值处理 导语一、全局阈值处理二、示例应用2.1 图像二值化2.2 图像去噪 总结 导语 全局阈值处理是图像处理中常用的技术之一&#xff0c;用于将图像转换为二值图像&#xff0c;从而提取感兴趣的目标区域。在 OpenCV 中&#xff0c;全局阈值处…

Mathtype公式编号,章节号修改

正常插入公式时&#xff0c;选择有编号没有任何问题&#xff0c;但是&#xff0c;当需要根据章节编号时&#xff0c;这个如何处理呢&#xff0c;这个时候需要 公式编号-章节-修改分隔符&#xff0c;然后会弹出一个对话框&#xff0c;这时可以修改章节开始序号。 此外&#xff…

【力扣周赛】第 353 场周赛

文章目录 Q1&#xff1a;6451. 找出最大的可达成数字&#xff08;脑筋急转弯&#xff1f;&#xff09;思路竞赛时代码 Q2&#xff1a;6899. 达到末尾下标所需的最大跳跃次数&#xff08;DP&#xff09;思路竞赛时代码 Q3&#xff1a;6912. 构造最长非递减子数组&#xff08;DP&…

Openssh升级方法

文章目录 Openssh升级方法一.安装openssh模拟未升级版本二.查看当前的ssh服务版本 三.启动telnet、安装rzsz工具、创建普通账号&#xff0c;防止因为卸载openssh而导致无法登录主机四.卸载openssh的rpm安装包&#xff08;备注&#xff1a;此处未卸载ssl安装包&#xff09;&…

【WebGIS初学到入职】(15)入职一年的总结与分享

题外话 看看大纲可以怎么写&#xff0c;问问ChatGPT&#xff1a; ……算了&#xff0c;还是随便写写吧。 所以时间过得也是有够快的&#xff0c;这就一年了。 平淡 入职一年&#xff0c;已经看到好些位女同事结婚了&#xff08;男同事一个没有&#xff09;。领导和同事都挺…

汽车网站建设:开启汽车行业数字化转型的大门

随着科技的进步和互联网的普及&#xff0c;越来越多的汽车企业开始意识到一个强大的在线存在的重要性。汽车网站的兴起为汽车行业带来了新的机遇和好处。本文将简要介绍什么是汽车网站&#xff0c;探讨汽车网站的好处&#xff0c;并提供一些快速制作搭建汽车网站的方法。 汽车网…

@JsonFormat(pattern = “yyyy-MM-dd“, timezone = “GMT+8“) 日期格式

前端去掉时分秒 &#xff1a; /*** 出生日期*/ JsonFormat(pattern "yyyy-MM-dd", timezone "GMT8")// 解决后端到前端显示问题 DateTimeFormat(pattern "yyyy-MM-dd")// 解决前端到后端保存问题 TableField(value "birthday") A…

Django_静态资源配置和ajax(九)

目录 一、静态资源配置 二、AJAX ajax作用 使用ajax 1、环境配置 2、创建html模板文件 3、编写视图函数并添加路由 4、运行django开发服务器进行验证 源码等资料获取方法 一、静态资源配置 静态资源的相关配置都在项目目录下的 settings.py 文件中进行配置。配置参数如…

架构训练营笔记系列: 模块 1-2课

郭东白老师的架构课偏理论&#xff0c;属于道层级。李云华老师的课偏实践&#xff0c;属于术层级。没有理论不会举一反三&#xff0c;只有理论&#xff0c;就是纸上谈兵&#xff0c;两个课都很好。 架构与程序思维的区别 程序 逻辑实现 架构 判断 取舍 架构设计的关键不只…

ansible 报错 DEPRECATION WARNING 解决

报错信息 [DEPRECATION WARNING]: Distribution Ubuntu 18.04 on host 192.168.1.1 should use /usr/bin/python3, but is using /usr/bin/python for backward compatibility with prior Ansible releases. A future Ansible release will default to using the discovered …

第五十二章 开发Productions - ObjectScript Productions - 不常见的任务 - 在目标是动态的情况下渲染连接

文章目录 第五十二章 开发Productions - ObjectScript Productions - 不常见的任务 - 在目标是动态的情况下渲染连接在目标是动态的情况下渲染连接使用 Ens.Director 开始和停止ProductionStopProduction()StartProduction()RecoverProduction()GetProductionStatus() 第五十二…

基于Pthreads多线程程序设计

“Hello world”程序 函数原型 1. pthread_create 函数原型&#xff1a;int pthread_create(pthread_t *thread, const pthread_attr_t *attr, void *(*start_routine)(void *), void *arg); 功能说明&#xff1a;创建一个线程。 参数说明 thread&#xff1a;线程句柄&#xf…

Pico版节奏光剑简单制作

视频教程参考&#xff1a;Pico VR Neo3开发实战教程&#xff08;1&#xff09;——节奏光剑&#xff0c;舞台灯效_哔哩哔哩_bilibili 1、新建项目和pico配置 插件导入 找到下载的pico SDK 选择json文件&#xff0c;点击即可导入 启用插件 在 Project Settings 窗口中&#xf…

Gradle的生命周期和Task

Gradle生命周期和Task 本文链接&#xff1a;Gradle的生命周期和Task_猎羽的博客-CSDN博客 Gradle生命周期 三大阶段&#xff1a; 初始化配置执行 Gradle的数量是多少&#xff1f;Module数量 Root Gradle 生命周期监听方法 生命周期监听的设置有两种方法&#xff1a; 实现…

Modelsim仿真问题解疑:初始时间段内逻辑不符

目录 一、问题描述 1.1 设计代码 1.2 综合结果 1.3 仿真结果 二、问题原因 三、解决方法 一、问题描述 在使用mode​lsim进行功能仿真时&#xff0c;会遇到如下情况&#xff0c;仿真结果在前面一段时间内的逻辑输出不符预期&#xff0c;后面的结果符合预期 以实现一个D触发…

火车头小发猫AI伪原创[php源码]

对于大多数站长来说&#xff0c;有点困难&#xff0c;但是如果他们不知道如何原创&#xff0c;我们不知道如何伪原创吗&#xff1f;我把我常用的伪原创的方法列出来&#xff0c;希望对大家有所帮助。 使用教程&#xff1a;火车头采集器AI伪原创 <?php header("Conte…

使用配置文件自定义线程池参数

首先创建线程池MyThreadConfig &#xff1a; Configuration public class MyThreadConfig {Beanpublic ThreadPoolExecutor threadPoolExecutor(){return new ThreadPoolExecutor(20,200,10,TimeUnit.SECONDS,new LinkedBlockingDeque<>(100000),Executors.defaultThrea…

SpringBoot集成Quartz集群模式

<!-- quartz定时任务 --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-quartz</artifactId></dependency> 单机版本&#xff1a; SpringBoot集成Quartz动态定时任务_jobgroupname_小…

CentOS环境下的Nginx安装

Nginx 安装 下载 nginx 下载地址&#xff1a;http://nginx.org/en/download.html 将下载好的压缩包拷贝到根目录下 通过xshell如果出现 bash: rz: 未找到命令 &#xff0c;需要先运行下面的命令 yum -y install lrzsz安装 解压到当前目录 tar -zxvf nginx-1.22.1.tar.gz安…

尚无忧餐桌预订订桌包厢预订小程序源码

1.支持中餐、晚餐不同时间段桌位预定 2.支持包厢&#xff0c;大厅等不同区域预定 本系统后台tpvue 前端原生小程序 <!-- 导航栏 --> <!-- <van-nav-bar title"{{canteen}}" title-class"navbar" /> --> <van-nav-bar title"…