4、日期筛选组件

/**
 * @description: 日期筛选组件-完全不受控组件 
 * @param {Array} allOption 取timeUtils.js的值
 * @param {String} defaultSelecType 默认选中的类型
 * @param {String, String []} defaultSelectValue 日期组件默认值
 *    defaultSelecType为自定义时，可传；
 *    格式: 'YYYY-MM-DD' || ['YYYY-MM-DD', 'YYYY-MM-DD']
 * @param {Object} pickerType 日期组件类型 
 *    格式：{
 *        name: DatePicker组件类型 (String) （'RangePicker' 或 'DatePicker'）
 *        picker: DatePicker组件类型（可选：date, week, month, quarter, year）(String)
 *    }
 * @return {Object} {dateFrom, dateTo, selectDateType(选中日期类型)}
 */
import React, { Component } from 'react';
import styles from './index.less'
import * as TimeUtils from '@/utils/timeUtils'
import { DatePicker } from 'antd';
import moment from 'moment';
const { RangePicker } = DatePicker;
export default class TimeSelect extends Component {
    constructor(props) {
        super(props)
        this.state = {
            selectDateType: props.defaultSelecType ?? '',  //选中类型
            selectValue: props.defaultSelectValue ?? ''
        }
    }
    handleToggleDate = (selectDateType) => {
        this.setState({
            selectDateType,
            selectValue: ''
        }, () => {
            if (selectDateType !== '自定义') {
                const { dateFrom, dateTo } = TimeUtils.getTimeRange(selectDateType)
                this.handleCheck(dateFrom, dateTo)
            }
        })
    }
    rangePickerChange = (date, dateString) => {
        if (!dateString[0] && !dateString[1]) return void 0
        this.handleCheck(`${dateString[0]} 00:00:00`, `${dateString[1]} 23:59:59`)
    }
    datePickerChange = (date, dateString) => {
        if (!dateString) return void 0
        this.handleCheck(`${dateString} 00:00:00`, `${dateString} 23:59:59`)
    }
    handleCheck = (dateFrom, dateTo) => {
        const { onCheck } = this.props
        const { selectDateType } = this.state
        onCheck
            && typeof onCheck == 'function'
            && onCheck({
                dateFrom,
                dateTo,
                selectDateType
            })
    }
    renderPicker = () => {
        const { pickerType = {} } = this.props
        const { selectValue } = this.state
        let defaultValue = '',
            target = null
        if (selectValue) {
            if (Array.isArray(selectValue)) {
                defaultValue = selectValue.map(v => moment(v))
            } else {
                defaultValue = moment(selectValue)
            }
        }
        switch (pickerType.name) {
            case 'RangePicker':
                target =
                    <RangePicker
                        dateRender={current => {
                            const style = {};
                            return (
                                <div className="ant-picker-cell-inner" style={style}>
                                    {current.date()}
                                </div>
                            );
                        }}
                        defaultValue={defaultValue}
                        onChange={this.rangePickerChange}
                    />

                break;
            case 'DatePicker':
                target =
                    <DatePicker
                        onChange={this.datePickerChange}
                        picker={pickerType.picker}
                        defaultValue={defaultValue}
                    />
                break;
        }
        return target
    }
    render() {
        const { selectDateType } = this.state
        const { allOption = [] } = this.props
        return (
            <div className={styles.commonTimeSelect}>
                <div className={styles.toggleDate}>
                    {
                        allOption.map(v => {
                            return (
                                <div
                                    className={v == selectDateType ? styles.checked : ''}
                                    key={v}
                                    onClick={() => this.handleToggleDate(v)}
                                >{v}</div>
                            )
                        })
                    }
                </div>
                {selectDateType == '自定义'
                    && (
                        <div className={styles.datePicker}>
                            {this.renderPicker()}
                        </div>
                    )
                }
            </div>
        )
    }
}

样式文件

.commonTimeSelect {
    display: flex;
    align-items: center;
    .toggleDate {
        display: flex;
        align-items: center;
        height: 31px;
        // margin-left: 10px;
        div {
            min-width: 54px;
            height: 32px;
            padding: 0 8px;
            line-height: 32px;
            text-align: center;
            border: 1px solid #d9d9d9;
            cursor: pointer;
        }
        div:first-child {
            border-radius: 2px 0 0 2px;
        }
        div:last-child {
            border-radius: 0 2px 2px 0;
        }
        div:not(.checked):not(:first-child) {
            border-left: none;
        }
        .checked {
            color: #1685ff;
            border: 1px solid #1685ff;
        }
    }
    .datePicker {
        // width: 245px;
        // height: 32px;
        margin-left: 10px;
    }
}