React UI 라이브러리 antd에서 날짜 및 시간을 입력할 수 있는 컴포넌트 <DatePicker />에 대하여 알아봅니다.

<DatePicker />

<DatePicker />는 방문자로부터 날짜와 시간을 입력 받을 수 있는 antd의 컴포넌트입니다. 날짜를 입력 받을 경우 텍스트로 입력 받을 수도 있지만 사용자 입장에서는 매우 불편하므로 이와 관련된 Datepicker 라이브러리가 매우 많이 사용합니다. 그런 이유로 다양한 라이브러리가 존재하는데 이 중에서도 antd의 DatePicker는 기능과 편의성을 모두 가지고 있어 특별히 다른 라이브러리를 찾을 필요가 없는 것 같습니다.

그럼 아래에서 antd의 DatePicker에 대하여 자세히 알아보도록 하겠습니다.


! DatePicker 컴포넌트의 Property 및 Method 정보
먼저 DatePicker에 사용하는 프로터티와 메소드 정보부터 살펴봅니다.

open // <boolean> 보여주거나 숨기기
format // 날짜 및 시간 포맷 설정
disabled // <boolean> 비활성화 사용하기, (default: false)
style // css 스타일을 선언함
autoFocus // <boolean> Mount될 때 자동으로 focus 여부

size // <large | middle | small> input 박스의 크기를 결정
dropdownClassName // <string> Dropdown 팝업에 사용자 클래스 지정하기
bordered // <boolean> 테투리 사용 여부

onOpenChange // <function> 열리거나 닫히는 경우 실행할 콜백 함수
placeholder // input 입력폼에 나타날 placeholder 문자열



@ Methods

blur()
// blur(블러)되는 경우
focus() // 포커스 될 경우

여기까지 사용 가능한 프로퍼티와 메소드 정보를 알아봤습니다. 아래는 간단한 예제 코드를 알아봅니다.


! antd DatePicker 예제보기
이번에는 몇 가지 자주 사용되는 형태의 DatePicker 예제입니다. 간단한 예제를 먼저 알아봅니다.

@ 날짜 format 사용하기
<DatePicker
  format="YY/MM/DD"
/>

위 예제는 날짜의 포맷을 설정하는 format 프로퍼티를 사용하였습니다. 이 경우 날짜 포맷에 맞추어진 결과를 얻을 수 있습니다. 아래처럼 날짜 분만 아니라 시간 역시 사용이 가능합니다.
YY/MM/DD HH:mm

// 12 시간 기준의 시간 설정하기
YY/MM/DD HH:mm a

아래의 format 값은 뒤에 a가 추가되었습니다. 이 경우 24시간 기준이 아닌 12시간 기준으로 값을 사용할 수 있습니다.


@ 다음 예제
<DatePicker
  format="YY-MM-DD"
  placeholder="00/00/00"
  style={ top: '10px' }
  className={'my-picker'}
  open={this.state.isShow}
/>

이번 예제는 좀 더 다양한 프로퍼티를 사용한 예제입니다. 입력 값이 없을 때 출력하기 위해 placholder를 사용하였습니다. 또 보여주고 감추기 위해 open을 추가하였습니다.


@ 값이 변경된 경우 콜백 실행하기
<DatePicker
  onChange={ this.updateDate }
/>

여기서는 onChange 프로퍼티를 사용하여 만약 값이 변경된 경우라면 updateDate라는 콜백을 실행하도록 하였습니다. 이제 변경된 값, 날짜는 콜백 함수로 함께 전달됩니다. 아래를 봐주세요.
updateDate = (value, dateString) => {
   this.setState({
     date: value
   });
};

value는 설정된 날짜 객체로 전달되며 dateString의 경우 설정된 포맷에 맞추어 값이 반환됩니다. 참고로 RangePicker를 사용하는 경우 두 값 모두 시작, 끝 값이 배열로 전달받게 됩니다.



! RangerPicker 알아보기
DatePicker는 선택한 날짜 뿐만 아니라 시작 날짜와 마지막 날짜를 사용하는 범위의 값을 입력 받을 수 있습니다. 이 경우 RangePicker를 아래와 같이 사용할 수 있습니다.
const { RangePicker } = DatePicker;

<RangePicker />

RangePicker를 사용하면 날짜를 선택하면 화면이 하나가 아닌 두 개가 출력되게 됩니다.

"RangePicker는 시작과 끝 날짜 선택 두 개가 출력"


그래서 시작 날짜와 마지막 날짜의 범위를 선택하는 것이 가능하죠. 아래는 RangePicker에서 사용 가능한 프로퍼티 정보입니다.

allowEmpty // <[boolean, boolean]> 시작 및 마지막 값에 빈 값 허용 여부
separator // 시작과 끝을 구분하는 문자 Ex) ~, - 기호
placeholder // <array> Placeholder 값을 출력함 Ex) ['00/00/00', '00/00/00']



여기까지 antd의 DatePicker 컴포넌트의 사용과 방법에 대하여 알아봤습니다.