65 lines
1.7 KiB
TypeScript
65 lines
1.7 KiB
TypeScript
|
'use client';
|
||
|
|
|
||
|
|
import { Calendar } from '@/components/ui/calendar';
|
||
|
|
import { clsx } from 'clsx';
|
||
|
|
import { useEffect, useRef, useState } from 'react';
|
||
|
|
|
||
|
|
const page = () => {
|
||
|
|
const [date, setDate] = useState<Date>();
|
||
|
|
|
||
|
|
const calendarRef = useRef<HTMLDivElement | null>(null);
|
||
|
|
|
||
|
|
const mount = useRef(false);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
if (mount.current) {
|
||
|
|
if (calendarRef.current) {
|
||
|
|
const calendarFooter = document.createElement('div');
|
||
|
|
calendarFooter.classList.add(
|
||
|
|
'calendar-footer',
|
||
|
|
'flex',
|
||
|
|
'justify-between',
|
||
|
|
'items-center',
|
||
|
|
'mt-6',
|
||
|
|
'px-3',
|
||
|
|
);
|
||
|
|
|
||
|
|
const calendar = document.querySelector('.calendar');
|
||
|
|
|
||
|
|
const btn1 = document.createElement('div');
|
||
|
|
btn1.classList.add('btn1', 'text-textLight', 'cursor-pointer', 'text-[14px]');
|
||
|
|
btn1.textContent = 'Отменить';
|
||
|
|
|
||
|
|
const btn2 = document.createElement('button');
|
||
|
|
btn2.classList.add('btn2');
|
||
|
|
btn2.textContent = 'Выбрать';
|
||
|
|
|
||
|
|
calendarFooter.appendChild(btn1);
|
||
|
|
calendarFooter.appendChild(btn2);
|
||
|
|
calendar?.appendChild(calendarFooter);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
mount.current = true;
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<section className="container">
|
||
|
|
<div className="" ref={calendarRef}>
|
||
|
|
<Calendar
|
||
|
|
mode="single"
|
||
|
|
selected={date}
|
||
|
|
onSelect={setDate}
|
||
|
|
initialFocus
|
||
|
|
// onDayClick={() => setActiveDay(true)}
|
||
|
|
className={clsx(
|
||
|
|
'my-20 calendar bg-white w-fit rounded-[8px] shadow-[0_2px_32px_rgba(0,0,0,0.3)] transition-all',
|
||
|
|
// { 'day-styles': activeDay },
|
||
|
|
)}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default page;
|