DatePicker with customInput not closing the time selection modal on click enter button
See original GitHub issueDescribe the bug DatePicker with customInput not closing the time time selection modal on click enter button. below is my component
const TimePicker: React.SFC<TimePickerProps> = ({
classname = '',
timeIntervals,
dateFormat,
timeFormat,
label,
hint,
errorMessage,
id,
value,
readonly,
onChange
}) => {
const classnames = cx(style["time-picker"], classname);
const startDate = value || new Date();
return ( <div className={classnames}>
<DatePicker
selected={startDate}
onChange={onChange}
showTimeSelect
showTimeSelectOnly
timeIntervals={timeIntervals || 15}
timeCaption="Time"
dateFormat={dateFormat || "h:mm aa"}
timeFormat={timeFormat || "h:mm aa"}
readOnly={readonly}
customInput={
<TimeField
onChange={() => null}
onClick={() => null}
id={id}
value={value}
label={label}
hint={hint}
errorMessage={errorMessage}
/>
}
/>
</div> );
}
my custom input
const TimeField: React.SFC<TimeFieldProps> = ({
value,
label,
id,
onFocus,
onChange,
onClick,
onBlur,
hint,
readOnly = false,
onKeyPress,
errorMessage = "",
classname,
inputRef
}) => {
const classnames = cx("time-field", classname, {
"has-error": errorMessage
});
return (
<div className={classnames}>
<div className={style["time-field-input-wrapper"]}>
<input
className={style["time-field-input"]}
data-test-id={`time-field-${id}`}
id={`time-field-${id}`}
type="text"
value={value as string}
onChange={onChange}
onFocus={onFocus}
ref={inputRef}
onClick={onClick}
readOnly={readOnly}
onKeyPress={onKeyPress}
onBlur={onBlur}
/>
</div>
</div>
);
};
Issue Analytics
- State:
- Created 4 years ago
- Comments:5
Top Results From Across the Web
React-datepicker | Calendar not closing on selection of date
This issue occurs because you are wrapping you datepicker component inside an <input> tag, unwrap the datepicker from it like this:.
Read more >React custom datepicker: Step-by-step - LogRocket Blog
datepicker : Renders a date input and presents the calendar for the user to select the date. We'll store each component in its...
Read more >React Date Picker component - MUI X
It's possible to render any date picker without the modal/popover and text field. This can be helpful when building custom popover/modal containers.
Read more >Show a browser picker for date, time, color, and files
The example below shows you how to open a browser date picker. <input type="date">
Read more >Datepicker documentation for React | Mobiscroll
Name Type Default value
anchor HTMLElement undefined
animation String, Boolean undefined
buttons Array
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
When i use without customInput it is working perfectly
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.