I tried to add my input to the datapicker with a mask. But I ran into a problem. It is not possible to enter values with this approach, or to call the calendar itself when focused
import { DatePicker as AntdDatePicker } from "antd";
import MaskedInput from "react-text-mask";
import React, { useState } from "react";
export function DatePicker(props) {
const InputComponent = (propsInput) => {
return (
<MaskedInput
{...propsInput}
mask={[
/[0-3]/,
/[0-9]/,
".",
/[0-1]/,
/[0-9]/,
".",
/[1-2]/,
/d/,
/d/,
/d/,
]}
placeholder="dd.mm.yyyy"
/>
);
};
return (
<AntdDatePicker
disabled={props?.isDisabled}
disabledDate={props?.isDisabledDate}
open={props?.isOpen}
readOnly={props?.isReadonly}
components={{
input: InputComponent,
}}
/>
);
}
help
I tried to put in the ref but without success
The customized input component should support ref.
import { DatePicker as AntdDatePicker } from "antd";
import MaskedInput from "react-text-mask";
import React, { useState } from "react";
export function DatePicker(props) {
const InputComponent = React.forwardRef((propsInput, ref) => {
return (
<MaskedInput
{...propsInput}
mask={[
/[0-3]/,
/[0-9]/,
".",
/[0-1]/,
/[0-9]/,
".",
/[1-2]/,
/d/,
/d/,
/d/,
]}
placeholder="dd.mm.yyyy"
render={(textMaskRef, props) => (
<input
{...props}
ref={(node) => {
if (node) {
textMaskRef(node);
if (ref) {
ref.current = node;
}
}
}}
/>
)}
/>
);
});
return (
<AntdDatePicker
open={props?.isOpen}
readOnly={props?.isReadonly}
components={{
input: InputComponent,
}}
/>
);
}
Output:
codesandbox
1