基于antd DatePicker的年份组件

最近在开发的时候，发现antd的datepicker组件，设置mode="year"时候，年份组件交互上有一些bug问题，后来自己基于antd上的picker，进行了改装，能进行年份选择的效果

组件代码如下：

import React from 'react';
import { DatePicker } from 'antd';
import moment from 'moment';
import ReactDOM from 'react-dom';class YearPicker extends React.Component {static getDerivedStateFromProps(nextProps) {if ('value' in nextProps) {return {...(nextProps.value || {})};}return null;}constructor(props) {super(props);const value = props.value;// console.log('年份选择', value, props);this.state = {open: false};}triggerChange = changedValue => {const onChange = this.props.onChange;if (onChange) {onChange(changedValue);}};changeRender = v => {// console.log("changeRender_v.m", v);this.setState({open: false},() => this.triggerChange(moment(v).format('YYYY')));};clearValue = () => {this.triggerChange();};setOpenState = () => {this.setState({open: !this.state.open});};componentDidMount = () => {};render() {const { open } = this.state;const { value, style } = this.props;return (<DatePickermode="year"format="YYYY"placeholder={this.props.placeholder}value={value ? moment(value) : null}onPanelChange={this.changeRender}onOpenChange={this.setOpenState}onChange={this.clearValue} //点击清除按钮的回调open={open}style={{ ...style }}/>);}
}export default YearPicker;

调用方式：

<YearPickervalue={this.state.yearValue}placeholder="选择年份"onChange={this.onOptionChange}
/>

onchange回调方法：

// selectA改变的回调onOptionChange = value => {//console.log(value);this.setState({yearValue:value});};

这里使用的方法是通过组件外部的props的value来控制年份所选的值 (由于业务原因)

其实在yearpicker内部通过内部的state保管自己的value亦可

基于antd DatePicker的年份组件相关推荐

支持大数据渲染下拉列表组件开发 SuperSelect(基于antd Select)
功能简介 antd 的 Select 组件不支持大数据量的下拉列表渲染,下拉列表数量太多会出现性能问题, SuperSelect 基于 antd 封装实现,替换原组件下拉列表,只渲染几十条列表数据,随 ...
antd Datepicker组件报错 ——date.clone is not a function或者date1.isAfter is not a function
问题描述: antd Datepicker组件报错 --date.clone is not a function或者date1.isAfter is not a function 原因分析: 在Fro ...
antd 日期时间选择_antd-mobile的DatePicker日期选择组件使用
现在项目上有个需求,在时间选择上需要精确到分钟,且分钟只能是0分钟或者是30分钟. 其中组件有个minuteStep参数,将其设置成30,即可只显示0分钟或者30分钟了. 但是在选择的时候发现了问题, ...
antd 日期选择框如何提交_基于Ant Design的Modal组件来实现一个可拖拽的React模态框...
引言写这篇文章的原因是因为在项目中用到了Antd Design的React组件,当有业务需求需要用到模态框的时候遇到了一些小问题,Antd的模态框Modal组件时不能拖拽的,一般情况下不可拖拽也没什 ...
重构ElementUI解决DatePicker日期选择组件修改父组件placement参数问题[Vue.js项目实践: 新冠自检系统]
新冠疫情自我检测系统网页设计开发文档 Sylvan Ding 的第一个基于 Vue.js 的项目. 本项目所提供的信息,只供参考之用,不保证信息的准确性.有效性.及时性和完整性,更多内容请查看国家卫健 ...
【工作流引擎】Flowable流程设计器基于bpmnjs开发的vue组件
[工作流引擎]Flowable流程设计器基于bpmnjs开发的vue组件设计器介绍集成设计器设计器介绍 bpmn.js官网 bpmn.js 是一个BPMN2.0渲染工具包和web建模器, 使得 ...
基于jquery的php分页,基于jQuery封装的分页组件
前言: 由于项目需要实现分页效果,上jQuery插件库找了下,但是木有找到自己想要的效果,于是自己封装了个分页组件. 思路: 主要是初始化时基于原型建立的分页模板然后绑定动态事件并实现刷新DOM的分页 ...
value数字 vue_基于Vue开发数字输入框组件
随着 vue 越来越火热, 相关组件库也非常多啦, 只用轮子怎么够, 还是要造起来!!! 1.概述 vue组件开发的api:props.events和slots 2.组件代码效果: (1)index ...
实现一个基于Vue的Button小组件
概述原生HTML的button只能保证功能存在,样式都不怎么好看.当然也可以通过编写css样式来改变原生HTML中的button显示,但是现在各个UI框架都很流行,也很方便,很多时候都是直接引入框架 ...

基于antd DatePicker的年份组件

基于antd DatePicker的年份组件相关推荐

最新文章

热门文章