Selector de fecha en React Js con DatePicker

Hola,
Si requieren implementar un selector de fechas, que permita seleccionar una fecha en un campo en React, lo pueden hacer de la siguiente forma:

1. Primero instalen la librería DatePicker, con el comando:

npm install react-datepicker

2. Invocar el import:

import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

3. Finalmente, crean su campo selector de fechas así:

// constante para fecha
const [initialDate, setInitialDate] = useState(null);

return(
    <Form.Field required>
    <label>Mi fecha inicial:</label>
    <DatePicker dateFormat="dd/MM/yyyy" selected={initialDate} onChange={(dateInicial) => setInitialDate(dateInicial)} />
    </Form.Field>
)

Quedando así:

Si luego, se quiere seleccionar una fecha final definiéndole que la fecha final sea la misma fecha inicial o después de a fecha inicial se realiza así:

<Form.Field required>
    <label>Mi fecha final:</label>
    <DatePicker dateFormat="dd/MM/yyyy" minDate={initialDate} selected={finalDate} onChange={(dateFinal) => setFinalDate(dateFinal)} />
</Form.Field>

Adicional a esto, si se le quiere delimitar en la fecha final, que solo pueda seleccionarse hasta máximo 1 mes después de la fecha inicial se debe incluir dentro del campo de fecha final este comando:

maxDate={addMonths(initialDate, 1)}

Igualmente, adicionar su import:

import { addMonths } from 'date-fns';

Quedando así:

<Form.Field required>
    <label>Mi fecha Final:</label>
    <DatePicker dateFormat="dd/MM/yyyy" minDate={initialDate} maxDate=    {addMonths(initialDate, 1)} selected={finalDate} onChange={(dateFinal) => setFinalDate(dateFinal)} />
</Form.Field>

El formato para ambas fechas es día/mes/año, de la siguiente manera:

Para el siguiente ejemplo, la fecha inicial seleccionada fue el 11/10/2021, como se observan las otras fechas anteriores a ese día, están inhabilitadas:

Lo mismo pasa con los días después del 11/11/2021, puesto que solo tienen habilitado un mes para seleccionar:

Si se requiere cambiar el lenguaje del calendario de inglés a español, se utiliza el siguiente import:

import es from 'date-fns/locale/es';

Y luego en el input incluirlo así:

locale={es}

Quedando finalmente así:

<Form.Field required>
    <label>Mi fecha Final:</label>
    <DatePicker locale={es} dateFormat="dd/MM/yyyy" minDate={initialDate} maxDate=    {addMonths(initialDate, 1)} selected={finalDate} onChange={(dateFinal) => setFinalDate(dateFinal)} />
</Form.Field>

Listo, eso es todo, solo queda desplegar y sale.

Basado en:

https://reactdatepicker.com/