Wstęp

Często natrafiamy na różne fora i strony internetowe, gdzie musimy wpisać swoją datę urodzenia lub wybrać termin spotkania z dowolnej przyczyny, a tuż przed naszymi oczami pojawia się ikonka przypominająca kalendarz. Jak i skąd to się pojawia? Musi to być jakiś konkretny i dynamicznie zasilany kalendarz, który inteligentnie rozpoznaje i przedstawia nam do wyboru daty naszego pragnienia. W tym miejscu wkracza React Date Picker. W tym samouczku nauczymy się wszystkich takich metod od podstaw do poziomu zaawansowanego, o tym, jak są one implementowane w React i jak można je dostosować. Kontynuujmy dyskusję.

The Reagować Date Picker to pomocny i bogaty komponent używany do wyświetlania dat w formacie okna kalendarza. Obecnie dostępnych jest zwykle wiele opcji wyboru daty. Wszystkie mogą mieć różne aspekty techniczne i zastosowania. W tym samouczku zajmiemy się w szczególności narzędziem React Date Picker. W tym celu musimy mieć pakiet wyświetlający godzinę i datę. Dla lepszego zrozumienia stworzymy aplikację, która pomoże nam lepiej zrozumieć React Date Picker. Ale wcześniej zainstalujmy go, jak pokazano w poniższych krokach.

Instalacja

Aby zainstalować Date Picker dla naszej aplikacji React, musimy mieć preinstalowany Node.js w naszym systemie. Chociaż nie jest ważne, aby zawsze mieć moduły węzłów, zdecydowanie zaleca się ich pobranie, aby wszystkie zależności były sprawnie obsługiwane. Dlatego poniżej podano polecenie instalacji React Date Picker.

Pakiet można zainstalować poprzez npm:

reżyser Karan Johar

 npm install react-datepicker --save 

Lub przez Przędza:

 yarn add react-datepicker 

Może zaistnieć potrzeba indywidualnej instalacji Reacta i jego typów Prop, ponieważ bez tych zależności nie da się zbudować selektora dat Reacta. Być może będziemy musieli użyć CSS z zewnętrznych pakietów, aby Selektor dat wyglądał świetnie wizualnie. Aby rozpocząć korzystanie z naszej aplikacji, musimy zaimportować selektor daty React do naszego głównego pliku i musimy go na bieżąco sprawdzać w widoku 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)} /> ); }; 

Zareaguj na przykład Datepicker

Zakładając, że nasz system jest skonfigurowany ze wszystkimi wymaganiami instalacyjnymi i zależnościami, nauczymy się od podstaw tworzyć aplikację React. Implementacja ta w całości opiera się na zastosowaniu datepickera React.

W powyższej dyskusji zakładamy, że zainstalowaliśmy React i PropTypes niezależnie, ponieważ te zależności nie są uwzględnione w samym pakiecie. Aby kontynuować metody budowania naszej aplikacji, musimy wykonać poniższe kroki.

 npx create-react-app react-datepicker-app 

Przejdź do folderu projektu za pomocą polecenia.

 cd react-datepicker-app 

Uruchom aplikację Reaguj.

 npm start 

Po uruchomieniu silnika Node możemy sprawdzić naszą aplikację poprzez port numer 3000 hosta lokalnego. Musimy także dołączyć fragment kodu podany poniżej do naszego pliku app.js, aby zaimportować do naszego pliku ważne komponenty narzędzia React Date Picker.

indeks_podciągu w sql

 // 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; 

Nasza aplikacja wyglądałaby teraz mniej więcej tak.

W powyższym zakodowanym przykładzie najpierw zaimportowaliśmy pakiety Selektor dat I Bootstrap w szablonie React. Następnie zdefiniowaliśmy to, aby powiązać uchwyt zmiany i zgłoś Komponent w kalendarzu wydarzeń. Te zdarzenia zostaną automatycznie wywołane, gdy użytkownik prześle lub zmieni wartości wejściowe narzędzia Datepicker. Później zainicjowaliśmy nowy stan formularza Datepicker Data() obiekt wewnątrz konstruktora. Na koniec zainicjowaliśmy Datepicker za pomocą poniższej dyrektywy, aby dodać do niego pewne właściwości.

Możemy wizualizować dane wyjściowe w formie datepikera w formacie zorientowanym na kalendarz. Podany powyżej Datepicker dodaje dostosowane właściwości do pokazanych powyżej komponentów aplikacji React. Pozwala nam wybrać daty w formie miesiące, dni, I lata .

Co więcej, aby dostosować narzędzie datepicker, mamy różne inne metody, takie jak kolorowanie komponentów lub inteligentne stosowanie funkcji wybierania dat. Możemy je również łatwo dostosować, jeśli mamy komponenty HTML i CSS powiązane z plikiem app.js.

Lokalizowanie narzędzia Datepicker

