/*
|
* @Company: hugeInfo
|
* @Author: ldh
|
* @Date: 2022-08-16 08:50:50
|
* @LastEditTime: 2023-08-01 17:11:39
|
* @LastEditors: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
|
* @Version: 1.0.0
|
* @Description: 日历选择器（月份）
|
*/
|
import React, { useEffect, useMemo, useState } from 'react';
|
import { LeftArrow2Outlined, RightArrow2Outlined, CloseBoldOutlined } from 'dd-icons';
|
import { moment, myTimeFormat } from '../../utils/utility';
|
import './index.less';
|
|
/**
|
* 仅仅只能选择月份的日历组件
|
* time: date | string; // 当前月份时间
|
* activeTime: date | string; // 当前选择日期
|
* onClickDate: func; // 点击日期回调事件
|
* onChangeMonth: func, // 切换月份回调, 返回月份date格式
|
* CalendaronClick：func //日历取消确定操作
|
*/
|
const CalendarMonth = ({ time = new Date(), activeTime, onClickDate, onChangeMonth, CalendaronClick }) => {
|
// 当前选择月份
|
const [nowTime, setNowTime] = useState(myTimeFormat(time, 'YYYY-MM'));
|
|
const [startX, setStartX] = useState();
|
const [endX, setEndX] = useState();
|
|
|
// 当前点击日期
|
const [activeDate, setActiveDate] = useState([]);
|
|
// 当前月份的天数
|
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-MM-DD') });
|
}
|
// 当前月份第一天星期几
|
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-MM-${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-MM'));
|
!!onChangeMonth && onChangeMonth(key, time);
|
}
|
|
// 点击日期 activeDate [开始时间， 结束时间]
|
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 style={{ display: 'flex', alignItems: 'center' }}>
|
<CloseBoldOutlined onClick={() => CalendaronClick('month', 'onClose')} />
|
<LeftArrow2Outlined style={{ paddingLeft: '12px' }} onClick={() => handleChangeMonth('before')} />
|
</div>
|
<div className="CalendarRange-header-title">
|
{activeDate.length == 0 && myTimeFormat(nowTime, 'YYYY年M月')}
|
{activeDate.length == 1 && myTimeFormat(activeDate[0].key, 'YYYY年M月D日')}
|
{activeDate.length == 2 && `${myTimeFormat(activeDate[0].key, 'YYYY年M月D日')}-${myTimeFormat(activeDate[1].key, 'YYYY年M月D日')}`}
|
</div>
|
<div style={{ display: 'flex', alignItems: 'center' }}>
|
<RightArrow2Outlined onClick={() => handleChangeMonth('next')} />
|
<div onClick={() => CalendaronClick('month', 'submit')} style={{ paddingLeft: '12px' }} className="CalendarRange-title-color">
|
确定
|
</div>
|
</div>
|
</div>
|
<div className="CalendarRange-main CalendarRange-main-month" >
|
<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 className="CalendarRange-main-content-item" key={t}>
|
<div className="CalendarRange-main-content-item-o">
|
{
|
<div
|
className={`CalendarRange-main-content-itemBox
|
${activeDate.length === 2 && activeDate[0].key !== activeDate[1].key
|
? x.key >= activeDate[0].key && x.key <= activeDate[1].key
|
? 'CalendarRange-hover'
|
: ''
|
: ''
|
}
|
${activeDate.length === 2 && activeDate[0].key !== activeDate[1].key ? x.key === activeDate[0].key && 'CalendarRange-hover-l' : ''}
|
${activeDate.length === 2 && activeDate[0].key !== activeDate[1].key ? x.key === activeDate[1].key && 'CalendarRange-hover-r' : ''}
|
${activeDate.length === 2 && x.key === activeDate[1] && activeDate[0] === activeDate[1].key && 'CalendarRange-hover-all'}
|
`}
|
>
|
{x.key === myTimeFormat(new Date(), 'YYYY-MM-DD') && (
|
<div
|
className={`CalendarRange-main-content-itemBox CalendarRange-today
|
}`}
|
>
|
今
|
</div>
|
)}
|
{x.key !== myTimeFormat(new Date(), 'YYYY-MM-DD') && (
|
<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 className='CalendarRange-main-month-div'>{activeDate.length == 0 && myTimeFormat(nowTime, 'M月')}</div>
|
</div>
|
</div>
|
);
|
};
|
|
export default CalendarMonth;
|
