import React, { useEffect, useMemo, useState } from 'react';
|
import { LeftArrow2Outlined, RightArrow2Outlined, CloseBoldOutlined } from 'dd-icons';
|
import { moment, myTimeFormat, getweekTime } from '../../utils/utility';
|
import './index.less';
|
|
/**
|
* time: date | string; // 当前月份时间
|
* activeTime: date | string; // 当前选择日期
|
* onClickDate: func; // 点击日期回调事件
|
* onChangeMonth: func, // 切换月份回调, 返回月份date格式
|
* CalendaronClick：func //日历取消确定操作
|
*/
|
const CalendarRangeDay = ({ time = new Date(), activeTime, onClickDate, onChangeMonth, CalendaronClick }) => {
|
// 当前选择月份
|
const [nowTime, setNowTime] = useState(myTimeFormat(time, 'YYYY-M'));
|
|
// 当前点击日期
|
const [activeDate, setActiveDate] = useState([
|
{ value: 'thisMonth', label: new Date(activeTime).getDate(), key: activeTime }]);
|
|
// 当前月份的天数
|
const monthDays = useMemo(() => {
|
let monthDay = [];
|
let thisMonthDays = moment(nowTime).daysInMonth();
|
for (let i = 1; i <= thisMonthDays; i++) {
|
let key = `${nowTime}-${i}`;
|
monthDay.push({ value: 'thisMonth', label: i, key: moment(key).format('YYYY-M-D') });
|
}
|
// 当前月份第一天星期几
|
let firstDay = new Date(nowTime).getDay();
|
// 上一月,下一个月
|
let beforeMonth = moment(nowTime).add(-1, 'month'),
|
lastMonth = moment(nowTime).add(1, 'month');
|
// 上一个月的天数
|
let beforeMonthDays = moment(beforeMonth).daysInMonth();
|
// 计算上一个月有多少天在今月展示
|
let beforeDay = [];
|
for (let i = beforeMonthDays; i > beforeMonthDays - firstDay; i--) {
|
let key = myTimeFormat(beforeMonth, `YYYY-MM-${i}`);
|
beforeDay = [{ value: 'beforeMonth', label: i, key: moment(key).format('YYYY-MM-DD') }, ...beforeDay];
|
}
|
// 计算下一个月有多少天在今月展示
|
let lastDay = [];
|
for (let i = 1; i <= 42 - beforeDay.length - monthDay.length; i++) {
|
let key = myTimeFormat(lastMonth, `YYYY-M-${i}`);
|
lastDay.push({ value: 'lastMonth', label: i, key: moment(key).format('YYYY-MM-DD') });
|
}
|
return [...beforeDay, ...monthDay, ...lastDay];
|
}, [nowTime]);
|
|
// 点击上一月，下一月
|
function handleChangeMonth(key) {
|
let time = '';
|
if (key === 'before') {
|
time = moment(nowTime).add(-1, 'month');
|
} else {
|
time = moment(nowTime).add(1, 'month');
|
}
|
setNowTime(myTimeFormat(time, 'YYYY-M'));
|
!!onChangeMonth && onChangeMonth(key, time);
|
}
|
|
// 点击日期 activeDate [开始时间， 结束时间]
|
function handleClickDate(item) {
|
const list = activeDate.concat(item);
|
setActiveDate([item]);
|
!!onClickDate && onClickDate(item)
|
}
|
// function handleClickDate(item) {
|
// const list = activeDate.concat(item);
|
// if (list.length > 2) {
|
// setActiveDate([item]);
|
// } else {
|
// if (list.length === 2) {
|
// let newList = rangeTime(list);
|
// setActiveDate(newList);
|
// !!onClickDate && onClickDate(newList);
|
// } else {
|
// setActiveDate(list);
|
// }
|
// }
|
// }
|
|
// 开始时间，结束时间排序
|
function rangeTime(list) {
|
return list[0].key > list[1].key ? [list[1], list[0]] : [list[0], list[1]];
|
}
|
|
// 传入当前选择日期设置
|
let date = activeTime ? myTimeFormat(activeTime, 'YYYY-MM-DD') : '';
|
useEffect(() => { }, [date]);
|
|
// 日期
|
const dateHeader = [{ label: '日' }, { label: '一' }, { label: '二' }, { label: '三' }, { label: '四' }, { label: '五' }, { label: '六' }];
|
|
return (
|
<div className="CalendarRange">
|
<div className="CalendarRange-header">
|
{/* <div className="CalendarRange-header-title">取消</div> */}
|
<div style={{ display: 'flex', alignItems: 'center' }}>
|
<CloseBoldOutlined onClick={() => CalendaronClick('day', 'onClose')} />
|
<LeftArrow2Outlined style={{ paddingLeft: '12px' }} onClick={() => handleChangeMonth('before')} />
|
</div>
|
<div className="CalendarRange-header-title">
|
{activeDate.length > 0 && `${myTimeFormat(activeDate[0].key, 'YYYY年M月D日')} ${getweekTime(activeDate[0].key)}`}
|
</div>
|
<div style={{ display: 'flex', alignItems: 'center' }}>
|
<RightArrow2Outlined onClick={() => handleChangeMonth('next')} />
|
<div onClick={() => CalendaronClick('day', 'submit')} style={{ paddingLeft: '12px' }} className="CalendarRange-title-color">
|
确定
|
</div>
|
</div>
|
{/* <div className="CalendarRange-header-title">确定</div> */}
|
</div>
|
<div className="CalendarRange-main">
|
<div className="CalendarRange-main-header">
|
{dateHeader.map((x, t) => (
|
<div className="CalendarRange-main-header-item" key={t}>
|
{x.label}
|
</div>
|
))}
|
</div>
|
<div className="CalendarRange-main-content">
|
{monthDays.map((x, t) => (
|
<div onClick={() => handleClickDate(x)} className="CalendarRange-main-content-item" key={t}>
|
<div className="CalendarRange-main-content-item-o">
|
{
|
<div
|
className={`CalendarRange-main-content-itemBox ${x.value !== 'thisMonth' ? 'CalendarRange-main-content-itemSubtitle' : ''}
|
'CalendarRange-hover-all'
|
`}
|
>
|
{x.key === myTimeFormat(new Date(), 'YYYY-M-D') && (
|
<div
|
className={`CalendarRange-main-content-itemBox CalendarRange-today ${x.key === activeDate[0].key ? 'CalendarRange-hover CalendarRange-hover-all' : ''}
|
}`}
|
>
|
今
|
</div>
|
)}
|
|
{x.key !== myTimeFormat(new Date(), 'YYYY-M-D') && (
|
<div
|
className={`CalendarRange-main-content-itemBox-l
|
${activeDate.length === 1 && (x.key === activeDate[0].key ? 'CalendarRange-hover CalendarRange-hover-all' : '')}
|
${activeDate.length === 2 && activeDate[0].key === activeDate[1].key
|
? x.key >= activeDate[0].key && x.key <= activeDate[1].key
|
? 'CalendarRange-hover CalendarRange-hover-all'
|
: ''
|
: ''
|
}
|
`}
|
>
|
{x.label}
|
</div>
|
)}
|
</div>
|
}
|
</div>
|
</div>
|
))}
|
</div>
|
</div>
|
</div>
|
);
|
};
|
|
export default CalendarRangeDay;
|
