소개
우리는 종종 생년월일을 입력하거나 어떤 이유로든 약속 날짜를 선택해야 하는 다양한 포럼과 웹사이트를 접하게 되며 달력과 같은 아이콘이 바로 눈앞에 나타납니다. 어떻게 그리고 어디서 나타나는 건가요? 우리가 원하는 날짜를 선택하도록 스마트하게 인식하고 제시하는 구체적이고 동적으로 구동되는 달력이어야 합니다. 여기가 React Date Picker가 시작되는 곳입니다. 이 튜토리얼에서 우리는 React에서 구현되는 방법과 사용자 정의할 수 있는 방법에 대해 처음부터 고급 수준까지 이러한 모든 방법을 배울 것입니다. 토론을 진행해 보겠습니다.
그만큼 반응하다 날짜 선택기는 달력 대화 상자 형식을 사용하여 날짜를 표시하는 데 사용되는 유용하고 풍부한 구성 요소입니다. 요즘에는 일반적으로 날짜 선택기 옵션이 많이 있습니다. 이들 모두는 서로 다른 기술적 측면과 적용을 가질 수 있습니다. 이 튜토리얼에서는 특히 React Date Picker를 다룰 것입니다. 이를 위해서는 시간과 날짜를 표시하는 패키지가 필요합니다. 더 나은 이해를 위해 React Date Picker를 더 잘 이해하는 데 도움이 되는 애플리케이션을 만들겠습니다. 하지만 그 전에 아래 단계에 따라 설치해 보도록 하겠습니다.
설치
React 애플리케이션용 날짜 선택기를 설치하려면 시스템에 Node.js가 사전 설치되어 있어야 합니다. 항상 노드 모듈을 보유하는 것이 중요하지는 않지만 모든 종속성이 효율적으로 제공되도록 노드 모듈을 다운로드하는 것이 좋습니다. 따라서 React Date Picker를 설치하는 명령은 아래와 같습니다.
패키지는 다음을 통해 설치할 수 있습니다. npm:
Java 객체를 json으로 변환
npm install react-datepicker --save
아니면 실:
yarn add react-datepicker
이러한 종속성 없이는 React Date Picker를 구축하는 것이 불가능하기 때문에 React와 해당 Proptype을 개별적으로 설치해야 할 필요성이 발생할 수 있습니다. 또한 날짜 선택기가 시각적으로 멋지게 보이도록 외부 패키지의 CSS를 사용해야 할 수도 있습니다. 애플리케이션을 시작하려면 기본 파일에서 React Date 선택기를 가져와야 하며 React 보기를 통해 계속 확인해야 합니다.
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 ( setStartDate(date)} /> ); }; React Datepicker 예제
우리 시스템이 모든 설치 요구 사항과 종속성으로 구성되어 있다고 가정하고 처음부터 React 애플리케이션을 만드는 방법을 배우게 됩니다. 이 구현은 전적으로 React datepicker 적용을 기반으로 합니다.
위의 논의에서는 이러한 종속성이 패키지 자체에 통합되지 않았기 때문에 React 및 PropTypes를 독립적으로 설치했다고 가정합니다. 애플리케이션 구축 방법을 진행하려면 아래 단계를 따라야 합니다.
npx create-react-app react-datepicker-app
명령을 사용하여 프로젝트 폴더 내부로 이동합니다.
cd react-datepicker-app
React 앱을 시작합니다.
npm start
Node 엔진이 시작된 후 localhost의 포트 번호 3000을 통해 애플리케이션을 확인할 수 있습니다. 또한 React Date Picker의 중요한 구성 요소를 파일로 가져올 수 있도록 app.js 파일에 아래 제공된 코드 조각을 포함해야 합니다.
긴 문자열 자바
// app.js import React, { Component } from 'react'; import DatePicker from 'react-datepicker'; import 'react-datepicker/dist/react-datepicker.css'; import 'bootstrap/dist/css/bootstrap.min.css'; class App extends Component { constructor (props) { super(props) this.state = { startDate: new Date() }; this.handleChange = this.handleChange.bind(this); this.onFormSubmit = this.onFormSubmit.bind(this); } handleChange(date) { this.setState({ startDate: date }) } onFormSubmit(e) { e.preventDefault(); console.log(this.state.startDate) } render() { return ( Show Date ); } } export default App; 이제 우리의 애플리케이션은 다음과 같이 보일 것입니다.
위의 샘플 코딩에서는 먼저 다음 패키지를 가져왔습니다. 날짜 선택기 그리고 부트스트랩 React 템플릿에서. 그런 다음 이를 바인딩하도록 정의했습니다. 변경 처리 이벤트 달력에 구성요소를 제출합니다. 이러한 이벤트는 사용자가 Datepicker의 입력 값 값을 제출하거나 변경할 때 자동으로 트리거됩니다. 나중에 우리는 새로운 Datepicker 양식 상태를 초기화했습니다. 날짜() 생성자 내부의 객체입니다. 마지막으로 아래 지시어로 Datepicker를 시작하여 몇 가지 속성을 추가했습니다.
달력 중심의 날짜 선택기 형식으로 출력을 시각화할 수 있습니다. 위에 제공된 Datepicker는 위에 표시된 React 애플리케이션 구성 요소에 사용자 정의 속성을 추가합니다. 이를 통해 날짜를 다음 형식으로 선택할 수 있습니다. 몇 달, 며칠, 그리고 연령 .
또한 날짜 선택기를 사용자 정의하기 위해 구성 요소에 색상을 지정하거나 날짜를 선택하는 기능을 스마트하게 적용하는 등 다양한 방법이 있습니다. app.js 파일과 관련된 HTML 및 CSS 구성 요소가 있으면 쉽게 사용자 정의할 수도 있습니다.
Datepicker 현지화
우리가 배우게 될 또 다른 사례는 Datepicker를 현지화하는 것입니다. 우리가 만들 날짜 선택기는 date-fns 국제화에 크게 의존합니다. 이는 표시될 요소를 현지화하는 데 사용되기 때문입니다. 기본 en-US를 제외한 로캘을 사용해야 하는 경우 date-fns에서 프로젝트로 가져와야 할 수도 있습니다.
또한, 영어는 기본 로캘로 로캘을 설정하는 3가지 방법으로 구성되어 있습니다.
지역 등록 (문자열, 객체): date-fns에서 가져온 로케일 객체를 로드합니다.
기본 로케일 설정 (문자열): 등록된 로케일을 모든 datepicker 인스턴스의 기본값으로 설정합니다.
자바의 tostring 메소드
getDefaultLocale: 현재 설정된 기본 로케일을 표시하는 문자열을 반환합니다.
아래 코드 조각을 사용하여 이러한 서비스를 달력 보기의 로케일로 가져올 수 있습니다.
import { registerLocale, setDefaultLocale } from 'react-datepicker'; import es from 'date-fns/locale/es'; registerLocale('es', es) 이러한 로케일 서비스를 app.js 파일로 가져와 저장할 때 애플리케이션은 다음과 같습니다.
또 다른 예로, 로케일을 변경하려면 주로 로케일 코드를 변경하거나 date-fns의 국제화를 사용하여 코드 검토를 지원해야 합니다.
setDefaultLocale('es')
Datepicker에서 달력 날짜 범위를 설정합니다.
다음을 사용하여 범위 기능을 구현하는 방법을 알아봅니다. 최소 날짜 그리고 maxDate 속성 이 단계에서. 그러기 위해 우리는 addDays AP 나는에서 날짜-fns 라이브러리를 React 컴포넌트 상단에 추가하세요. 범위를 설정하기 위해 지정된 날짜에 특정 일수를 추가합니다.
import addDays from 'date-fns/addDays'
그만큼 추가일() 메소드는 일반적으로 두 개의 매개변수를 사용합니다.
날짜: 업데이트해야 하는 날짜입니다.
양: 포함되어야 하는 상당한 양의 일수가 포함됩니다.
React 달력에서 날짜 범위를 현재부터 다음 7일까지 쉽게 설정할 수 있습니다. 이는 우리가 구현하면 이해할 수 있습니다. 최소 날짜 그리고 최대 날짜 아래 표시된 예제 코드의 메소드.
render() { return ( Show Date ); } 위에 제공된 모든 단계를 구현한 후 애플리케이션의 전체 코드 조각은 다음과 같습니다.
작업 관리자 리눅스
import React, { Component } from 'react'; import DatePicker from 'react-datepicker'; import addDays from 'date-fns/addDays' import 'react-datepicker/dist/react-datepicker.css'; import 'bootstrap/dist/css/bootstrap.min.css'; class App extends Component { constructor (props) { super(props) this.state = { startDate: new Date() }; this.handleChange = this.handleChange.bind(this); this.onFormSubmit = this.onFormSubmit.bind(this); } handleChange(date) { this.setState({ startDate: date }) } onFormSubmit(e) { e.preventDefault(); console.log(this.state.startDate) } render() { return ( Show Date ); } } export default App; 위의 예제 스니펫에서 우리는 최소 날짜 체크인 구성 요소로, 사용자는 오늘 이전 날짜만 선택할 수 있습니다. 체크아웃 구성 요소에 날짜 값을 사용했는데, 이는 사용자가 체크인 날짜 이전의 날짜를 선택할 수 없음을 의미합니다.
다음 단계에서는 상태 값을 저장하고 각 핸들이 작동하는 방식을 정의합니다. 주요 아이디어는 단순히 각각에 대한 상태를 생성하여 구현하는 것입니다. 체크인 그리고 점검 날짜를 정의된 값으로 저장하고 거기에 데이터를 저장합니다. 유일한 차이점은 최소 날짜 체크아웃 구성요소의 방법은 체크인 구성요소에만 의존하기 때문입니다. 따라서 모든 것이 이전과 이후가 아닌 값으로 설정되었는지 확인하여 이제 날짜를 쉽게 선택하고 체크아웃을 정의할 수 있습니다.
결론
이 튜토리얼에서 우리는 네이티브를 대체하기 위해 쉽게 사용할 수 있는 사용자 정의 React Datepicker 구성 요소를 구축하는 방법에 대한 간단한 단계별 가이드를 따라갈 수 있었습니다. HTML5 날짜 선택기 입력 요소. 초보자에게는 React 구성 요소를 렌더링하는 것이 복잡해 보일 수 있으므로 React 애플리케이션을 우선적으로 설정하는 방법을 배웠습니다. 따라서 초보자는 항상 종속성 설정을 선호합니다. 우리는 또한 애플리케이션에서 Datepicker의 구성 요소를 사용하는 명확한 개념을 확립하기 위해 다양한 예를 접했습니다. 또한 날짜 선택 프로세스가 달력에서 특정 기간 동안 선택된 경우 문제를 일으키지 않도록 날짜 선택기를 현지화하는 프로세스에 대해서도 배웠습니다.
이 튜토리얼에서 생성된 사용자 정의 날짜 선택기는 예상대로 작동하지만 날짜 선택기 요소에 대한 모든 고급 요구 사항을 준수하지는 않습니다. 소품을 통해 최대 및 최소 구현, 입력 유형을 텍스트에서 날짜로 전환, 더 나은 접근성 개선 구축 등 추가 개선이 이루어질 수 있습니다. 또한 Bootstrap 패키지를 가져오고 사용자 정의 스타일과 호버링 속성을 추가하여 이 튜토리얼에서 구현한 날짜 선택기에 대한 디자인 방법을 개발하여 더 보기 좋게 만들 수 있습니다.