Innym przykładem, o którym się dowiemy, jest lokalizacja Datepickera. Selektor dat, który zamierzamy utworzyć, w dużym stopniu zależy od internacjonalizacji daty i fns. Dzieje się tak, ponieważ służy do lokalizacji elementów, które będą wyświetlane. Jeśli będziemy musieli użyć ustawień regionalnych innych niż domyślne en-US, być może będziemy musieli zaimportować je do projektu z pliku date-fns.

Co więcej, domyślnym ustawieniem regionalnym jest język angielski, który składa się z 3 metod ustawiania ustawień regionalnych.

zarejestruj się lokalnie (string, obiekt): ładuje zaimportowany obiekt ustawień regionalnych z date-fns.

Ustaw domyślne ustawienia regionalne (string): ustawia zarejestrowane ustawienia regionalne jako domyślne dla wszystkich instancji datepicker.

jeśli przez podsumowanie Ruyarda Kiplinga

pobierz domyślne ustawienia regionalne: zwraca ciąg znaków pokazujący aktualnie ustawione domyślne ustawienia regionalne.

Możemy zaimportować te usługi do lokalizacji widoku kalendarza, korzystając z poniższego fragmentu kodu.

 import { registerLocale, setDefaultLocale } from 'react-datepicker'; import es from 'date-fns/locale/es'; registerLocale('es', es) 

Po zaimportowaniu i zapisaniu tych usług regionalnych w naszym pliku app.js nasza aplikacja będzie wyglądać następująco.

W innym przypadku, aby zmienić ustawienia regionalne, musimy przede wszystkim zmienić kod ustawień regionalnych lub użyć internacjonalizacji date-fns, aby umożliwić przeglądanie kodu.

 setDefaultLocale('es') 

Ustawianie zakresu dat kalendarza w Datepicker.

Dowiemy się jak zaimplementować funkcjonalność zakresu za pomocą minData I właściwość maxDate w tym kroku. W tym celu importujemy plik addDays AP ja z data-fns bibliotekę na górę naszego komponentu React. Dodaje określoną liczbę dni do przypisanej daty, aby ustawić zakres.

 import addDays from 'date-fns/addDays' 

The dodaj dni() metoda zwykle przyjmuje dwa parametry:

Data: Data, którą należy zaktualizować.

Kwota: Należy uwzględnić znaczną liczbę dni.

W kalendarzu React z łatwością możemy ustawić zakres dat od bieżącego do siedmiu kolejnych dni. Można to zrozumieć, gdy zaimplementujemy minData I maxData metody w przykładowym kodzie pokazanym poniżej.

 render() { return ( Show Date ); } 

Poniżej prezentujemy pełny fragment kodu naszej aplikacji po wykonaniu wszystkich powyższych kroków.

xd xd znaczenie

 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; 

W powyższym przykładowym fragmencie zrobiliśmy minData jako element odprawy, a użytkownik może wybrać tylko datę wcześniejszą niż dzisiaj. W komponencie wymeldowania użyliśmy wartości daty, co oznacza, że ​​użytkownik nie może wybrać daty poprzedzającej datę zameldowania.

W kolejnym kroku zapiszemy wartość naszego stanu i zdefiniujemy sposób działania poszczególnych uchwytów. Główną ideą jest wdrożenie go poprzez proste utworzenie stanu dla każdego zameldować się I wymeldować się date ze zdefiniowanymi wartościami i zapisanie tam danych. Jedyna różnica polega na minData sposób składnika wymeldowania, ponieważ jest on zależny wyłącznie od składnika wymeldowania. Tym samym upewniając się, że wszystko jest ustawione pod względem wartości nie wcześniej i nie później, możemy teraz łatwo wybrać daty i zdefiniować wymeldowanie.

Wniosek

W tym samouczku mogliśmy wykonać prosty przewodnik krok po kroku dotyczący tworzenia niestandardowego komponentu React Datepicker, którego można z łatwością użyć jako zamiennika natywnego komponentu Wybór daty HTML5 elementy wejściowe. Nauczyliśmy się, jak ustawić priorytet aplikacji React, ponieważ renderowanie komponentów React może wydawać się skomplikowane dla początkujących, dlatego początkujący zawsze wolą konfigurować zależności. Natrafiliśmy także na różne przykłady, które pozwoliły nam ustalić krystalicznie jasną koncepcję wykorzystania komponentów Datepicker w naszej aplikacji. Dowiedzieliśmy się także o procesie lokalizacji datepickera, aby proces wyboru daty nie sprawiał problemu, jeśli zostaną one wybrane na określony czas w kalendarzu.

Chociaż niestandardowy datepicker utworzony w tym samouczku działa zgodnie z oczekiwaniami, nie spełnia wszystkich zaawansowanych wymagań dotyczących elementu datepicker. Można wprowadzić dalsze ulepszenia, takie jak wdrożenie wartości max i min za pomocą właściwości, zmiana typu wprowadzania danych z tekstu na bieżący i wprowadzenie lepszej poprawy dostępności. Możemy również opracować metody projektowania narzędzia datepicker, które zaimplementowaliśmy w tym samouczku, importując pakiety Bootstrap i dodając niestandardowe style i właściwości przesuwania kursora, aby wyglądał lepiej.