reactjs - Închiderea manuală a calendarului primereact

Folosesc primereact versiunea 6.2.1. În timp ce folosesc calendarul din primereact am activat opțiunea pentru showTime. Aceasta afișează un selectator de dată cu un overlay care blochează restul paginii web. Totul funcționează bine. Cu excepția faptului că după ce o dată și o oră sunt selectate, singura modalitate de a închide selectatorul de dată este să dai clic în altă parte pe browser. Există o modalitate de a-l închide manual?

Răspuns #1

import React, { useRef } from 'react';

import { Calendar } from 'primereact/calendar';

    const CustomCalendar = (props) => {
     const cal = useRef(null);
      const handleClose = () => {
        cal.current.hideOverlay()
        // if you're using touchUI option you have to hade it also ;)
        cal.current.touchUIMask.style.display = "none";
      };
      return  <Calendar
        ref={cal}
        {...props}
        footerTemplate={(e) => <div className='footer-calendar'><button onClick={handleClose}>Done</button></div>}
      />
    }

Poți închide suprapunerea manual folosind ref, poți verifica acest link sandbox

verifică linkul GitHub pentru mai multe opțiuni: https://github.com/melloware/primereact/blob/8e459797ee6a74766b195274979eb84a9b2282f0/components/lib/calendar/Calendar.d.ts#L154

Pentru mai multe detalii, puteți verifica documentația din acest articol Din documentație: https://primereact.org/calendar/#api.Calendar.props.hideOnDateTimeSelect

Răspunsul #2

Dacă obții o referință la Calendar, poți apela calendarRef.current.hideOverlay();

Am deschis de asemenea acest tichet: https://github.com/primefaces/primereact/issues/2685

Am trimis acest PR: https://github.com/primefaces/primereact/pull/2687