آموزش دیت پیکر(Date Picker) ری اکت

آموزش دیت پیکر(Date Picker) ری اکت

مقدمه

ما اغلب با انجمن‌ها و وب‌سایت‌های مختلفی مواجه می‌شویم که باید تاریخ تولد خود را وارد کنیم یا تاریخی را برای قرار ملاقات به هر دلیلی انتخاب کنیم، و نمادی شبیه به تقویم درست جلوی چشمانمان ظاهر می‌شود. چگونه و از کجا ظاهر می شود؟ این باید یک تقویم خاص و پویا باشد که به طور هوشمندانه تشخیص دهد و به ما ارائه دهد تا تاریخ های مورد نظر خود را انتخاب کنیم. اینجاست که دیت پیکر ری اکت وارد می‌شود.

در این آموزش، ما تمام این روش‌ها را از ابتدا تا سطح پیشرفته در مورد نحوه پیاده‌سازی آن در React و نحوه سفارشی‌سازی آن یاد می‌گیریم. در ادامه با ما همراه باشید.

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

React

Date Picker یک مؤلفه مفید و فراوان است که برای نمایش تاریخ ها با استفاده از قالب گفتگوی تقویم استفاده می شود.

معمولاً این روزها گزینه های زیادی برای انتخاب تاریخ وجود دارد. همه آنها می توانند جنبه های فنی و کاربردهای متفاوتی داشته باشند. در این آموزش به طور خاص به دیت پیکر ری اکت (React Date Picker) می پردازیم.

برای این کار باید بسته ای برای آن داشته باشیم که زمان و تاریخ را نمایش دهد. برای درک بهتر، ما یک برنامه کاربردی خواهیم ساخت که به ما در درک بهتر React Date Picker کمک می کند. اما، قبل از آن، اجازه دهید آن را همانطور که در مراحل زیر نشان داده شده است نصب کنیم.

نصب

برای نصب Date Picker برای برنامه React خود، باید Node.js را داشته باشیم که حالا از قبل روی سیستم ما نصب شده است.

اگرچه همیشه داشتن ماژول‌های node مهم نیست، اما توصیه می‌شود آنها را دانلود کنید تا همه وابستگی‌ها به طور موثر ارائه شوند.

بنابراین دستور نصب React Date Picker را در بخش زیر در اختیار شما قرار داده ایم.

بسته را می توان از طریق npm نصب کرد:

npm install react-datepicker --save

یا از طریق Yarn:

yarn add react-datepicker

ممکن است نیاز به نصب React و Proptypes آن به صورت جداگانه وجود داشته باشد زیرا بدون این وابستگی ها، ساختن React Date Picker غیرممکن است. همچنین ممکن است نیاز به استفاده از CSS داشته باشیم
از بسته های خارجی به طوری که انتخابگر تاریخ از نظر بصری عالی به نظر می رسد. برای شروع کار با برنامه خود، باید انتخابگر React Date را در فایل اصلی خود وارد کنیم و باید آن را از طریق React view بررسی کنیم:

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 ( 
<DatePicker selected={startDate} onChange={(date) => 
setStartDate(date)} /> 
); 
};

نمونه ی دیت پیکر ری اکت (React DatePicker)

با فرض اینکه سیستم ما با تمام الزامات و وابستگی های نصب پیکربندی شده است، نحوه ایجاد یک برنامه React را از ابتدا یاد خواهیم گرفت.

این پیاده سازی کاملا بر اساس برنامه React datepicker است.

در بحث بالا، ما فرض می کنیم که React و PropTypes را به طور مستقل نصب کرده ایم، زیرا این وابستگی ها در خود بسته گنجانده نشده اند.

برای ادامه روش های ساخت اپلیکیشن خود، باید مراحل زیر را دنبال کنیم:

npx create-react-app react-datepicker-app

با استفاده از دستور زیر وارد پوشه ی پروژه اتان شوید:

