移动端实现一个日历带提示

移动端实现一个日历带提示的效果:
功能:超过当前12点不能选明天的,只能选后天的日期。
使用组件:vant-Calendar
在这里插入图片描述

const formatter = (day: CalendarDayItem) => {// console.log("day", day);const currentTime = new Date();// 获取当前时间的小时部分const currentHour = currentTime.getHours();const currentTimestamp = currentTime.setHours(0, 0, 0, 0);const formTime = formateTime(day.date as Date, "YYYY-MM-DD");const curFormTime = formateTime(currentTime, "YYYY-MM-DD");// 渲染号源-当天前日期置灰,不显示无号和数字,无号日期置灰if (numberPackageList.value && numberPackageList.value.length) {numberPackageList.value.forEach((item) => {const itemTime = new Date(item.numberDate);const itmeTimestamp = itemTime.setHours(0, 0, 0, 0);if (item.numberDate === formTime && itmeTimestamp >= currentTimestamp) {if (item.remainNumber === 0) {day.bottomInfo = "无号";day.type = "disabled";return;}day.bottomInfo = item.remainNumber + "";}});}// 判断当前时间是否超过中午12点// 当天不能选择if (curFormTime === formTime) {day.type = "disabled";}// 超过12点不能选择明天的,只能选择后天的if (currentHour >= 12) {const tomorrow = new Date(new Date().setDate(new Date().getDate() + 1));const dayAfterTomorrowTimestamp = tomorrow.setHours(0, 0, 0, 0);const date = day.date as Date;if (date.getTime() === dayAfterTomorrowTimestamp) {day.type = "disabled";}}return day;
};

JavaScript 中的 setHours() 方法用于设置 Date 对象中的小时部分。它接受一个整数作为参数,表示要设置的小时数。该方法会修改原始的 Date 对象,并返回修改后的时间戳。
以下是 setHours() 方法的基本语法:
dateObject.setHours(hoursValue, minutesValue, secondsValue, msValue)
hoursValue: 必需,一个表示要设置的小时数的整数值(0 到 23)。
minutesValue: 可选,一个表示要设置的分钟数的整数值(0 到 59)。
secondsValue: 可选,一个表示要设置的秒数的整数值(0 到 59)。
msValue: 可选,一个表示要设置的毫秒数的整数值(0 到 999)。
需要注意的是,setHours() 方法会修改原始的 Date 对象,如果想保留原始时间,可以先创建一个新的 Date 对象进行操作。

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

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

相关文章

软考77-上午题-【面向对象技术3-设计模式】-创建型设计模式02

一、生成器模式 1-1、意图 将一个复杂对象的构建与它的表示分离,使得同样的构建过程可以创建不同的表示。 1-2、结构图 Builder 为创建一个 Product 对象的各个部件指定抽象接口。ConcreteBuilder 实现 Builder 的接口以构造和装配该产品的各个部件,定…

Docker 安装部署MySQL教程

前言 Docker安装MySQL镜像以及启动容器,大致都是三步:查询镜像–>拉取镜像–>启动容器 1、查询镜像 docker search mysql2、拉取镜像 拉取镜像时选择stars值较高的 docker pull mysql:5.7 #这里指定拉取对应的版本Mysql5.7,没有指…

Linux网络基础2

目录 实现网络版本计算器 自己定协议实现用json协议实现 重谈OSI七层模型HTTP协议 域名介绍url介绍HTTP请求和响应 实现一个简易的HTTP服务器 实现简易Http服务器初级版实现简易Http服务器中级版 实现一个简易的HTTP服务器最终版 请求方法HTTP状态码HTTP常见的Header 实现网…

常见的实时操作系统(RTOS)(嵌入式和物联网操作系统)介绍

在嵌入式系统和物联网(IoT)设备中,实时操作系统(RTOS)是至关重要的,因为它们负责管理有限的硬件资源,并提供确保任务在特定时间内完成的机制。开源实时操作系统(RTOS)允许…

Java项目:60 ssm基于JSP的乡镇自来水收费系统+jsp

作者主页:源码空间codegym 简介:Java领域优质创作者、Java项目、学习资料、技术互助 文中获取源码 项目介绍 系统可以提供信息显示和相应服务, 其管理员管理水表,审核用户更换水表的请求,管理用户水费,包…

【04】WebAPI

WebAPI 和标准库不同,WebAPI 是浏览器提供的一套 API,用于操作浏览器窗口和界面 WebAPI 中包含两个部分: BOM:Browser Object Model,浏览器模型,提供和浏览器相关的操作DOM:Document Object Model,文档模型,提供和页面相关的操作BOM BOM 提供了一系列的对象和函数,…

3d导出stl格式模型破碎是什么原因,怎么解决?---模大狮模型网

在导出3D模型为STL格式时出现破碎(或称为碎片化)的情况通常是由于模型中存在几何上的问题造成的。以下是一些可能导致STL模型破碎的原因以及解决方法: 3d导出stl格式模型破碎的原因: 模型不封闭:STL格式要求模型必须是封闭的实体&#xff0c…

