DateTimePicker from react widgets open on focus

Question

I'm starting my adventure with react and I have a reusable component of type DateTime like that:

interface IProps
  extends FieldRenderProps<Date, HTMLElement>,
    FormFieldProps {}


const DateInput: React.FC<IProps> = ({
  input,
  width,
  placeholder,
  date = false,
  time = false,
  meta: { touched, error },
  id,
  ...rest
}) => {
  const [isOpen, setIsOpen] = useState<false | "date" | "time" | undefined>(false);
  
  return (
  <Form.Field  error={touched && !!error} width={width}>
      <DateTimePicker 
        onFocus={() => setIsOpen("date")} //here I would like it to be set false or time/date depending on props value
        placeholder={placeholder}
        value={input.value || null}
        onChange={input.onChange}
        date={date}
        time={time}
        {...rest}
        open={isOpen}
      />

      {touched && error && (
          <Label basic color='red'>
              {error}
          </Label>
      )}
  </Form.Field>
  )
};

I would like it to open when I click on the field. Thats why I added that:

const [isOpen, setIsOpen] = useState<false | "date" | "time" | undefined>(false);

Maybe it is not the best way to do that :/

Problem with that code is that when I select input the it is set to open but even if it looses focuse then still it is open. I would like it to be closed after sleecting a date or clicking somewhere else.

And second thing is that I would like it to open date/time depending on props set on component (date = false; time = false)

Could you please help me with that task?

this may be because you in your code you don't have anything that will close it when it's not in focus — Ivan Satsiuk, Nov 03 '20 at 10:31

score 0 · Answer 1 · edited Feb 01 '22 at 13:17

0

You need to add a function that handles outside click or date selection. e.g.:

const closePicker = () => setIsOpen(false)
...
<DateTimePicker ...
onSelect={closePicker}
...>

to watch the outside click, you need to add listener for click events.

Have a look at this answer

edited Feb 01 '22 at 13:17

Apostolos

10,033
5
24
39

answered Nov 03 '20 at 10:37

Ivan Satsiuk

333
2
9

score 0 · Answer 2 · answered Nov 03 '20 at 18:45

Ok, so I did it this way, do you think that somehow it can be improved?

interface IProps
  extends FieldRenderProps<Date, HTMLElement>,
    FormFieldProps {}


const DateInput: React.FC<IProps> = ({
  input,
  width,
  placeholder,
  date = false,
  time = false,
  meta: { touched, error },
  id,
  ...rest
}) => {
  const [isFocused, setIsFocused] = useState<false | "date" | "time" | undefined>(false);
  const setOpen = (active: boolean) => {
    if(!active){
      setIsFocused(false);
    }
    else{
      if(date === true){
        setIsFocused("date");
      }else{
        setIsFocused("time");
      }
    }
  }
  return (
  <Form.Field  
    error={touched && !!error} 
    width={width}>
      <DateTimePicker 
        onBlur={() => setOpen(false)}
        onFocus={() => setOpen(true)}
        placeholder={placeholder}
        value={input.value || null}
        onChange={input.onChange}
        onSelect={() => setIsFocused(false)}
        date={date}
        time={time}
        {...rest}
        open={isFocused}
      />

      {touched && error && (
          <Label basic color='red'>
              {error}
          </Label>
      )}
  </Form.Field>
  )
};

DateTimePicker from react widgets open on focus

2 Answers2