前端---antd中的日期选择组件

React---使用antd中的DatePicker实现YearPicker

需求React
现有的组件类型
手动实现YearPicker

需求React

需要设计一个时间选择框，但是只需要选中某年即可，且拿到选择的这年的值作为url请求参数去请求数据。

当用户需要获取一个某年的日期，可以点击标准输入框，弹出日期面板进行选择。如下图：

现有的组件类型

日期类组件包括以下四种形式。（无YearPicker）

DatePicker
MonthPicker
RangePicker
WeekPicker
此时，我们翻看组件提供的API，发现虽然没有YearPicker，但是提供了mode属性，可以设置为year。但是如果这样设置后，虽然真的只能看到某年，但是却无法选中某年以及在选择完成后关闭选择框。

手动实现YearPicker

import { DatePicker } from 'antd';  //引入DatePicker组件
import moment from 'moment';    //引入moment
moment.locale('zh-cn');     //日期选择框的语言可以设置，默认为英文，这里设置为中文export default function year(){const [open, setOpen] = useState(false)   //引入useState hook函数，open初始值为flase，open为限制当前日期选择框是否开启或关闭
const [year, setYear] = useState()     //选中的year年function onPanelChange(date:any) {   //面板选中某年后，赋值为year，关闭面板yearSet(date._d.getFullYear());  //只取年值setOpen(false)}return (<div>时间 ： <DatePicker placeholder='请选择年份'   //选择框提示语open={open}    //当前面板的状态（打开或管壁）mode="year"     //当前只选择到yearformat="YYYY"     //时间显示格式onOpenChange={() => {setOpen(true)}}  //进行日期选择时，打开面板onPanelChange={onPanelChange}    //选择日期，获取选中日期值，关闭面板value={moment(year, 'YYYY')}/>   //显示当前选择值，该值类型必须是moment</div>)}

这样就手动实现YearPicker啦~

PS:
（在去年年底需要实现这个功能时，antd的DatePicker还不支持YearPicker。最近去看antd官网，发现其团队已经实现了该功能，现在直接按照官网说明调用就好。）

<div><DatePicker picker="year" /></div>

前端---antd中的日期选择组件相关推荐

antd 日期时间选择_antd-mobile的DatePicker日期选择组件使用
现在项目上有个需求,在时间选择上需要精确到分钟,且分钟只能是0分钟或者是30分钟. 其中组件有个minuteStep参数,将其设置成30,即可只显示0分钟或者30分钟了. 但是在选择的时候发现了问题, ...
Antdv日期选择组件国际化问题
Antdv日期选择组件国际化问题文章目录 Antdv日期选择组件国际化问题 1.问题描述 2.问题解决 2.1解决与时间无关的locale问题 2.2解决与时间相关的locale问题参考链接 1. ...
BootStrap中的日期时间组件datetimepicker
使用BootStrap中的日期时间组件需要引入以下三个文件:  <link rel="stylesheet" th:href="@ ...
vue日期选择组件_一个Vue组件，为波斯开发人员提供日期选择器
vue日期选择组件 Vue波斯日期选择器 (vue persian datepicker) This is a Jalali date picker component for Vue. 这是Vue的 ...
闲云旅游项目开发-（第四篇：机票首页/机票搜索功能（`el-autocomplete`远程搜索组件）/moment.js的使用/日期选择组件el-date-picker）
目录相关组件介绍一机票首页布局二封装搜索组件 1. 组件布局 2.目标思路 3.步骤 3.1 基本功能 3.2 自动补全 3.3获取真正的推荐数据 3.4 添加城市代号 3.5 处理日期格式 ...
vxe-input vue 日期选择组件带农历节日、小圆点提醒
vxe-table vxe-input vue 日期选择组件带农历节日.小圆点提醒默认的日期选择是没有节日信息的可以通过 festival-method 方法自定义节日信息,接收一个对象,用于渲染 ...
重构ElementUI解决DatePicker日期选择组件修改父组件placement参数问题[Vue.js项目实践: 新冠自检系统]
新冠疫情自我检测系统网页设计开发文档 Sylvan Ding 的第一个基于 Vue.js 的项目. 本项目所提供的信息,只供参考之用,不保证信息的准确性.有效性.及时性和完整性,更多内容请查看国家卫健 ...
uni-app日期选择组件-基于mx-datepicker修改
首先非常感谢mx-datepicker作者,这个时间组件非常漂亮且好用. 由于我们的需求是,在一个可用的日期范围内选择一个日期,作者并没有支持这种场景,于是在作者的基础上进行了修改. 具体的需求如下: ...
vue+elementUI实现的日期选择组件
项目需求,需要实现如下快速日期选择的界面. 因为项目技术栈用到了vue+elementUI,故封装了组件进行复用. 组件代码如下: <template> <el-popover v- ...