reactjs - React-datepicker cu input personalizat cu tastare manuală

Încerc să creez un component react-datepicker cu un input stilizat personalizat:

<DatePicker
        selected={startDate}
        customInput={<CustomInput inputRef={inputRef} />}
        onChangeRaw={(e) => handleChangeRaw(e)}
        onChange={(date: Date | null) => {
          setStartDate(date);
        }}
      />

const CustomInput = forwardRef((props: any, ref) => {
  return <Input {...props} ref={ref} />;
});

Am vrut să introduc validarea (doar o validare simplă astfel încât orice introduce utilizatorul să fie formatat ca dată, astfel încât utilizatorul să nu poată scrie ce vrea).

Am creat o funcție care ar formata inputul folosind atributul onChangeRaw în react-datepicker:

  const handleChangeRaw = (date) => {
    date.currentTarget.value = format(startDate, "dd/MM/yyyy");
  };

Totuși, după ce am folosit asta nu mai pot să tastez. Are cineva idee cum să folosesc tastarea manuală cu input personalizat în react-datepicker cu o funcție simplă de validare?

Iată problema recreată în sandbox: https://codesandbox.io/s/react-datepicker-custominput-sample-forked-elx310?file=/src/App.tsx

Răspuns #1

selected={startDate}

Aici react-datepicker se așteaptă la un obiect Date.

Cu toate acestea, când declanșezi handleChangeRaw, primești un eveniment de schimbare, cu o anumită valoare (date.currentTarget.value), dar aceasta nu este în notația de dată pe care o așteaptă selectorul de dată.

Deci părerea mea despre asta ar fi;

• onChangeRaw, convertește valoarea introdusă într-un nou obiect Date.
• Dacă data nu este validă, pur și simplu ignoră modificarea
• În caz contrar, creează un nou Date și folosește setStartDate pentru a schimba la acea nouă dată

const handleChangeRaw = (date) => {
      const newRaw = new Date(date.currentTarget.value);
      if (newRaw instanceof Date && !isNaN(newRaw)) {
        setStartDate(newRaw);
      }
  };

Încearcă-l online

Răspunsul #2

Dacă înțeleg corect problema dumneavoastră, puteți adăuga următorul tip pentru a remedia tiparea.

const handleChangeRaw = (date: React.FocusEvent<HTMLInputElement>) => {
    if (!startDate){
      return
    }
    date.currentTarget.value = format(startDate, "dd/MM/yyyy");
};

date ar trebui să aibă tipul React.FocusEvent<HTMLInputElement>. Deoarece startDate poate fi null, trebuie să verificăm înainte de a-l folosi. În acest caz, doar ies din funcție. Dar ai putea, de asemenea, să atribui aici o valoare implicită sau altceva.