depending on min/max dates disabled state was added

This commit is contained in:
Vladimir Khvan 2023-02-06 20:03:59 +05:00
parent 2b84a44b06
commit 3f05c514c1

View File

@ -1,3 +1,4 @@
import moment from "moment";
import { HeaderContainer, Title } from "../styled-components";
import { HeaderButtons } from "./HeaderButtons";
@ -13,9 +14,19 @@ const onRightClick = (setObservedDate) => {
);
};
export const YearsHeader = ({ observedDate, setObservedDate }) => {
export const YearsHeader = ({
observedDate,
setObservedDate,
minDate,
maxDate,
}) => {
const selectedYear = observedDate.year();
const firstYear = selectedYear - (selectedYear % 10);
const isLeftDisabled =
moment(`${firstYear - 1}`)
.endOf("year")
.endOf("month") < minDate;
const isRightDisabled = moment(`${firstYear + 10}`) > maxDate;
return (
<HeaderContainer>
@ -25,6 +36,8 @@ export const YearsHeader = ({ observedDate, setObservedDate }) => {
<HeaderButtons
onLeftClick={() => onLeftClick(setObservedDate)}
onRightClick={() => onRightClick(setObservedDate)}
isLeftDisabled={isLeftDisabled}
isRightDisabled={isRightDisabled}
/>
</HeaderContainer>
);