מבוא

לעתים קרובות אנו נתקלים בפורומים ואתרים שונים בהם עלינו להזין את תאריך הלידה שלנו או לבחור תאריך לקביעת תור מכל סיבה שהיא, ואייקון דמוי לוח שנה מופיע ממש מול עינינו. איך ומאיפה זה צץ? זה חייב להיות איזה לוח שנה ספציפי ומופעל בצורה דינמית שמזהה בצורה חכמה ומציגה לנו כדי לבחור תאריכים של רצוננו. זה המקום שבו React Date Picker נכנס פנימה. במדריך זה, נלמד את כל השיטות הללו מאפס ועד לרמה מתקדמת כיצד היא מיושמת ב-React וכיצד ניתן להתאים אותה. בואו נמשיך בדיון.

ה לְהָגִיב בוחר תאריכים הוא רכיב מועיל ושופע המשמש להצגת תאריכים באמצעות פורמט הדו-שיח של לוח השנה. בדרך כלל יש הרבה אפשרויות לבחירת תאריכים זמינות בימים אלה. לכולם יכולים להיות היבטים טכניים ויישומים שונים. במדריך זה, אנו הולכים לעסוק במיוחד ב-React Date Picker. לשם כך, אנחנו צריכים שתהיה לנו חבילה שמציגה זמן ותאריך. להבנה טובה יותר, ניצור אפליקציה שתעזור לנו להבין טוב יותר את בוחר תאריכי תגובה. אבל, לפני כן, בואו נתקין אותו כפי שמוצג בשלבים שלהלן.

הַתקָנָה

כדי להתקין את Date Picker עבור אפליקציית React שלנו, עלינו להיות מותקן מראש של Node.js במערכת שלנו. למרות שלא חשוב שיהיו תמיד מודולי צומת, מומלץ מאוד להוריד אותם כדי שכל התלות יוגשו ביעילות. לכן, הפקודה להתקנת React Date Picker ניתנת להלן.

ניתן להתקין את החבילה באמצעות npm:

מה זה 25 מתוך 100

 npm install react-datepicker --save 

או דרך חוּט:

 yarn add react-datepicker 

יתכן ויתעורר צורך להתקין את React ואת ה-Proptypes שלו בנפרד מכיוון שללא התלות הללו, אי אפשר לבנות בוחר תאריכים. כמו כן, ייתכן שנצטרך להשתמש ב-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, נוכל לבדוק את היישום שלנו דרך יציאה מספר 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; 

האפליקציה שלנו תיראה כעת בערך כך.

בדוגמה המקודדת לעיל, ייבאנו תחילה את החבילות של בוחר תאריכים ו אתחול בתבנית React. לאחר מכן, הגדרנו את זה כדי לאגד את לטפל בשינוי ולהגיש את הרכיב בלוח האירועים. אירועים אלה יופעלו אוטומטית כאשר משתמש שולח או משנה את ערכי ערך הקלט של ה-Datepicker. מאוחר יותר, אתחלנו את מצב הטופס Datepicker עם חדש תַאֲרִיך() אובייקט בתוך הקונסטרוקטור. לבסוף, יזמנו את ה-Datepicker עם ההנחיה שלהלן כדי להוסיף לו כמה מאפיינים.

אנו יכולים לדמיין את הפלט בצורה של פורמט בורר תאריכים המתמקד בלוח השנה. ה-Datepicker הנתון לעיל מוסיף מאפיינים מותאמים אישית לרכיבי יישום React המוצגים לעיל. זה מאפשר לנו לבחור את התאריכים בצורה של חודשים, ימים, ו שנים .

יתר על כן, כדי להתאים אישית את בורר התאריכים, יש לנו שיטות שונות אחרות, בין אם זה צביעת הרכיבים או יישום חכם של הפונקציות כדי לאסוף את התאריכים. אנחנו יכולים גם להתאים אותם בקלות אם יש לנו רכיבי HTML ו-CSS הקשורים לקובץ app.js.

לוקליזציה של בורר התאריכים

מקרה נוסף שאנו הולכים ללמוד עליו הוא לוקליזציה של ה-Datepicker. בוחר התאריכים שאנחנו הולכים לעשות תלוי מאוד בבינאום של תאריך-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' 

ה addDays() השיטה לוקחת בדרך כלל שני פרמטרים:

bash לשרשור מחרוזות

תַאֲרִיך: התאריך שצריך לעדכן.

כמות: צריך לכלול את כמות הימים המשמעותית.

אנו יכולים להגדיר בקלות את טווח התאריכים משבעת הימים הנוכחיים לשבעת הימים הבאים בלוח השנה של 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 שיטת רכיב הצ'ק-אאוט, שכן היא תלויה אך ורק ברכיב הצ'ק-אין. כך, כדי לוודא שהכל נקבע במונחים של ערכים לא לפני ולא אחרי, אנחנו יכולים כעת לבחור בקלות את התאריכים ולהגדיר את הצ'ק-אאוט.

סיכום

במדריך זה, הצלחנו לעקוב אחר מדריך פשוט שלב אחר שלב לבניית רכיב React Datepicker מותאם אישית שיכול לשמש בקלות כתחליף עבור הילידים בוחר תאריכים HTML5 רכיבי קלט. למדנו כיצד להגדיר את אפליקציית React בעדיפות מכיוון שעיבוד רכיבי React עשוי להיראות מורכב למתחילים, כך שהגדרת תלות תמיד תהיה מועדפת על ידי מתחיל. נתקלנו גם בדוגמאות שונות כדי לבסס תפיסה ברורה של שימוש ברכיבים של Datepicker באפליקציה שלנו. למדנו גם על תהליך לוקליזציה של בורר התאריכים כך שתהליך בחירת התאריכים לא יגרום לבעיה אם הם נבחרים למשך זמן מסוים בלוח השנה.

למרות שבורר התאריכים המותאם אישית שנוצר במדריך זה פועל כצפוי, הוא אינו תואם את כל הדרישות המתקדמות עבור רכיב בורר תאריכים. ניתן לבצע שיפורים נוספים, כגון יישום המקסימום והמינימום באמצעות אביזרים, החלפת סוג הקלט מטקסט לתאריך, והקמת שיפור נגישות טוב יותר. אנחנו יכולים גם לפתח שיטות עיצוב עבור בורר התאריכים שיישמנו במדריך זה על ידי ייבוא ​​חבילות Bootstrap והוספת סגנון מותאם אישית ומאפייני ריחוף כדי לגרום לו להיראות טוב יותר.