Въведение
Често попадаме на различни форуми и уебсайтове, където трябва да въведем датата си на раждане или да изберем дата за среща по каквато и да е кауза, и точно пред очите ни се появява икона, подобна на календар. Как и откъде изскача това? Трябва да е някакъв специфичен и динамично захранван календар, който интелигентно разпознава и ни представя да изберем дати по наше желание. Това е мястото, където React Date Picker се намесва. В този урок ще научим всички подобни методи от нулата до напреднало ниво за това как се прилагат в React и как могат да бъдат персонализирани. Да продължим с дискусията.
The Реагирайте Избор на дата е полезен и изобилен компонент, използван за показване на дати с помощта на диалоговия формат на календара. В наши дни обикновено има много опции за избор на дата. Всички те могат да имат различни технически аспекти и приложения. В този урок специално ще се занимаваме с React Date Picker. За целта трябва да имаме пакет за него, който показва час и дата. За по-добро разбиране ще направим приложение, което ще ни помогне да разберем по-добре React Date Picker. Но преди това нека го инсталираме, както е показано в стъпките по-долу.
Инсталация
За да инсталираме Date Picker за нашето приложение React, трябва да имаме предварително инсталиран Node.js в нашата система. Въпреки че не е важно винаги да имате възлови модули, силно се препоръчва да ги изтеглите, така че всички зависимости да се обслужват ефективно. Следователно командата за инсталиране на React Date Picker е дадена по-долу.
Пакетът може да се инсталира чрез npm:
низ в c++
npm install react-datepicker --save
Или чрез Прежда:
yarn add react-datepicker
Може да възникне необходимост от инсталиране на React и неговите Proptypes поотделно, тъй като без тези зависимости е невъзможно да се изгради React Date Picker. Освен това може да се наложи да използваме CSS от външните пакети, така че инструментът за избор на дата да изглежда визуално страхотно. За да започнем с нашето приложение, трябва да импортираме инструмента за избор на React Date в нашия основен файл и трябва да продължим да го проверяваме през React view.
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 engine можем да проверим нашето приложение през номер на порт 3000 на локалния хост. Освен това трябва да включим кодовия фрагмент, даден по-долу, в нашия файл app.js, така че важните компоненти за React Date Picker да бъдат импортирани в нашия файл.
// 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; Нашето приложение сега би изглеждало така.
В кодирания пример по-горе първо импортирахме пакетите на Избор на дата и Bootstrap в шаблона на React. След това го дефинирахме за обвързване на промяна на дръжката и изпратете компонента в календара на събитията. Тези събития ще се задействат автоматично, когато потребител изпрати или промени стойностите на входната стойност на Datepicker. По-късно инициализирахме състоянието на формуляра Datepicker с нов Дата() обект вътре в конструктора. И накрая, стартирахме Datepicker с директивата по-долу, за да добавим някои свойства към него.
кога е изобретено училището
Можем да визуализираме изхода под формата на ориентиран към календара формат за избор на дата. Горепосоченият Datepicker добавя персонализирани свойства към компонентите на приложението React, показани по-горе. Това ни позволява да избираме датите под формата на месеци, дни, и години .
Освен това, за да персонализираме инструмента за избор на дати, имаме различни други методи, било то оцветяване на компонентите или интелигентно прилагане на функциите за избиране на датите. Можем също да ги персонализираме лесно, ако имаме HTML и CSS компоненти, свързани с файла app.js.
Локализиране на Datepicker
Друг пример, за който ще научим, е локализирането на Datepicker. Инструментът за избор на дата, който ще направим, силно зависи от интернационализацията на date-fns. Това е така, защото се използва за локализиране на елементите, които ще бъдат показани. Ако трябва да използваме локал, с изключение на стандартния en-US, може да се наложи да го импортираме в проекта от date-fns.
Освен това английският език е локалът по подразбиране, който се състои от 3 метода за задаване на локала.
регистрирайте местно (низ, обект): зарежда импортиран локален обект от date-fns.
Задайте локал по подразбиране (низ): задава регистриран локал като стандартен за всички екземпляри на datepicker.
низ като масив
getDefaultLocale: връща низ, показващ текущо зададения локал по подразбиране.
Можем да импортираме тези услуги в локала на изгледа на календара, като използваме кодовия фрагмент по-долу.
import { registerLocale, setDefaultLocale } from 'react-datepicker'; import es from 'date-fns/locale/es'; registerLocale('es', es) При импортиране и запазване на тези локални услуги в нашия файл app.js, нашето приложение ще изглежда така.
В друг случай, за да променим локалите, трябва основно да променим кода на локала или като използваме интернационализацията на date-fns, така че прегледът на кода да може да се поддържа.
setDefaultLocale('es')
Задаване на календарен период от време в Datepicker.
Ще научим как да внедрим функционалността на обхвата, като използваме minDate и свойство maxDate в тази стъпка. За да направим това, ние импортираме addDays AP Аз от дата-fns библиотека в горната част на нашия React компонент. Той ще добави конкретния брой дни към зададената дата, за да зададе диапазона.
import addDays from 'date-fns/addDays'
The addDays() методът обикновено приема два параметъра:
Дата: Датата, която трябва да се актуализира.
Количество: Необходимо е да се включи значителният брой дни.
Можем лесно да зададем диапазона от дати от текущите до следващите седем дни в календара на React. Това може да се разбере, когато внедрим minDate и maxDate методи в примерния код, показан по-долу.
render() { return ( Show Date ); } Пълният кодов фрагмент за нашето приложение след прилагане на всички стъпки, дадени по-горе, е показан по-долу.
абстрактен клас в java
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; В горния примерен фрагмент, ние направихме minDate като компонент за регистрация и потребителят може да избере само датата преди днес. Използвахме стойността на датата за компонента за напускане, което означава, че потребителят не може да избере дата преди датата на настаняване.
В следващата стъпка ще запазим стойността на нашето състояние и ще дефинираме как работи всеки манипулатор. Основната идея е да се реализира чрез просто създаване на състояние за всеки настаняване и Разгледайте дата с дефинираните стойности и записване на данните там. Единствената разлика е в minDate метод на компонента за напускане, тъй като той зависи единствено от компонента за напускане. По този начин, гарантирайки, че всичко е зададено по отношение на стойности не преди и не след, вече можем лесно да избираме датите и да дефинираме напускането.
Заключение
В този урок успяхме да следваме просто ръководство стъпка по стъпка за изграждане на персонализиран компонент React Datepicker, който може лесно да се използва като заместител на родния Инструмент за избор на дати в HTML5 входни елементи. Научихме се как да настроим приоритетно приложението React, тъй като изобразяването на компонентите на React може да изглежда сложно за начинаещи, така че настройването на зависимости винаги ще бъде предпочитано от начинаещ. Също така се натъкнахме на различни примери, за да създадем кристално ясна концепция за използване на компонентите на Datepicker в нашето приложение. Научихме също за процеса на локализиране на инструмента за избор на дата, така че процесът на избор на дата да не създава проблем, ако те са избрани за определен период от време в календара.
Въпреки че персонализираният избор на дата, създаден в този урок, работи според очакванията, той не отговаря на всички разширени изисквания за елемент на инструмент за избор на дата. Могат да бъдат направени допълнителни подобрения, като прилагане на max и min чрез props, превключване на типа въвеждане от текст към дата и установяване на по-добро подобрение на достъпността. Можем също да разработим методи за проектиране за инструмента за избор на дата, който внедрихме в този урок, като импортираме Bootstrap пакети и добавим персонализиран стил и свойства на задържане, за да изглежда по-добре.