130 lines
3.4 KiB
TypeScript
130 lines
3.4 KiB
TypeScript
import moment, { locale } from 'moment';
|
|
import styled from "styled-components";
|
|
import { useState } from 'react';
|
|
import Calendar from 'react-calendar';
|
|
import 'react-calendar/dist/Calendar.css';
|
|
import { useEffect } from 'react';
|
|
import { CalendarType } from '@/entities/common/model/types';
|
|
|
|
interface NiceCalendarProps {
|
|
calendarOpen: boolean;
|
|
setCalendarOpen: (calendarOpen: boolean) => void;
|
|
startDate?: string;
|
|
endDate?: string;
|
|
singleDate?: string;
|
|
calendarType: CalendarType;
|
|
setNewDate: (date: string) => void;
|
|
minDate?: Date;
|
|
maxDate?: Date;
|
|
};
|
|
|
|
const NiceCalendar = ({
|
|
calendarOpen,
|
|
setCalendarOpen,
|
|
startDate,
|
|
endDate,
|
|
singleDate,
|
|
calendarType,
|
|
setNewDate,
|
|
minDate: propMinDate,
|
|
maxDate: propMaxDate
|
|
}: NiceCalendarProps) => {
|
|
const [valueDate, setValueDate] = useState<string>();
|
|
const [minDate, setMinDate] = useState<Date | undefined>();
|
|
const [maxDate, setMaxDate] = useState<Date | undefined>();
|
|
const onchangeToDate = (selectedDate: any) => {
|
|
setNewDate(moment(selectedDate).format('YYYY.MM.DD'));
|
|
setCalendarOpen(false);
|
|
};
|
|
|
|
const onClickToClose = () => {
|
|
// setCalendarOpen(false);
|
|
};
|
|
const setMinMaxValueDate = () => {
|
|
if(calendarType === CalendarType.Start){
|
|
setMinDate(propMinDate || undefined);
|
|
if(!!endDate){
|
|
setMaxDate(new Date(endDate));
|
|
}
|
|
setValueDate(startDate);
|
|
}
|
|
else if(calendarType === CalendarType.End){
|
|
if(!!startDate){
|
|
setMinDate(new Date(startDate));
|
|
}
|
|
setMaxDate(propMaxDate || new Date());
|
|
setValueDate(endDate);
|
|
}
|
|
else if(calendarType === CalendarType.Single){
|
|
setMinDate(propMinDate || undefined);
|
|
setMaxDate(propMaxDate || undefined);
|
|
setValueDate(singleDate);
|
|
}
|
|
};
|
|
|
|
const formatMonthYear = (locale: string | undefined, date: Date) => {
|
|
return date.toLocaleDateString('en', {
|
|
month: 'long',
|
|
year: 'numeric'
|
|
});
|
|
};
|
|
const formatYear = (locale: string | undefined, date: Date) => {
|
|
return date.toLocaleDateString('en', {
|
|
year: 'numeric'
|
|
});
|
|
};
|
|
const formmatMonth = (locale: string | undefined, date: Date) => {
|
|
return date.toLocaleDateString('en', {
|
|
month: 'short'
|
|
});
|
|
};
|
|
const formatDay = (locale: string | undefined, date: Date) => {
|
|
return date.toLocaleString('en', {
|
|
day: 'numeric'
|
|
});
|
|
};
|
|
const formatShortWeekday = (locale: string | undefined, date: Date) => {
|
|
return date.toLocaleString('en', {
|
|
weekday: 'short'
|
|
});
|
|
};
|
|
|
|
useEffect(() => {
|
|
setMinMaxValueDate();
|
|
|
|
}, [calendarOpen])
|
|
|
|
return (
|
|
<>
|
|
{ (calendarOpen) &&
|
|
<>
|
|
<div className="bg-dim"></div>
|
|
<CalendarWrapper onClick={ () => onClickToClose() }>
|
|
<Calendar
|
|
minDate={ minDate }
|
|
maxDate={ maxDate }
|
|
onChange={ onchangeToDate }
|
|
value={ valueDate }
|
|
formatMonthYear={ formatMonthYear }
|
|
formatYear= { formatYear }
|
|
formatMonth={ formmatMonth }
|
|
formatDay={ formatDay }
|
|
formatShortWeekday={ formatShortWeekday }
|
|
showNeighboringMonth={ true }
|
|
></Calendar>
|
|
</CalendarWrapper>
|
|
</>
|
|
}
|
|
</>
|
|
);
|
|
};
|
|
const CalendarWrapper = styled.div`
|
|
z-index: 1100;
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
`;
|
|
|
|
export default NiceCalendar; |