uniapp自定义的日历(纯手写)

效果图:

html:

<!-- 年月 --><view class="box"><view class="box_time"><view class="time"><image @click="lefts" :src="url+'/uploads/20231206/9d1fb520b12383960dca3c214d84fa0a.png'" mode=""></image><text>{{year}}年{{month}}月</text><image @click="right" :src="url+'/uploads/20231206/c2f706c19e0de31b2139939c3cb089e4.png'" mode=""></image></view></view></view><!-- 周 --><view class="box_week"><view class="week"><text v-for="(item,index) in week" :key="index">{{item}}</text></view></view><!-- 日期 --><view class="date"><view class="date_list"><view class="dates" v-for="(item,index) in day" :key="index"><view:class="item.num == sun ? 'list_yes' : (month > months ? 'list_null' :(year > years ? 'list_null' :(month == months && year == years && item.num > san ? 'list_null' :'list')))"@click="click(item)" :style="item.day  > 7 && !more_status ? 'display:none;':''"><!-- <view class="list"> --><text>{{item.day}}</text><view:class="item.status ? 'bars' : (item.num > san ? '' : (month > months ? '' :(year > years ? '' :(month == months && year == years && item.num > san ? '' :'bar'))))"><p></p></view></view></view></view></view>

参数描述:

day:获取每个月有几天

js:

