SearchDate日期搜索

固定日期 & 自定义日期搜索

• 默认隐藏自定义时间，点击自定义时间时，显示时间选择框
• 点击其他的，就隐藏时间框

import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { DatePicker } from 'antd';
import styled from './index.module.less';
import { format, disabledDate,, RANGE_DATE, MOMENT_VALUEOF } from '@utils'
import { RadioButton } from '@components/Form';
const { RangePicker } = DatePicker;
const radioSource = [
  {label: '一周', value: 'week'},
  {label: '一月', value: 'month'},
  {label: '一年', value: 'year'},
  {label: '自定义', value: 0},
]
SearchDate.propTypes = {
  onChange: PropTypes.func.isRequired,
};
function SearchDate({ onChange }) {
  const [visible, setVisible] = useState(false);
  function radioChange(value) {
    setVisible(value === 0);
    if(!value) return;
    rangeChange(RANGE_DATE(value))
  }
  function rangeChange(values) {
    //  moment格式转时间戳
    const dates = MOMENT_VALUEOF(values)
    onChange(dates)
  }
  const rangeAttrs = {
      format,
    disabledDate,
    className: 'ml8',
    onChange: rangeChange,
    // size: 'small',
  }
  return (
    <div className={styled.flex}>
      <RadioButton
        dataSource={radioSource}
        onChange={radioChange}
        // size='small'
      />
      {visible && (<RangePicker {...rangeAttrs}/>)}
    </div>
  );
}
export default SearchDate;

style.module.less

.flex {
    display: flex;
  justify-content: flex-end;
  margin-bottom: 16px;
}

使用组件

import SearchDate from './SearchDate'
function App() {
  return(
      <SearchDate onChange={onSearch}/>
  )
}