datepicker 자동 masking하기

문제

- 현재 react-datepicker library를 활용하고 있는데 input에 날짜를 입력할 때 자동으로 MM-dd-yyyy형태로 작성되게 하고싶은데 mmddyyyy로 들어감

- locale에 따라 자동으로 formating형태에 따라 대쉬를 넣어주고 싶음

 

해결방법

- datepicker에서 열어둔 props의 customInput을 활용한다.

- 자동으로 masking을 도와주는 라이브러리(react-text-mask) 사용
(https://github.com/text-mask/text-mask/tree/master/react)

 

필요한 부분 코드만 작성 (나머지 불필요한 부분들은 삭제함)

- locale에 따라 다르게 mask부분의 배열을 변경해주면 됩니다.

 

import ReactDatePicker, { registerLocale } from 'react-datepicker';
import { ko, enUS } from 'date-fns/locale';
import MaskedInput from 'react-text-mask';

function DateInput({
  name,
  selected,
  locale = 'en',
  ...rest
}: props) {
  return (
    <Styled.Wrapper>
      <ReactDatePicker
        customInput={
          <MaskedInput
            mask={
              locale === 'ko'
                ? [/\d/, /\d/, /\d/, /\d/, '-', /\d/, /\d/, '-', /\d/, /\d/]
                : [/\d/, /\d/, '-', /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/]
            }
            guide={false}
          />
        }
        dateFormat={DATE_FORMAT[locale]}
        {...rest}
      />
    </Styled.Wrapper>
  );
}

export default DateInput;

 

날짜 데이터 유효성

자동으로 -를 넣어주는 것 이상으로 월, 일, 윤년 같은 것을 자동으로 검증해주고 싶다면?

 

1.  text-mask-addons install

yarn add text-mask-addons

https://github.com/text-mask/text-mask/tree/master/addons/#readme

2. createAutoCorrectedDatePipe api를 통해서 autoCorrectedDatePipe반환 뒤 MaskedInput props로 전달
(저는 locale에 따라 다르게 유효범위를 주고있습니다.)

import MaskedInput from 'react-text-mask';
import createAutoCorrectedDatePipe from 'text-mask-addons/dist/createAutoCorrectedDatePipe';


function DateInput({
  name,
  selected,
  size = 'large',
  locale = 'en',
  onSelect,
  onChange,
  ...rest
}: Types.DateInputProps) {

  const autoCorrectedDatePipe = createAutoCorrectedDatePipe(
    locale === 'ko' ? 'yyyy-mm-dd' : 'mm-dd-yyyy',
  );


  return (
    <Styled.Wrapper size={size}>
      <ReactDatePicker
        locale={locale}
        name={name}
        selected={selected ? ""}
        customInput={
          <MaskedInput
            mask={
              locale === 'ko'
                ? [/\d/, /\d/, /\d/, /\d/, '-', /\d/, /\d/, '-', /\d/, /\d/]
                : [/\d/, /\d/, '-', /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/]
            }
            guide={false}
            pipe={autoCorrectedDatePipe}
          />
        }

---

이후 찾아보니 mul Input의 유효한값 mask해주는 3rd party library로는 imask 라이브러리를 소개하고 있네요..

imask와 react-text-mask 장단점을 비교해보는 것이 필요해보입니다...  !

 

 

출처

https://stackoverflow.com/questions/56679242/insert-auto-slash-for-date-in-mm-dd-yyyy-format-for-react-datepicker