// 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;