year: '', //现在的年份  会变
years: '', //现在的年份不  会变
month: '', //现在的月份  会变
months: '', //现在的月份  不会变
day: '', //指定年月的天数
sun: '', //今天的日
week: '', //指定日期的第一天的星期几
more_status: false, //是否展开更多
date: '', //现在的时分秒
onLoad() {uni.showLoading({title: '加载中...',mask: true});let myDate = new Date();this.year = myDate.getFullYear();this.years = myDate.getFullYear();this.month = String(myDate.getMonth() + 1).padStart(2, '0');this.months = String(myDate.getMonth() + 1).padStart(2, '0');this.week = this.getweekday(this.year + '-' + this.month + '-' + '01')this.getMonthDays2()this.sun = String(myDate.getDate()).padStart(2, '0');this.san = String(myDate.getDate()).padStart(2, '0');let h = myDate.getHours(); //小时let m = myDate.getMinutes(); //分钟let s = myDate.getSeconds(); //秒this.date = h + ':' + m + ':' + s //时分秒},
// 获取指定年月份的天数getMonthDays2() {let time = this.year + '-' + this.monthlet year = time.split('-')[0];let month = time.split('-')[1];let date = new Date(year, month, 0); // 这里的month,比我们日常说的几 月份小1,10则表示11月份let ti = date.getDate()let array = []for (let i = 0; i < ti; i++) {array.push({day: i + 1,num: String(i + 1).padStart(2, '0')})}this.day = array;},
getweekday(date) {var weekArray = new Array("7", "1", "2", "3", "4", "5", "6");var week = weekArray[new Date(date).getDay()]; //注意此处必须是先new一个Datelet array = []for (let i = 0; i < 7; i++) {let time = Number(week) + iif (time > 7) {time = time - 7}if (time == 1) time = '一'if (time == 2) time = '二'if (time == 3) time = '三'if (time == 4) time = '四'if (time == 5) time = '五'if (time == 6) time = '六'if (time == 7) time = '日'array.push(time)}return array;},

自行研究

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

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

相关文章

vue获取主机id和IP地址

获取主机id和IP地址 在vue.config.js const os require(“os”); function getNetworkIp() { let needHost “”; // 打开的host try { // 获得网络接口列表 let network os.networkInterfaces(); for (let dev in network) { let iface network[dev]; for (let i 0; i …

LLM之Agent(五)| AgentTuning:清华大学与智谱AI提出AgentTuning提高大语言模型Agent能力

​论文地址&#xff1a;https://arxiv.org/pdf/2310.12823.pdf Github地址&#xff1a;https://github.com/THUDM/AgentTuning 在ChatGPT带来了大模型的蓬勃发展&#xff0c;开源LLM层出不穷&#xff0c;虽然这些开源的LLM在各自任务中表现出色&#xff0c;但是在真实环境下作…

【Android】Glide的简单使用(下)

文章目录 缓存设置内存缓存硬盘缓存自定义磁盘缓存行为图片请求优先级缩略图旋转图片Glide的回调:TargetsBaseTargetTarget注意事项设置具体尺寸的Target 调试及Debug获取异常信息 配置第三方网络库自定义缓存 缓存设置 GlideApp .with(context).load(gifUrl).asGif().error(…

MySQL_7.索引概述

1.什么是索引 在关系数据库中&#xff0c;索引是一种单独的、物理的数对数据库表中一列或多列的值进行排序的一种存储结构。 它是某个表中一列或若干列值的集合和相应的指向表中物理标识这些值的数据页的逻辑指针清单 2.索引的优点 (1)通过创建唯一性索引,可以保证数据库表中每…

编写Yaml文件当Poc,利用Nuclei扫描器去扫描漏洞

编写Yaml文件当Poc,利用Nuclei扫描器去扫描漏洞 YAML是一种数据序列化语言&#xff0c;它的基本语法规则注意如下&#xff1a; -大小写敏感 -使用缩进表示层级关系 -缩进时不允许使用Tab键&#xff0c;只允许使用空格。 -缩进的空格数目不重要&#xff0c;只要相同层级的元…

VSCode如何设置Vue前端的debug调试

vscode在调试vue.代码时&#xff0c;如何进行debug? 1.安装Chrome Debug插件。 2.在launch.json中&#xff0c;将url修改成你前端项目的路径&#xff1a; 1 {2 // Use IntelliSense to learn about possible attributes.3 // Hover to view descriptions of existing att…

redis 三主三从高可用集群docker swarm

由于数据量过大&#xff0c;单个Master复制集难以承担&#xff0c;因此需要对多个复制集进行集群&#xff0c;形成水平扩展每个复制集只负责存储整个数据集的一部分&#xff0c;这就是Redis的集群&#xff0c;其作用是提供在多个Redis节点间共享数据的程序集。 官网介绍地址 re…

Elasticsearch:向量数据库的真相

通过工作示例了解什么是向量数据库、它们如何实现 “相似性” 搜索以及它们可以在明显的 LLM 空间之外的哪些地方使用。除非你一直生活在岩石下&#xff0c;否则你可能听说过诸如生成式人工智能和大型语言模型&#xff08;LLM&#xff09;之类的术语。 除此之外&#xff0c;你很…

如何利用Axure制作移动端产品原型

Axure是一款专业的快速原型设计工具&#xff0c;作为专业的原型设计工具&#xff0c;Axure 能够快速、高效地创建原型&#xff0c;同时支持多人协作设计和版本控制管理。它已经得到了许多大公司的采用&#xff0c;如IBM、微软、思科、eBay等&#xff0c;这些公司都利用Axure 进…

android 13.0 Settings去掉二级三级菜单搜索功能

1.概述 在13.0的系统rom定制化开发中,由于客户定制开发需求,需要去掉Settings里面的搜索功能,主页面的搜索功能,在前面的章节已经讲了 这里需要去掉二级三级菜单的搜索功能,需要从搜索功能流程分析去掉搜索功能 2.Settings去掉二级三级菜单搜索功能核心代码 packages/ap…

stl模板库成员函数重载类型混肴编译不通过解决方法

stl模板库成员函数重载类型混肴编译不通过解决方法 这种方式编译不通过IsArithmetic和HasMemberList编译器存在混肴 template <typename T, typename Enable std::enable_if<IsArithmetic<T>::value>::type >static void DumpWrapper(T* filed, std::strin…

SAP UI5 walkthrough step7 JSON Model

这个章节&#xff0c;帮助我们理解MVC架构中的M 我们将会在APP中新增一个输入框&#xff0c;并将输入的值绑定到model&#xff0c;然后将其作为描述&#xff0c;直接显示在输入框的右边 首先修改App.controllers.js webapp/controller/App.controller.js sap.ui.define([&…

python变量的命名和使用

变量名只能包含字母、数字和下划线 变量名只能包含字母、数字和下划线。变量名可以字母或下划线打头&#xff0c;但不能以数字打头。例如&#xff0c;可将变量命名为message_1&#xff0c;但不能将其命名为1_message。 Python 语言中&#xff0c;以下划线开头的标识符有特殊含…

Redis server启动源码

入口main函数 src/redis.c文件main函数 int main(int argc, char **argv) {struct timeval tv;/* We need to initialize our libraries, and the server configuration. */// 初始化库 #ifdef INIT_SETPROCTITLE_REPLACEMENTspt_init(argc, argv); #endif//设置本地时间setl…

翻译: 生成式人工智能的经济潜力 第3部分工作和生产力的影响 The economic potential of generative AI

麦肯锡报告 翻译: 生成式人工智能的经济潜力 第一部分商业价值 The economic potential of generative AI翻译: 生成式人工智能的经济潜力 第2部分行业影响 The economic potential of generative AI 1. 工作和生产力的影响 技术几十年来一直在改变工作的解剖学。多年来&…

vue全屏事件与关闭全屏事件

首先&#xff0c;在 Vue 组件中&#xff0c;可以使用 click 或者 v-on 来监听点击事件&#xff0c;然后通过调用相应的方法来触发全屏或关闭全屏。 执行requestFullscreen事件 <template><div><button click"enterFullScreen">进入全屏</butt…

前端知识(十二)———ES6迭代器

ES6中的迭代器是一种新的对象&#xff0c;它具有一个next()方法。next()方法返回一个对象&#xff0c;这个对象包含两个属性&#xff1a;value和done。value属性是迭代器中的下一个值&#xff0c;done属性是一个布尔值&#xff0c;表示迭代器是否已经遍历完所有的值。迭代器是一…

js实现在线预览(PC)图片(jpg、png)、pdf、excel(xlsx)、docx

js实现图片预览 参考&#xff1a;添加链接描述 图片预览 本来用的是element-plus自带的组件el-image&#xff0c;但是去不掉缩略图&#xff0c;所以换成了el-imag-viewer组件&#xff08;图片可拖拽&#xff09;&#xff0c;由于用的vite没有require方法&#xff0c;需要自己处…

c++新经典模板与泛型编程:const修饰符的移除与增加

const修饰符的移除 让你来写移除const修饰符&#xff0c;你会怎么样来写&#xff1f; &#x1f602;&#x1f602;trait类模板&#xff0c;如下 #include <iostream>// 泛化版本 template<typename T> struct RemoveConst {using type T; };// 特化版本 template…

docker-compose 常用命令和指令

目录 1. 概要 2. 常用的docker-compose命令 2.1、image 2.2、build 2.3、command 2.4、links 2.5、external_links 2.6、ports 1.7、expose 1.8、volumes 1.9、volumes_from 1.10、environment 1.11、networks 1. 概要 默认的模板文件是 docker-compose.yml&…