question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

DatePicker with customInput not closing the time selection modal on click enter button

See original GitHub issue

Describe 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:closed
  • Created 4 years ago
  • Comments:5

github_iconTop GitHub Comments

1reaction
soorajbalacommented, Feb 20, 2020

When i use without customInput it is working perfectly

0reactions
stale[bot]commented, Jun 2, 2021

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.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found