react datepicker
7.5.0
React를위한 간단하고 재사용 가능한 DatePicker 구성 요소 (데모)
패키지는 NPM을 통해 설치할 수 있습니다.
npm install react-datepicker --save
또는 원사를 통해 :
yarn add react-datepicker
해당 종속성이 패키지에 포함되지 않으므로 React 및 Proptypes를 별도로 설치해야합니다. 기본 en 아래는 React보기에서 DatePicker를 사용하는 방법에 대한 간단한 예입니다. 또한이 패키지에서 CSS 파일을 요구하거나 직접 제공해야합니다. 아래의 예는 빌드 시스템이 CSS 파일을 요구하는 경우이 패키지에서 CSS를 포함시키는 방법을 보여줍니다 (WebPack은 그렇습니다).
import React , { useState } from "react" ;
import DatePicker from "react-datepicker" ;
import "react-datepicker/dist/react-datepicker.css" ;
// CSS Modules, react-datepicker-cssmodules.css
// import 'react-datepicker/dist/react-datepicker-cssmodules.css';
const Example = ( ) => {
const [ startDate , setStartDate ] = useState ( new Date ( ) ) ;
return (
< DatePicker selected = { startDate } onChange = { ( date ) => setStartDate ( date ) } />
) ;
} ; DatePicker의 가장 기본적인 사용은 다음과 같이 설명 할 수 있습니다.
< DatePicker selected = { startdate } onChange = { ( date ) => setStartDate ( date ) } /> 일부 달력 날짜가 선택 될 때마다 발생하는 onSelect 이벤트 핸들러를 사용할 수 있습니다.
< DatePicker
selected = { date }
onSelect = { handleDateSelect } //when day is clicked
onChange = { handleDateChange } //only when value has changed
/> onClickOutside handler는 inline 모드에서 DatePicker를 닫는 데 유용 할 수 있습니다.
구성 요소로 전달 될 수있는 전체 소품 목록은 여기를 참조하십시오. 예는 기본 웹 사이트에 제공됩니다.
ShowtimesSelect Prop을 추가하여 Time Picker를 포함시킬 수도 있습니다.
< DatePicker
selected = { date }
onChange = { handleDateChange }
showTimeSelect
dateFormat = "Pp"
/>시간은 기본적으로 30 분 간격으로 표시됩니다 (기본 정보는 Timeintervals Prop를 통해 구성 가능)
시간 선택기 사용 방법에 대한 더 많은 예는 기본 웹 사이트에 나와 있습니다.
날짜 선택기는 Date-FNS 국제화에 의존하여 디스플레이 구성 요소를 현지화합니다. 기본적으로 날짜 선택기는 영어 인 전 세계적으로 로케일을 사용합니다. 로케일을 설정하는 3 가지 도우미 방법이 제공됩니다.
import { registerLocale , setDefaultLocale } from "react-datepicker" ;
import { es } from 'date-fns/locale/es' ;
registerLocale ( 'es' , es )
< DatePicker
locale = "es"
/ >로케일은 다음과 같은 방식으로 변경할 수 있습니다.
setDefaultLocale('es'); 우리는 항상 최신 버전의 React와 호환하려고 노력하고 있습니다. 우리는 모든 이전 버전의 React를 지원할 수 없습니다.
최신 호환 버전 :
버전 1.8.0 까지이 패키지는 Moment.js를 사용했습니다. v2.0.0을 시작하여 기본 날짜 개체를 사용하는 date-fns 사용하여 패키지의 크기를 줄였습니다. 1.8.0에서 2.0.0 이상으로 전환하는 경우, 최신 예제를 확인한 예제 사이트의 업데이트 된 예제를 참조하십시오.
날짜 선택기는 최신 버전의 Chrome, Firefox 및 IE10+와 호환됩니다.
불행히도, 미래에 새로운 기능을 개발할 수있는 능력을 유지하면서 레거시 브라우저를 지원하는 것은 어렵습니다. IE9 지원의 경우 클래스리스트 폴리 필이 필요하다는 것이 알려져 있지만 향후 어느 시점에서나 변경되거나 파손될 수 있습니다.
main 브랜치에는 DatePicker 구성 요소의 최신 버전이 포함되어 있습니다.
지역 개발을 시작하려면 :
yarn link 실행하십시오cd docs-site && yarn link react-datepicker 실행하십시오yarn install 실행하십시오yarn build 실행하십시오yarn start 실행하십시오마지막 단계는 http : // localhost : 3000에서 간단한 웹 서버로 문서화 앱을 시작합니다.
yarn test 실행하여 테스트 스위트 및 라이터를 실행할 수 있습니다. 구성 요소를 개발할 수 있도록 기본 기능을 다루는 일부 테스트를 설정했습니다 ( /tests 에서 찾을 수 있음). 우리는 테스트의 열렬한 팬이지만 작은 구성 요소 만 포함합니다. 새로운 기능을 추가 할 때 테스트를 추가하는 것이 좋습니다.
설정에 대한 자세한 내용은 CONTRIBUTING.md 파일을 참조하십시오.
예제는 Docs 폴더 내에서 호스팅되며 DatePicker를로드하는 간단한 앱에서 실행됩니다. 새 예제로 예제를 확장하려면 기존 예 중 하나를 복제하고 예제의 고유 한 속성을 변경할 수 있습니다.
저작권 (C) 2014-2024 Hackerone Inc. 및 개인 기고자. MIT 라이센스에 따라 라이센스가 부여 된 라이센스를 참조하십시오.
