react 自定义 年-月-日 组件,单独选择年、月、日,并且产生联动

自定义 年-月-日 组件

code

import { useState } from 'react'
function Year_Month_Date() {const [yearList, setYearList] = useState([])const [monthList, setMonthList] = useState([])const [dateList, setDateList] = useState([])const [currentYear, setCurrentYear] = useState((new Date()).getFullYear())const [currentMonth, setCurrentMonth] = useState((new Date()).getMonth() + 1)const [currentDate, setCurrentDate] = useState((new Date()).getDate())const computedTime = new Date(`${currentYear}-${currentMonth}-${currentDate}`)useEffect(() => {// 时间console.log(computedTime)}, [currentYear, currentMonth, currentDate])// 年const renderYearList = () => {const _currentYear = (new Date()).getFullYear()const years = []for(let i = _currentYear - 80; i <= _currentYear + 20; i++) {years.push(i)}setYearList(years)}// 月const renderMonthList = () => {const months = []for(let i = 1; i < 13; i++) {months.push(i)}setMonthList(months)}// 日const renderDateList = (year, month) => {const dates = []const currentMonthDateCount = (new Date(year, month, 0)).getDate()for(let i = 1; i <= currentMonthDateCount; i++) {dates.push(i)}setDateList(dates)}// 年月固定useEffect(() => {renderYearList()renderMonthList()}, [])// 每个月多少天根据选择的年月计算useEffect(() => {renderDateList(currentYear, currentMonth)}, [currentYear, currentMonth])return (<><Flex>{/*年*/}<SelectFieldlabel="Year"labelHiddenvalue={currentYear}onChange={(e) => {setCurrentYear(e.target.value)}}>{yearList.map(item => <option key={item} value={item}>{item} {intl.get("YEAR")}</option>)}</SelectField>{/*月*/}<SelectFieldlabel="month"labelHiddenvalue={currentMonth}onChange={(e) => {setCurrentMonth(e.target.value)}}>{monthList.map(item => <option key={item} value={item}>{item} {intl.get("_MONTH")}</option>)}</SelectField>{/*日*/}<SelectFieldlabel="date"labelHiddenvalue={currentDate}onChange={(e) => {setCurrentDate(e.target.value)}}>{dateList.map(item => <option key={item} value={item}>{item} {intl.get("_DATE")}</option>)}</SelectField></Flex></>)
}

如图:
在这里插入图片描述

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

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

相关文章

javaweb(四)——过滤器与监听器

文章目录 过滤器Filter基本概念滤波器的分类: 时域和频域表示滤波器类型1. 低通滤波器(Low-Pass Filter)2. 高通滤波器(High-Pass Filter)3. 带通滤波器(Band-Pass Filter)4. 带阻滤波器(Band-Stop Filter) 滤波器参数1. 通带频率(Passband Frequency)2. 截止频率(Cutoff Frequ…

【Kotlin】Kotlin 基础语法指南

人不走空 &#x1f308;个人主页&#xff1a;人不走空 &#x1f496;系列专栏&#xff1a;算法专题 ⏰诗词歌赋&#xff1a;斯是陋室&#xff0c;惟吾德馨 目录 &#x1f308;个人主页&#xff1a;人不走空 &#x1f496;系列专栏&#xff1a;算法专题 ⏰诗词歌…

dell g15机器awcc删除后无法重新安装

那是因为注册表并没有删除干净&#xff0c;需要手动删除&#xff0c;但是普通小白又没有时间进行手动删除&#xff0c; 这个个时候就需要微软的删除工具的帮忙了. 微软软件删除工具&#xff1a;修复阻止程序安装或删除的问题 - Microsoft 支持

Android的activity广播无法接收,提示process gone or crashing原因有可能是那些?

当Android的Activity无法接收广播&#xff0c;并且收到“process gone or crashing”的提示时&#xff0c;可能的原因有多种。以下是一些常见的原因和排查步骤&#xff1a; Activity生命周期问题&#xff1a; 如果Activity在广播发送之前就已经被销毁&#xff08;例如&#xf…

vue3 elementplus Springboot 课程购买系统案例源码

系统演示 项目获取地址 Springboot vue3 elementplus 课程购买系统案例源码 附带系统演示&#xff0c;环境搭建教程,开发工具 技术栈:SpringBoot Vue3 ElementPlus MybatisPlus 开发工具:idea 后端构建工具:Maven 前端构建工具:vite 运行环境:Windows Jdk版本:1.8 Nod…

《昇思25天学习打卡营第04天|数据集Dataset》

数据集 环境准备 # 实验环境已经预装了mindspore2.2.14&#xff0c;如需更换mindspore版本&#xff0c;可更改下面mindspore的版本号 !pip uninstall mindspore -y !pip install -i https://pypi.mirrors.ustc.edu.cn/simple mindspore2.2.14 import numpy as np from mindsp…

基于Tools体验NLP编程的魅力

大模型能理解自然语言&#xff0c;从而能解决问题&#xff0c;但是就像人类大脑一样&#xff0c;大脑只能发送指令&#xff0c;实际行动得靠四肢&#xff0c;所以LangChain4j提供的Tools机制就是大模型的四肢。 大模型的不足 大模型在解决问题时&#xff0c;是基于互联网上很…

Tomcat部署与优化

Tomcat部署与优化 Tomcat简述 server&#xff1a; 服务器&#xff0c;Tomcat运行的进程实例&#xff0c;一个Server中可以有多个service&#xff0c;但通常就一个 service&#xff1a;服务&#xff0c;用来组织Engine&#xff08;引擎&#xff09;和Connector&#xff08;连接…

gdb及其使用

gdb调试一&#xff1a; 首先进入gdb&#xff0c;确定好进程&#xff0c;输入进程号 确定要调试哪个文件&#xff0c;然后输入&#xff1a;&#xff08;b为打断点&#xff09; (gdb) b serialization_protobuffer.h:write<ros::serialization::OStream>(ros::serializat…

MySQL的limit关键字和聚合函数讲解

目录 一、MySQL数据库介绍二、MySQL聚合函数三、MySQL数据排序分组四、MySQL的limit关键字 一、MySQL数据库介绍 MySQL是一种广泛使用的开源关系型数据库管理系统&#xff0c;由瑞典MySQL AB公司开发&#xff0c;后被Sun Microsystems收购&#xff0c;最终成为Oracle公司的一部…

RANSAC空间圆拟合实现

由初中的几何知识我们可以知道&#xff0c;确定一个三角形至少需要三个不共线的点&#xff0c;因此确定一个三角形的外接圆至少可用三个点。我们不妨假设三个点坐标为P1(x1,y1,z1),P2(x2,y2,z2),P3(x3,y3,z3)。 圆方程的标准形式为&#xff1a; (xi-x)2(yi-y)2R2 &#xff08;1…

【Annotation】SpringBoot自定义注解

1. 自定义注释是基于SpringAOP实现的 Spring AOP&#xff08;Aspect-Oriented Programming&#xff0c;面向切面编程&#xff09;是Spring框架中的一个强大功能模块&#xff0c;它实现了AOP编程模型&#xff0c;允许开发者将横切关注点&#xff08;如日志记录、事务管理、安全…

新火种AI|苹果要将苹果智能做成AI时代的APP Store?

作者&#xff1a;一号 编辑&#xff1a;美美 苹果还是想要自己做AI时代的“APP Store”。 自从去年开始落了队&#xff0c;苹果现在AI上开始高歌猛进。今年WWDC上展示的AI产品和与OpenAI的合作只是开始。有消息称&#xff0c;苹果正与Meta等AI巨头展开深入合作&#xff0c;这…

随想录 Day 74 Floyd / A*

随想录 Day 74 Floyd / A* Bellman_ford 队列优化 97. 小明逛公园 时间限制&#xff1a;1.000S 空间限制&#xff1a;256MB 题目描述 小明喜欢去公园散步&#xff0c;公园内布置了许多的景点&#xff0c;相互之间通过小路连接&#xff0c;小明希望在观看景点的同时&#xff…

小和问题和逆序对问题

小和问题和逆序对问题 小和问题&#xff0c; 在一个数组中&#xff0c;每一个数左边的数中比当前数小的数累加起来&#xff0c;叫做这个数组的小和&#xff0c;求一个数组的小和 直接遍历&#xff1a; int littleSum1(int* arr, int L, int R) {int temp 0;for (int i L; …

Spring底层原理之bean的加载方式四 @import 注解

bean的加载方式四 import 第四种bean的导入方式 是import导入的方式 在配置类上面加上注解就行 package com.bigdata1421.config;import com.bigdata1421.bean.Dog; import org.springframework.context.annotation.Import;Import(Dog.class) public class SpringConfig4 {…

CesiumJS【Basic】- #041 绘制纹理线(Entity方式)- 需要自定义着色器

文章目录 绘制纹理线(Entity方式)- 需要自定义着色器1 目标2 代码2.1 main.ts3 资源文件绘制纹理线(Entity方式)- 需要自定义着色器 1 目标 使用Entity方式绘制纹理线 2 代码 2.1 main.ts import * as Cesium from cesium;const viewer = new Cesium.Viewer

Java并发编程:最佳实践与性能优化

Java并发编程&#xff1a;最佳实践与性能优化 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01; 介绍并发编程 在当今软件开发中&#xff0c;多核处理器和分布式…

K8S学习教程(一):使用PetaExpress云服务器安装Minikube 集群题

什么是Minikube Minikube是一款工具&#xff0c;主要用于在本地运行 Kubernetes 集群。Kubernetes 开源的平台&#xff0c;用于自动化容器化应用的部署、扩展和管理&#xff0c;而Minikube 使得开发人员能够在本地机器上轻松创建一个单节点的 Kubernetes 集群&#xff0c;从而…

【高级篇】第6章 Elasticsearch 高级查询与搜索优化

在Elasticsearch的深入应用之旅中,掌握高级查询技巧与优化搜索性能是提升数据处理效率的关键。本章将带你深入探索Elasticsearch的高级查询特性,揭示搜索性能优化的奥秘,以及如何利用高亮与建议API增强用户体验。 6.1 复杂查询 6.1.1 Nested查询 Nested基本概念与用法: …