cd react-datepicker-app

اپلیکیشن ری اکت را باز کنید:

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 ( 
<form onSubmit={ this.onFormSubmit }> 
<div className="form-group"> 
<DatePicker 
selected={ this.state.startDate } 
onChange={ this.handleChange } 
name="startDate" 
dateFormat="MM/dd/yyyy" 
/> 
<button className="btn btn-primary">Show Date</button> 
</div> 
</form> 
); 
} 

} 

export default App;

اکنون برنامه ما چیزی شبیه به شکل زیر خواهد بود:

در نمونه کدگذاری شده بالا، ابتدا بسته های Datepicker و Bootstrap را در قالب React وارد کردیم. سپس، آن را تعریف کردیم تا تغییر دسته را پیوند داده و Component را در تقویم رویداد ارسال کند.

زمانی که کاربر مقادیر مقدار ورودی Datepicker را ارسال یا تغییر می‌دهد، این رویدادها به‌طور خودکار فعال می‌شوند. بعداً، حالت فرم Datepicker را با یک ابجکت جدید Date() در داخل سازنده مقداردهی کردیم.

در نهایت، ما Datepicker را با دستور زیر شروع کردیم تا برخی از ویژگی ها را به آن اضافه کنیم:

<DatePicker  

 selected={ this.state.startDate }  

 onChange={ this.handleChange }  

 name="startDate"  

 dateFormat="MM/dd/yyyy"  

 />

ما می‌توانیم خروجی را در قالب یک فرمت تاریخ‌پیکر تقویم محور تجسم کنیم. Datepicker داده شده در بالا ویژگی های سفارشی شده را به اجزای برنامه React که در بالا نشان داده شده است اضافه می کند. این به ما امکان می دهد تاریخ ها را به صورت ماه، روز و سال انتخاب کنیم.

علاوه بر این، برای سفارشی کردن datepicker، ما روش‌های مختلفی داریم، چه رنگ‌آمیزی اجزا یا استفاده هوشمندانه از توابع برای انتخاب تاریخ‌ها. همچنین اگر اجزای HTML و CSS مربوط به فایل app.js را داشته باشیم، می‌توانیم آنها را به راحتی سفارشی کنیم.

بومی سازی دیت پیکر (Datepicker)

نمونه دیگری که می خواهیم درباره آن بیاموزیم، بومی سازی Datepicker است. انتخابگر تاریخ که می خواهیم بسازیم به شدت به بین المللی سازی date-fns بستگی دارد.

این به این دلیل است که برای بومی سازی عناصری که نمایش داده می شوند استفاده می شود. اگر ما نیاز به استفاده از محلی به جز برای پیش فرض en-US داشته باشیم، ممکن است لازم باشد آن را از date-fns به پروژه وارد کنیم.

علاوه بر این، زبان انگلیسی محلی پیش فرض ان است که از 3 روش برای تنظیم محل (locale) تشکیل شده است.

• register local (رشته، ابجکت): یک ابجکت محلی وارد شده را از date-fns بارگیری می کند.
• Set default locale (رشته): یک منطقه محلی ثبت شده را به عنوان پیش فرض برای همه نمونه های datepicker تنظیم می کند.
• getDefaultLocale: رشته‌ای را برمی‌گرداند که محل پیش‌فرض تنظیم‌شده فعلی را نشان می‌دهد.

ما می‌توانیم این خدمات را با استفاده از قطعه کد زیر، به محلی نمای تقویم وارد کنیم:

import { registerLocale, setDefaultLocale } from

"react-datepicker";

import es from 'date-fns/locale/es';

registerLocale('es', es)

<DatePicker  

  locale="es"  

/>

با وارد کردن و ذخیره این سرویس‌های محلی در فایل app.js، برنامه ما به این شکل خواهد بود:

در نمونه‌ای دیگر، برای تغییر زبان‌ها، ابتدا باید کد محلی یا با استفاده از بین‌المللی‌سازی date-fns را تغییر دهیم تا بتوان از بررسی کد پشتیبانی کرد:

