Tengo una entrada de fecha con react-input-mask .

Aquí está mi código:

 <div className="date-picker-container" tabIndex={1}> <InputMask className={className} id={id} onKeyDown={(e) => disabledInput && e.preventDefault()} mask="XX.XX.XXXX" formatChars={{ X: "[1-31]", X: "[1-12]", X: "[1-2200]", }} {...register(name, validation)} value={innerValue} onChange={handleInputChange} placeholder="gün.ay.il" onClick={ className.includes("is-invalid") ? () => setFocused(true) : () => {} } /> <span className="date-icon" onClick={() => setFocused(!focused)}> <Calendar /> </span> <div className={focused ? "d-block" : "d-none"}> <CR locale={locale} date={date} maxDate={maxDate || null} minDate={minDate} onChange={handleChange} displayMode="date" /> </div> </div>

Con la propiedad ' formatChars ' en react-input-mask , quiero escribir una expresión regular en los datos que el usuario escribirá con el teclado.

por ejemplo. el usuario puede escribir un máximo de 31 para el número de días, un máximo de 12 para el mes y 2200 para el año.

Intenté de la manera que especifiqué en el ejemplo, pero no pude obtener el resultado que quería. ¿Cómo puedo hacer eso?