вступ

Ми часто зустрічаємо різні форуми та веб-сайти, де потрібно ввести дату народження або вибрати дату для зустрічі з будь-якої причини, і прямо перед очима з’являється значок, схожий на календар. Як і звідки це випливає? Це має бути якийсь спеціальний та динамічний календар, який спритно розпізнає та пропонує нам вибрати дати за нашим бажанням. Ось де React Date Picker стрибає. У цьому підручнику ми будемо вивчати всі такі методи з нуля до просунутого рівня про те, як вони реалізовані в React і як їх можна налаштувати. Давайте продовжимо обговорення.

The Реагувати Вибір дати — це корисний і багатий компонент, який використовується для відображення дат у форматі діалогового вікна календаря. Зараз зазвичай доступно багато варіантів вибору дати. Всі вони можуть мати різні технічні аспекти та застосування. У цьому підручнику ми будемо мати справу з React Date Picker. Для цього нам потрібен пакет для нього, який відображає час і дату. Для кращого розуміння ми створимо додаток, який допоможе нам краще зрозуміти React Date Picker. Але перед цим давайте встановимо його, як показано в наведених нижче кроках.

монтаж

Щоб установити Date Picker для нашої програми React, у нашій системі потрібно попередньо встановити Node.js. Хоча не важливо завжди мати вузлові модулі, настійно рекомендується їх завантажувати, щоб усі залежності обслуговувалися ефективно. Таким чином, команда для встановлення React Date Picker наведена нижче.

Пакет можна встановити через npm:

java коментарі

 npm install react-datepicker --save 

Або через Пряжа:

 yarn add react-datepicker 

Може виникнути потреба встановити React і його Proptypes окремо, тому що без цих залежностей неможливо створити React Date Picker. Крім того, нам може знадобитися використовувати CSS із зовнішніх пакетів, щоб інструмент вибору дати виглядав візуально чудово. Щоб розпочати роботу з нашою програмою, нам потрібно імпортувати засіб вибору дати React у наш головний файл, і нам потрібно продовжувати перевіряти його через перегляд 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 

Перейдіть до папки проекту за допомогою команди.

substring_index в sql

 cd react-datepicker-app 

Запустіть програму React.

 npm start 

Після запуску механізму Node ми можемо перевірити нашу програму через номер порту 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 за допомогою наведеної нижче директиви, щоб додати до нього деякі властивості.

Ми можемо візуалізувати результат у формі орієнтованого на календар формату вибору дати. Наведений вище інструмент вибору дати додає налаштовані властивості до компонентів програми 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 ); } 

Нижче наведено повний фрагмент коду для нашої програми після виконання всіх наведених вище кроків.

 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 метод компонента виїзду, оскільки він залежить виключно від компонента реєстрації. Таким чином, переконавшись, що все встановлено з точки зору значень не до і не після, тепер ми можемо легко вибрати дати та визначити виїзд.

jlist

Висновок

У цьому підручнику ми змогли виконати простий крок за кроком інструкцію зі створення спеціального компонента React Datepicker, який можна легко використовувати як заміну нативного Вибір дати HTML5 елементи введення. Ми навчилися налаштовувати програму React на пріоритет, тому що рендеринг компонентів React може здатися складним для початківців, тому новачок завжди віддає перевагу налаштуванню залежностей. Ми також натрапили на різні приклади, щоб створити кристально чітку концепцію використання компонентів Datepicker у нашій програмі. Ми також дізналися про процес локалізації засобу вибору дати, щоб процес вибору дати не викликав проблем, якщо вони вибрані в календарі на певний період часу.

Хоча настроюваний засіб вибору дати, створений у цьому посібнику, працює належним чином, він не відповідає всім розширеним вимогам до елемента вибору дати. Подальші вдосконалення можна зробити, наприклад реалізувати max і min через props, переключити тип введення з тексту на дату та покращити покращення доступності. Ми також можемо розробити методи дизайну для засобу вибору дати, який ми реалізували в цьому підручнику, імпортувавши пакети Bootstrap і додавши власний стиль і властивості наведення, щоб він виглядав краще.