Airbnb react-dates 한글 적용 방법, Localization to 'ko'

개발중인 서비스에 달력 date picker 적용을 위해

Airbnb 에서 제공하고 있는 react-dates 라이브러리를 택했고

기본적인 코드 적용은 react-dates npm 에서 기본적으로 제공하고 있어서 어렵지 않았습니다.

다만 달력의 한글화에 살짝 애를 먹었는데 이유는 레퍼런스 찾기가 다소 어려웠습니다.

결과적으로 코드상에서 달라진것은 2~3줄에 불과하였기에

간단한 레퍼런스를 남겨 보려합니다.

• Airbnb의 react-dates 라이브러리에서 제공하는 기본 영문 달력 코드중 DayPickerSingleDateController부분은 다음과 같습니다.
  DayPickerRangeController도 동일합니다.

import React, { Component } from 'react'
import 'react-dates/initialize';
import { DayPickerSingleDateController } from 'react-dates';
import 'react-dates/lib/css/_datepicker.css';


export default class index extends Component {
  constructor(props) {
    super(props);
    
    this.state = {
      focused: true,
      date: props.initialDate,
    };

  
    this.onDateChange = this.onDateChange.bind(this);
    this.onFocusChange = this.onFocusChange.bind(this);
  }

  onDateChange(date) {
    this.setState({ date });
  }

  onFocusChange() {
    this.setState({ focused: true });
  }

  alertPickedData = () => {
    alert(this.state.date);
  }

  render() {
    const { focused, date } = this.state;

    return (
      <div>
          <DayPickerSingleDateController
          
          onDateChange={this.onDateChange}
          onFocusChange={this.onFocusChange}
          focused={focused}
          date={date}
        />
      </div>
    )
  }
}

• 한글화에 추가된 코드

  아래의 두 줄을 import 해 주시고

import moment from "moment"
import "moment/locale/ko"

그리고 constructor 내부에

moment.locale('ko');

를 추가 해줍니다.

이렇게 에어비엔비 react-dates 라이브러리에 한글화를 적용하였습니다.

이제 css 도 수정을 해보야야 음...