setDefaultLocale('es')

تنظیم محدوده تاریخ تقویم در دیت پیکر

ما در این مرحله یاد خواهیم گرفت که چگونه عملکرد محدوده را با استفاده از ویژگی minDate و maxDate پیاده سازی کنیم.

برای این کار، addDays API را از کتابخانه date-fns به بالای کامپوننت React وارد می کنیم.

برای تنظیم محدوده، تعداد روزهای مشخصی را به تاریخ تعیین شده اضافه می کند:

import addDays from 'date-fns/addDays'

متد addDays() معمولاً دو پارامتر دارد:

Date: تاریخی که باید به روز شود.

amount: مقدار  روزهای مورد نیاز برای گنجاندن.

ما به راحتی می توانیم محدوده تاریخ را از روز جاری تا هفت روز آینده در تقویم React تنظیم کنیم.

این را زمانی می توان فهمید که متدهای minDate و maxDate را در کد مثال نشان داده شده در زیر پیاده سازی کنیم:

render() {  

    return (  

      <form onSubmit={ this.onFormSubmit }>  

        <div className="form-group">  

          <DatePicker  

              selected={ this.state.startDate }  

              onChange={ this.handleChange }  

              showTimeSelect  

              timeFormat="HH:mm"  

              timeIntervals={20}  

              timeCaption="time"  

              dateFormat="MMMM d, yyyy h:mm aa"  

              minDate={new Date()}  

              maxDate={addDays(new Date(), 7)}  

          />  

          <button className="btn btn-primary">Show Date</button>  

        </div>  

      </form>  

    );  

  }

قطعه کد کامل برنامه ما پس از اجرای تمام مراحل ذکر شده  بالا ، در بخش زیر نشان داده شده است:

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 ( 
<form onSubmit={ this.onFormSubmit }> 
<div className="form-group"> 
<DatePicker 
selected={ this.state.startDate } 
onChange={ this.handleChange } 
showTimeSelect 
timeFormat="HH:mm" 
timeIntervals={20} 
timeCaption="time" 
dateFormat="MMMM d, yyyy h:mm aa" 
minDate={new Date()} 
maxDate={addDays(new Date(), 7)} 
/> 
<button className="btn btn-primary">Show Date</button> 
</div> 
</form> 
); 
} 

} 
export default App;

در قطعه مثال بالا، ما minDate را به عنوان یک مؤلفه ورود ساخته ایم و کاربر فقط می تواند تاریخ قبل از امروز را انتخاب کند.

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

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

تنها تفاوت در روش minDate مؤلفه چک‌اوت است، زیرا صرفاً به مؤلفه ورود بستگی دارد. بنابراین، با اطمینان از اینکه همه چیز از نظر مقادیر نه قبل و نه بعد از آن تنظیم شده است، اکنون می توانیم به راحتی تاریخ ها را انتخاب کرده و خروج را تعریف کنیم.

جمع بندی

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

ما یاد گرفته‌ایم که چگونه برنامه React را در اولویت راه‌اندازی کنیم، زیرا رندر کردن مؤلفه‌های React ممکن است برای مبتدیان پیچیده به نظر برسد، بنابراین تنظیم وابستگی‌ها همیشه توسط یک مبتدی ترجیح داده می‌شود.

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

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

بهبودهای بیشتری می‌توان انجام داد، مانند اجرای حداکثر و حداقل از طریق props، تغییر نوع ورودی از متن به تاریخ، و ایجاد بهبود دسترسی بهتر. همچنین می‌توانیم با وارد کردن بسته‌های Bootstrap و افزودن استایل سفارشی و ویژگی‌های شناور کردن برای زیباتر جلوه دادن آن، روش‌های طراحی را برای دیت پیکر ری اکت که در این آموزش پیاده‌سازی کردیم، توسعه دهیم.