meterial ui datetimepicker 설정시 유의점

meterial ui datetimepicker 값 설정시 유의점

개인적으로 프로젝트 진행시 reactjs + mui 조합을 가장 많이 사용합니다. 익숙한 이유도 크지만, 기능 추가 등의 지원이 mui를 사용하는 가장 큰 이유 입니다.

mui 4.X에서는 beta 버젼으로 제공 되었고 오류를 꽤 가지고 있었지만, mui-x 5.x에서는 좀 더 안정된 datepicker를 제공(22.06.24 기준 5.0.0-alpha.6) 하기 시작했습니다.

mui-x 5.x 컴포넌트 중 datetimepicker를 사용할때 유의 사항을 작성하여 봅니다.

datetimepicker의 value는 any 타입을 받아서 처리 할 수 있습니다. 하지만 문자열로 설정하면 값이 화면에 안그려지거나, 갱신이 안되는 경우가 발생합니다.

빈 값을 설정하기위해서는 꼭 null로 설정해야 합니다.

const [strtDate, setStrtDate] = React.useState<Date | string | null>(null);

  React.useEffect(() => {
    if (data.strtRsvtDtm)
      setStrtDate((_) => parse(data.strtRsvtDtm, "yyyyMMddHHmmss", new Date()));
    else setStrtDate(null);
  }, [data]);

return (<DateTimePicker
            label="Delevery date"
            value={strtDate}
            onChange={(newValue, keyboardInputValue) => {
              let result = keyboardInputValue;
              if (newValue && newValue.toString() !== "Invalid Date") {
                result = format(new Date(newValue), "yyyyMMddHHmmss");
              }
              setData({ ...data, strtRsvtDtm: result ?? "" });
              // 화면에 갱신 문제로 이렇게 처리 해야함... :(
              setStrtDate(newValue);
            }}
            // minDate={parse(endDate, 'yyyyMMdd', new Date())}
            inputFormat="yyyy-MM-dd HH:mm:ss"
            mask="____-__-__ __:__:__"
            disableOpenPicker={false}
            ampm={false}
            renderInput={(dProps) => (
              <TextField
                {...dProps}
                variant="outlined"
                sx=
                {...makeErrorProps(errorState, "strtRsvtDtm")}
              />
            )}
          />)

전체 DateTimePicker 소스 바로 가기

이전에 몇번 경험했던 일인데, 매번 잊어버려서 작성하게 되었습니다. :)