هنگام توسعه یک برنامه React، ممکن است به راهی برای کاربران برای انتخاب تاریخ نیاز داشته باشید - چه برای سیستم رزرو، یک فرم یا یک تقویم. یکی از کاربرپسندترین راه‌ها برای انجام این کار، پیاده‌سازی انتخابگر تاریخ است. این راهنما شما را در فرآیند گفت ن انتخابگر تاریخ به برنامه React خود با استفاده از کتابخانه react-datepicker راهنمایی می کند.

مرحله 1: پروژه React خود را راه اندازی کنید

قبل از شروع، مطمئن شوید که یک پروژه React را راه اندازی کرده اید. اگر ندارید، می توانید با اجرای npx create-react-app my-datepicker-app به سرعت یکی را ایجاد کنید. (برای اطلاعات بیشتر درباره Create React App بخوانید.)

مرحله 2: react-datepicker را نصب کنید

اولین قدم این است که بسته react-datepicker را به پروژه خود اضافه کنید. ترمینال خود را باز کنید، به دایرکتوری پروژه خود بروید و دستور زیر را اجرا کنید:

 npm install react-datepicker

این دستور react-datepicker و وابستگی های آن را در پروژه شما نصب می کند.

مرحله 3: react-datepicker وارد کنید

با نصب بسته، اکنون می توانید از آن در کامپوننت React خود استفاده کنید. فایل کامپوننت را که می‌خواهید انتخابگر تاریخ را در آن قرار دهید باز کنید و عبارت import زیر را در بالا اضافه کنید:

 import DatePicker from "react-datepicker" ; import "react-datepicker/dist/react-datepicker.css" ;

خط اول مولفه DatePicker را وارد می کند و خط دوم استایل پیش فرض را وارد می کند. این برای انتخابگر تاریخ برای ارائه صحیح بسیار مهم است.

مرحله 4: استفاده از DatePicker در مؤلفه شما

اکنون، اگر از یک مؤلفه تابعی استفاده می کنید، اجازه دهید مؤلفه DatePicker را به متد رندر یا عبارت بازگشتی خود اضافه کنیم. همچنین باید تاریخ انتخاب شده را در وضعیت جزء خود مدیریت کنید.

در اینجا نحوه انجام این کار در یک جزء کلاس آمده است:

 import React , { Component } from 'react' ; import DatePicker from "react-datepicker" ; import "react-datepicker/dist/react-datepicker.css" ; class MyDatePicker extends Component { state = { startDate : null } ; handleChange = date = > { this . setState ( { startDate : date } ) ; } ; render ( ) { return ( ) ; } } export default MyDatePicker ;

برای یک جزء کاربردی با استفاده از قلاب، کد به صورت زیر است:

 import React , { useState } from 'react' ; import DatePicker from "react-datepicker" ; import "react-datepicker/dist/react-datepicker.css" ; const MyDatePicker = ( ) = > { const [ startDate , setStartDate ] = useState ( null ) ; return ( setStartDate ( date ) } / > ) ; } ; export default MyDatePicker ;

مرحله 5: سفارشی سازی و گزینه ها

react-datepicker طیف گسترده ای از لوازم را برای سفارشی کردن ظاهر و عملکرد انتخابگر تاریخ ارائه می دهد. برخی از گزینه های سفارشی سازی عبارتند از:

dateFormat : به شما امکان می دهد فرمت تاریخ نمایش داده شده را تغییر دهید.

minDate و maxDate : محدوده تاریخ قابل انتخاب را محدود کنید.

درون خطی : انتخابگر تاریخ را به‌جای کشویی به صورت درون خطی ارائه دهید.

withPortal : انتخابگر تاریخ را در داخل یک پورتال رندر می‌کند، که می‌تواند به مشکلات موقعیت‌یابی در طرح‌بندی‌های پیچیده کمک کند.

در اینجا یک نمونه از DatePicker سفارشی شده است:

 &lt; < span class = " hljs-title class_ " > DatePicker </ span > selected = { startDate } onChange = { < span class = " hljs-function " > < span class = " hljs-params " > date </ span > =&gt; </ span > < span class = " hljs-title function_ " > setStartDate </ span > ( date ) } dateFormat = < span class = " hljs-string " > "yyyy/MM/dd" </ span > minDate = { < span class = " hljs-keyword " > new </ span > < span class = " hljs-title class_ " > Date </ span > ( ) } maxDate = { < span class = " hljs-keyword " > new </ span > < span class = " hljs-title class_ " > Date </ span > ( ) . < span class = " hljs-title function_ " > setMonth </ span > ( < span class = " hljs-keyword " > new </ span > < span class = " hljs-title class_ " > Date </ span > ( ) . < span class = " hljs-title function_ " > getMonth </ span > ( ) + < span class = " hljs-number " > 1 </ span > ) } inline / &gt;

مسائلی که باید مراقب آنها بود

هنگام ایجاد انتخابگر تاریخ در برنامه‌های React، تمرکز بر چندین موضوع کلیدی می‌تواند قابلیت استفاده، دسترسی و عملکرد را افزایش دهد:

سازگاری مرورگر . از عملکرد ثابت در همه مرورگرهای هدف اطمینان حاصل کنید، زیرا تفاوت‌ها می‌تواند بر رفتار و ظاهر انتخابگر تاریخ تأثیر بگذارد.

طراحی تعاملی . انتخابگر تاریخ باید به طور یکپارچه در دستگاه‌هایی با اندازه‌های مختلف صفحه کار کند و تجربه کاربری خوبی را هم در رایانه‌های رومیزی و هم در دستگاه‌های تلفن همراه تضمین کند.

دسترسی . پیمایش صفحه کلید، پشتیبانی از صفحه‌خوان، و آپشن های ARIA را پیاده‌سازی کنید تا انتخابگر تاریخ برای همه کاربران، از جمله افراد دارای معلولیت، قابل دسترسی باشد.

بومی سازی و بین المللی سازی از زبان‌ها و قالب‌های تاریخ مختلف برای پاسخگویی به مخاطبان جهانی پشتیبانی کنید و اطمینان حاصل کنید که انتخابگر تاریخ انتظارات فرهنگی و زبانی کاربران شما را برآورده می‌کند.

مدیریت منطقه زمانی برای جلوگیری از سردرگمی و خطا در انتخاب تاریخ، مناطق زمانی را به‌ویژه برای برنامه‌های مورد استفاده در مناطق مختلف مدیریت کنید.

کارایی . مراقب تأثیر بر عملکرد برنامه خود باشید و در صورت لزوم بهینه سازی کنید تا تجربه ای روان و پاسخگو داشته باشید.

مدیریت وابستگی به طور منظم کتابخانه انتخابگر تاریخ را به روز کنید تا از وصله های امنیتی و ویژگی های جدید بهره مند شوید، اما برای جلوگیری از معرفی مسائل جدید، آن را به طور کامل آزمایش کنید.

نتیجه

ادغام یک انتخابگر تاریخ در برنامه React می‌تواند تجربه کاربر را با ارائه یک روش ساده و موثر برای انتخاب تاریخ، به میزان قابل توجهی بهبود بخشد. کتابخانه react-datepicker اضافه کردن یک انتخابگر تاریخ قابل تنظیم و شیک را به برنامه خود تنها با چند خط کد ساده می کند.

ابزارها و گزینه های مختلف react-datepicker را آزمایش کنید تا از پتانسیل آن به طور کامل استفاده کنید و انتخابگر تاریخ را کاملاً متناسب با نیازهای برنامه خود تنظیم کنید.

خبرکاو