index.js

// eslint-disable-next-line no-unused-vars
import React, { useContext } from 'react';
import moment from 'moment';
import classNames from 'classnames';
import { DatePicker, ConfigProvider, TimePicker } from 'antd';
import './index.less';

const { RangePicker } = DatePicker;
const FORMATS = {
  day: 'YYYY-MM-DD',
  week: 'YYYY-wo',
  month: 'YYYY-MM',
  quarter: 'YYYY-第Q季度',
  year: 'YYYY',
};
const STANTFORMAT = 'YYYY-MM-DD 00:00:00';
const ENDFORMAT = 'YYYY-MM-DD 23:59:59';
const DatePickerCustom = (props) => {
  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
  const prefixCls = getPrefixCls('datepicker-custom');
  // eslint-disable-next-line no-nested-ternary
  const modes = props.picker ? (props.picker !== 'date' ? props.picker : 'day') : 'day';
  const selectedDate = props.value ? props.value : new Date();
  const onChange = (date, dateString) => {
    const dateTime = moment(date).format('YYYY-MM-DD');
    let startTime = null;
    let endTime = null;
    switch (modes) {
      case 'day':
        startTime = moment(dateTime);
        endTime = moment(dateTime);
        break;
      case 'week':
        startTime = moment(dateTime).startOf(modes);
        endTime = moment(dateTime).endOf(modes);
        break;
      case 'month':
        startTime = moment(dateTime).startOf(modes);
        endTime = moment(dateTime).endOf(modes);
        break;
      case 'quarter':
        startTime = moment(dateTime).startOf(modes);
        endTime = moment(dateTime).endOf(modes);
        break;
      case 'year':
        startTime = moment(dateTime).startOf(modes);
        endTime = moment(dateTime).endOf(modes);
        break;
      default:
        startTime = moment(dateTime);
        endTime = moment(dateTime);
        break;
    }
    props.onChange(
      { startTime: startTime.format(STANTFORMAT), endTime: endTime.format(ENDFORMAT) },
      dateString,
    );
  };
  const customFormat = (value) => {
    let name = null;
    switch (modes) {
      case 'day':
        name = value.format(FORMATS[modes]);
        // eslint-disable-next-line no-use-before-define
        if (name === getTime(0, 'days', FORMATS[modes])) {
          name = '今天';
          // eslint-disable-next-line no-use-before-define
        } else if (name === getTime(1, 'days', FORMATS[modes])) {
          name = '昨天';
        }
        break;
      case 'week':
        // eslint-disable-next-line no-use-before-define
        name = getMonthWeek(value);
        // eslint-disable-next-line no-use-before-define
        if (value.format('YYYY-wo') === getTime(0, 'week', FORMATS[modes])) {
          name = '本周';
          // eslint-disable-next-line no-use-before-define
        } else if (value.format('YYYY-wo') === getTime(1, 'week', FORMATS[modes])) {
          name = '上周';
        }
        break;
      case 'month':
        name = value.format(FORMATS[modes]);
        // eslint-disable-next-line no-use-before-define
        if (name === getTime(0, 'month', FORMATS[modes])) {
          name = '本月';
          // eslint-disable-next-line no-use-before-define
        } else if (name === getTime(1, 'month', FORMATS[modes])) {
          name = '上月';
        }
        break;
      case 'quarter':
        name = value.format(FORMATS[modes]);
        // eslint-disable-next-line no-use-before-define
        if (name === getTime(0, 'month', FORMATS[modes])) {
          name = '本季度';
          // eslint-disable-next-line no-use-before-define
        } else if (name === getTime(3, 'month', FORMATS[modes])) {
          name = '上季度';
        }
        break;
      case 'year':
        name = value.format(FORMATS[modes]);
        // eslint-disable-next-line no-use-before-define
        if (name === getTime(0, 'year', FORMATS[modes])) {
          name = '今年';
          // eslint-disable-next-line no-use-before-define
        } else if (name === getTime(1, 'year', FORMATS[modes])) {
          name = '去年';
        }
        break;
      default:
        break;
    }
    return name;
  };
  const getTime = (num, type, format) => {
    return moment(new Date()).subtract(num, type).format(format);
  };
  const getMonthWeek = (value) => {
    const a = value.format('YYYY');
    const b = value.format('MM');
    const c = value.format('DD');
    // eslint-disable-next-line radix
    const date = new Date(a, parseInt(b) - 1, c);
    let w = date.getDay();
    const d = date.getDate();
    if (w === 0) {
      w = 7;
    }
    const config = {
      getMonth: moment(date).format('MM'),
      getYear: date.getFullYear(),
      getWeek: Math.ceil((d + 6 - w) / 7),
    };
    return `第${config.getWeek}周(${config.getYear}/${config.getMonth})`;
  };
  return (
    <DatePicker
      {...props}
      className={modes === 'quarter' ? classNames(`${prefixCls}-quarter-Box`) : ''}
      dropdownClassName={modes === 'quarter' ? classNames(`${prefixCls}-quarter`) : ''}
      defaultValue={selectedDate ? moment(selectedDate) : ''}
      format={customFormat}
      onChange={onChange}
    />
  );
};

const TimePickerCustom = (props) => {
  return <TimePicker {...props} />;
};
const RangePickerCustom = (props) => {
  return <RangePicker {...props} />;
};

export { TimePickerCustom, RangePickerCustom };

export default DatePickerCustom;