ant design pro中DatePicker更改月份显示为数字、增加YearPicker组件

问题描述

ant design pro中的DatePicker组件很好用，在项目中使用后有2个小瑕疵

1. DatePicker、WeekPicker中显示的都是数字，但是月份显示是中文
   
2. 没有YearPicker组件，选择年的时候不方便

经过1天琢磨，解决以上2个问题，做个记录

修改MonthPicker

看官网说明时看到如下内容，意思是可以自定义显示的月份

二话不说，动手就做，代码如下：

    <MonthPicker
          className={styles.element}
          monthCellContentRender={date => {
            return `${moment(date).format('M')}月`;  // 修改中文显示为数字
          }}
          format='YYYY-MM'
          placeholder='请选择月份'
          onChange={handleDate}
          disabled={disabled}
        />

最终效果：

增加YearPicker

这个问题有点头疼，因为我需要拿到日期的字符串格式，效果如下：

• 日：“2020-02-26”
• 月：“2020-02”
• 年：“2020”

根据前面Cascade组件的值决定是选择日、月还是年，看了大神的文章受到启发，
传送门：一江西流的博客

层级关系

封装了3个组件，层级关系如下:

• ReportDisplay.js
  • ReportSearchBar.js
    • YearPicker.js

最终在ReportDisplay组件中获DatePicker值的字符串

爷组件ReportDisplay

  /**
   * 获取DatePicker选择的日期字符串，注意年用date，日月用dateString
   * @param date
   * @param dateString
   */
  dateSelect = (date, dateString) => {
    const { datePickerType } = this.state;
    if (datePickerType === 'year') {
      this.setState({
        date,  
      });
    }
    if (datePickerType === 'day' || datePickerType === 'month') {
      this.setState({
        date: dateString,
      });
    }
  };

/**此处省略部分代码**/

// render中方法
    // 日期选择框props
    const datePickerOption = {
      datePickerType,
      disabled: datePickerDisabled,
      handleDate: this.dateSelect,
    };

    return (
      <PageHeaderWrapper>
        <Fragment title={false}>
          <ReportSearchBar    
            cascadeOption={cascadeOption}
            datePickerOption={datePickerOption}  // 封装的DatePicker组件
          />
          <ReportTableContainer
            params={this.dayParams}
          />
        </Fragment>
      </PageHeaderWrapper>
    );

父级组件ReportSearchBar

 /**
   * 根据日期类型返回日、月、年选择框
   * @return []
   */
  renderDatePicker = () => {
    const {
      datePickerOption: { datePickerType, handleDate, disabled },
    } = this.props;
    const resultSet = [];

    if (datePickerType === 'day') {
      resultSet.push(
        <DatePicker
          className={styles.element}
          format='YYYY-MM-DD'
          placeholder='请选择日期'
          onChange={handleDate}
          disabled={disabled}
        />,
      );
    }

    if (datePickerType === 'month') {
      resultSet.push(
        <MonthPicker
          className={styles.element}
          monthCellContentRender={date => {
            return `${moment(date).format('M')}月`;
          }}
          format='YYYY-MM'
          placeholder='请选择月份'
          onChange={handleDate}
          disabled={disabled}
        />,
      );
    }

    if (datePickerType === 'year') {
      resultSet.push(
        <YearPicker
          className={styles.element}
          mode="year"
          onYearChange={handleDate}
          disabled={disabled}
        />,
      );
    }
    return resultSet;
  };

底层组件YearPicker

import React, { PureComponent } from 'react';
import { DatePicker } from 'antd';
import moment from 'moment';


class YearPicker extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      isOpen: false,
      time: null,
    };
  }

  /**
   * 返回选择的年份给父组件
   * @param value
   */
  handlePanelChange = value => {
    const { onYearChange } = this.props;
    this.setState({
      time: value,
      isOpen: false,
    });
    onYearChange(moment(value).format('YYYY'));  // 转成字符串传给上级组件
  };

  handleOpenChange = (status) => {
    if (status) {
      this.setState({ isOpen: true });
    } else {
      this.setState({ isOpen: false });
    }
  };

  clearValue = () => {
    this.setState({
      time: null,
    });
  };

  render() {
    const { time, isOpen } = this.state;
    const { className } = this.props;

    return (
      <div>
        <DatePicker
          value={time}
          open={isOpen}
          mode="year"
          placeholder='请选择年份'
          format="YYYY"
          onOpenChange={this.handleOpenChange}
          onPanelChange={this.handlePanelChange}
          onChange={this.clearValue}
          className={className}
        />
      </div>
    );
  }
}

export default YearPicker;

YearPicker实现效果

总结

多看文档，多看博客，兴趣使然，不断尝试