React 구성 요소에서 사용하기 쉬운 react-input-callendar 사용하기

React 기반의 간단한 웹 페이지를 만들 때 Datepicker를 사용하고 싶다는 요구가 있습니다.
jQuery UI의 Datepicker를 사용해도 되지만 오랜만에 오셨네요?나는 React와 마음이 맞는 좋은 물건을 찾았다.
그래서 가까스로 도착한 것은react-input-calendar였다.
겉모습은 이런 느낌.

설치하다.

% npm install react-input-calendar --save

사용법

React의 구성 요소의render 함수에 다음과 같이 정의되어 있으면 먼저 사용할 수 있습니다.
여기는 README의 거리입니다.

var Calendar = require('react-input-calendar');

（中略）

<Calendar format="DD/MM/YYYY" date="4-12-2014" />

사용자 정의

아래의 맞춤형 방법.

날짜 형식을 YYYY-MM-DD

로 설정

날짜 변경 시 되돌아오는 날짜 형식도 YYYYY-MM-DD

로 설정합니다.

초기 표시 날짜 지정

label 라벨과 연결

날짜를 선택하면 달력이 닫힙니다

.

<label labelFor="ticketDate">登録日</label>
<Calendar
    // 日付の書式をYYYY-MM-DDにする
    format="YYYY-MM-DD"
    // onChange時に返ってくる日付の書式
    computableFormat="YYYY-MM-DD"
    // 日付変更時のコールバック（ここでは、親コンポーネントの関数をセット）
    onChange={this.props.changeDate}
    // 初期表示時の日付（ここでは、propsで親コンポーネントから本日をもらう）
    date={this.props.ticketDate}
    // labelForとの紐付け
    inputFieldId="ticketDate"
    // 日付を選択したら、カレンダーが閉じるようにする
    // propTypesがBooleanなので{true}を渡す
    closeOnSelect={true}
/>

많은 설정치가 있는데 이번에는 자신이 사용하고 싶은 범위라면 문제 없이 대응할 수 있다.
외관과 이번 CSS 프레임워크에 사용된Milligram 모두 위화감 없이 녹아들어 사용이 좋다.