数字图像处理 使用C#进行图像处理九 实现傅里叶变换

一、简述 傅立叶变换将图像分解为其正弦和余弦分量。换句话说,它将图像从空间域变换到频率域。这个想法是任何函数都可以用无限正弦函数和余弦函数之和来精确近似。傅里叶变换是实现此目的的一种方法。 网上有很多关于傅里叶变换的文章,这里就不进行赘述了,这里主要结合代码…

Spring项目问题—前后端交互:Method Not Allowed

问题 前后端交互时出现Method Not Allowed问题 Ajax中使用的是get,方法仍然出现post方法报错 Resolved [org.springframework.web.HttpRequestMethodNotSupportedException: Request method POST not supported] 浏览器中没有报错,只是接收不到后端返…

监控微信的软件,什么软件可以监控微信聊天记录

有的老板会在后台发文: “能监控聊天记录么?” “聊天记录删除了能找回么” “监控聊天记录的安装包有吗” ...... 可见很多老板对员工的工作时的工作状态都不太放心。 针对监控微信这个事情,我们应该理性分析看待。 首先,需…

基于Java中的SSM框架实现在线通用旅游平台网站系统项目【项目源码+论文说明】

基于Java中的SSM框架实现在线通用旅游平台网站系统演示 摘要 近几年来,计算机网络的发展得到了飞速的提升,由此展开的一系列行业大洗牌也由此开始。早些年只是人们只是对于计算机和互联网有了些基础的认识,现在它正在悄悄的改变着我们生活的…

学会用AI写文案,一分钟就能做一条爆款短视频:方法简单可复制

在这个信息爆炸的时代,短视频已成为人们获取信息、娱乐和社交的重要方式。而一条爆款短视频,除了精彩的画面和音乐外,文案的作用也不容忽视。 学会用AI写短视频文案,能够让你在竞争激烈的市场中脱颖而出,快速吸引观众的注意力。本文将为你揭示如何利用AI快速写出爆款短视…

[善用佳软]推荐掌握小工具:Json解析的命令行工具jq

与我联系: 微信公众号:数据库杂记 个人微信: iiihero 我是iihero. 也可以叫我Sean. iiheroCSDN(https://blog.csdn.net/iihero) Sean墨天轮 (https://www.modb.pro/u/16258) 数据库领域的资深爱好者一枚。 水木早期数据库论坛发起人 db2smth就是俺&am…

【Redis知识点总结】(五)——Redis实现分布式锁

Redis知识点总结(五)——Redis实现分布式锁 setnxsetnx expiresetnx expire lua脚本set nx exset nx ex 随机值set nx ex 随机值 lua脚本set ex nx 随机值 lua脚本 锁续期RedissonRedLock 在Redis的众多应用场景中,分布式锁是Redis比…

使用BBDown下载bilibili视频的方法

一款命令行式哔哩哔哩下载器. Bilibili Downloader. 下载地址 https://github.com/nilaoda/BBDown 功能 番剧下载(Web|TV|App) 课程下载(Web) 普通内容下载(Web|TV|App) 合集/列表/收藏夹/个人空间解析 多分P自动下载 选择指定分P进行下载 选择指定清晰度进行下载 下载外挂字幕…

mybatis项目中配置sql提示

2023版的idea好像内置了这个功能。 第一步: 第二步:第一步完成后user会爆红,这时我们需要连接数据库。

Python使用 k 均值对遥感图像进行语义分割

本篇文章介绍K-means语义分割来估计 2000 年至 2023 年咸海水面的变化 让我们先看一下本教程中将使用的数据。这是同一地区的两张 RGB 图像,间隔 23 年,但很明显地表特性和大气条件(云、气溶胶等)不同。这就是为什么我决定训练两个独立的 k-Means 模型,每个图像一个。 首…

C# danbooru Stable Diffusion 提示词反推 Onnx Demo

目录 说明 效果 模型信息 项目 代码 下载 C# danbooru Stable Diffusion 提示词反推 Onnx Demo 说明 模型下载地址:https://huggingface.co/deepghs/ml-danbooru-onnx 效果 模型信息 Model Properties ------------------------- ----------------------…

C++ Qt开发:QTcpSocket网络通信组件

Qt 是一个跨平台C图形界面开发库,利用Qt可以快速开发跨平台窗体应用程序,在Qt中我们可以通过拖拽的方式将不同组件放到指定的位置,实现图形化开发极大的方便了开发效率,本章将重点介绍如何运用QTcpSocket组件实现基于TCP的网络通信…

2023年蓝桥杯省赛——幸运数字

目录 题目链接:0幸运数字 - 蓝桥云课 (lanqiao.cn) 解法 思路 高级思路 总结 题目链接:0幸运数字 - 蓝桥云课 (lanqiao.cn) 解法 首先是我写了差不多一个小时的解法,裂开了,为什么我如此废物 思路 寻找第2023个在二进制、八…