Увод
Често наилазимо на разне форуме и веб-сајтове на којима треба да унесемо датум рођења или да изаберемо датум за састанак из било ког разлога, а икона налик календару се појављује пред нашим очима. Како и одакле то искаче? То мора бити неки специфичан и динамички покретан календар који паметно препознаје и представља нам да бирамо датуме по нашој жељи. Овде ускаче Реацт Дате Пицкер. У овом водичу учићемо све такве методе од нуле до напредног нивоа о томе како се имплементира у Реацт-у и како се може прилагодити. Наставимо са дискусијом.
Тхе Реаговати Бирач датума је корисна и обилна компонента која се користи за приказ датума помоћу формата дијалога календара. Обично је ових дана доступно много опција за бирање датума. Сви они могу имати различите техничке аспекте и примене. У овом водичу ћемо се посебно позабавити Реацт Дате Пицкер-ом. За то треба да имамо пакет за то који приказује време и датум. Ради бољег разумевања, направићемо апликацију која ће нам помоћи да боље разумемо Реацт Дате Пицкер. Али, пре тога, хајде да га инсталирамо као што је приказано у корацима испод.
Инсталација
Да бисмо инсталирали Дате Пицкер за нашу Реацт апликацију, морамо да имамо Ноде.јс унапред инсталиран на нашем систему. Иако није важно да увек имате модуле чворова, препоручљиво је да их преузмете како би све зависности биле ефикасно сервиране. Стога је наредба за инсталирање Реацт Дате Пицкер-а дата у наставку.
Пакет се може инсталирати преко нпм:
низ у в
npm install react-datepicker --save
Или преко предиво:
yarn add react-datepicker
Можда ће се појавити потреба да се Реацт и његови Проптипови инсталирају појединачно јер је, без ових зависности, немогуће направити Реацт бирач датума. Такође, можда ћемо морати да користимо ЦСС из спољних пакета како би бирач датума изгледао визуелно сјајно. Да бисмо започели са нашом апликацијом, морамо да увеземо бирач датума Реацт у нашу главну датотеку и морамо да га проверавамо кроз Реацт приказ.
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)} /> ); }; Реацт Датепицкер пример
Под претпоставком да је наш систем конфигурисан са свим инсталационим захтевима и зависностима, научићемо како да креирамо Реацт апликацију од нуле. Ова имплементација је у потпуности заснована на примени Реацт датепицкер-а.
У горњој дискусији, претпостављамо да смо инсталирали Реацт и ПропТипес независно пошто ове зависности нису уграђене у сам пакет. Да бисмо наставили са методама израде наше апликације, потребно је да следимо доле наведене кораке.
npx create-react-app react-datepicker-app
Померите се унутар фасцикле пројекта помоћу команде.
cd react-datepicker-app
Покрените апликацију Реацт.
npm start
Након покретања Ноде мотора, можемо да проверимо нашу апликацију преко порта број 3000 локалног хоста. Такође, морамо да укључимо исечак кода који је дат у наставку у нашу апп.јс датотеку како би важне компоненте за Реацт Дате Пицкер биле увезене у нашу датотеку.
// 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; Наша апликација би сада изгледала отприлике овако.
У претходном кодираном узорку, прво смо увезли пакете од Бирач датума и Боотстрап у шаблону Реацт. Затим смо га дефинисали да везује руковати променама и поднесите компоненту у календар догађаја. Ови догађаји ће се аутоматски покренути када корисник поднесе или промени улазне вредности Датепицкер-а. Касније смо иницијализовали стање обрасца Датепицкер са новим Датум() објекат унутар конструктора. На крају, покренули смо Датепицкер са доле наведеном директивом да бисмо му додали нека својства.
Можемо да визуелизујемо излаз у облику календарског формата датепицкер-а. Горе наведени Датепицкер додаје прилагођена својства компонентама Реацт апликације приказаним изнад. Омогућава нам да бирамо датуме у облику месеци, дани, и године .
Штавише, да бисмо прилагодили бирач датума, имамо разне друге методе, било да се ради о бојању компоненти или паметној примени функција за преузимање датума. Такође их можемо лако прилагодити ако имамо ХТМЛ и ЦСС компоненте повезане са апп.јс датотеком.
напомене о пролећним чизмама
Локализација Датепицкер-а
Још једна инстанца о којој ћемо научити је да локализујемо Датепицкер. Бирач датума који ћемо направити у великој мери зависи од интернационализације дате-фнс. То је зато што се користи за локализацију елемената који ће бити приказани. Ако треба да користимо локални стандард осим подразумеваног ен-УС, можда ћемо морати да га увеземо у пројекат из дате-фнс.
Штавише, енглески је подразумевана локација која се састоји од 3 метода за постављање локала.
регистровати локално (стринг, објекат): учитава увезени објекат локализације из дате-фнс.
Подесите подразумевани локал (стринг): поставља регистровани локал као подразумевани за све инстанце бирача датума.
јава сортирање низова
гетДефаултЛоцале: враћа стринг који приказује тренутно постављени подразумевани локал.
Ове услуге можемо да увеземо у локализацију приказа календара користећи доњи исечак кода.
import { registerLocale, setDefaultLocale } from 'react-datepicker'; import es from 'date-fns/locale/es'; registerLocale('es', es) Након увоза и чувања ових локалних услуга у нашу апп.јс датотеку, наша апликација ће изгледати овако.
У другом случају, да бисмо променили локације, морамо првенствено да променимо локални код или да користимо интернационализацију дате-фнс како би преглед кода могао бити подржан.
setDefaultLocale('es')
Подешавање периода календара у Датепицкер-у.
Научићемо како да имплементирамо функционалност опсега користећи тхе минДате и макДате својство у овом кораку. Да бисмо то урадили, увозимо аддДаис АП Ја из датум-фнс библиотека на врх наше Реацт компоненте. Додаће одређени број дана додељеном датуму да би се подесио опсег.
import addDays from 'date-fns/addDays'
Тхе аддДаис() метода обично узима два параметра:
филтеринг питхон
Датум: Датум који треба ажурирати.
Износ: Требало је укључити значајан број дана.
У Реацт календару лако можемо подесити распон датума од тренутног до наредних седам дана. Ово се може разумети када применимо минДате и макДате методе у примеру кода приказаног испод.
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; У горњем одломку примера, направили смо минДате као компонента за пријаву, а корисник може изабрати само датум пре данашњег дана. Користили смо вредност датума за компоненту одјаве, што значи да корисник не може да изабере датум пре датума пријаве.
У следећем кораку, сачуваћемо вредност нашег стања и дефинисати како свака ручка функционише. Главна идеја је да се то спроведе једноставним стварањем државе за сваког пријавити и провери датум са дефинисаним вредностима и чување података тамо. Једина разлика лежи у минДате метод компоненте одјаве, јер искључиво зависи од компоненте за пријаву. Тако, осигуравајући да је све постављено у смислу вредности не пре и не после, сада можемо лако да изаберемо датуме и дефинишемо одјаву.
Закључак
У овом водичу, успели смо да пратимо једноставан водич корак по корак о изградњи прилагођене компоненте Реацт Датепицкер која се лако може користити као замена за изворну ХТМЛ5 бирач датума улазни елементи. Научили смо како да приоритетно подесимо Реацт апликацију јер приказивање Реацт компоненти може изгледати сложено за почетнике, тако да би постављање зависности увек преферирало почетнике. Такође смо наишли на различите примере да бисмо успоставили кристално јасан концепт коришћења компоненти Датепицкер-а у нашој апликацији. Такође смо научили о процесу локализације бирача датума тако да процес одабира датума не изазива проблеме ако су изабрани на одређено време у календару.
Иако прилагођени бирач датума креиран у овом водичу ради како се очекује, није у складу са свим напредним захтевима за елемент бирача датума. Могу се направити даља побољшања, као што је имплементација мак и мин преко пропс-а, пребацивање типа уноса са текста на датум и успостављање бољег побољшања приступачности. Такође можемо развити методе дизајна за датепицкер који смо имплементирали у овом водичу тако што ћемо увести Боотстрап пакете и додати прилагођени стил и својства лебдења како би изгледао боље.