Moment.js یک کتابخانه فوق العاده برای مدیریت موثر تاریخ و زمان در برنامه های React است.
مدیریت تاریخ و زمان در React می تواند برای کسانی که در این منطقه آشنایی ندارند، چالشی ایجاد کند. خوشبختانه چندین کتابخانه وجود دارد که می توانند در مدیریت تاریخ و زمان در React به شما کمک کنند. یکی از این کتابخانه ها Moment.js است.
Moment.js یک کتابخانه سبک وزن با روشی ساده برای دستکاری و قالب بندی تاریخ ها و زمان ها در جاوا اسکریپت است.
نصب کتابخانه Moment.js
کتابخانه Moment.js بسته ای برای مدیریت عملیات تاریخ و زمان در جاوا اسکریپت است. نصب کتابخانه Moment.js اولین قدم برای استفاده از Moment.js در برنامه React شما است. با اجرای دستور زیر در ترمینال خود می توانید این کار را انجام دهید:
npm install moment
پس از اتمام نصب، می توانید از Moment.js در کامپوننت React خود استفاده کنید.
استفاده از Moment.js برای نمایش تاریخ و زمان
می‌توانید از Moment.js برای نمایش تاریخ‌ها و زمان‌ها در قالبی خاص در برنامه React خود استفاده کنید. برای استفاده از کتابخانه، لحظه را از بسته نصب شده وارد کنید.
import React from 'react';
import moment from 'moment';
function App() {
const date = moment().format("MMMM DD YYYY");
const time = moment().format("HH mm ss");
return (
<div>
<p> Today's date is { date } </p>
<p> The time is { time } </p>
</div>
)
}
export default App
متد moment() یک شی لحظه ای جدید ایجاد می کند که نشان دهنده یک نقطه خاص در زمان است. متد format() یک شی لحظه ای را به یک نمایش رشته ای قالب بندی می کند.
متد format() یک آرگومان رشته ای می گیرد که فرمت مورد نظر را برای شی لحظه ای مشخص می کند. آرگومان رشته می تواند شامل ترکیبی از حروف و کاراکترهای خاص باشد که هر کدام معنای خاصی دارند.
برخی از این شخصیت های خاص عبارتند از:
- YYYY: سال با چهار رقم
- YY: سال با دو رقم
- MM: ماه با دو رقم
- م: ماه با یک یا دو رقم
- MMMM: ماه در کلمات
- DD: روز ماه با دو رقم
- د: روز ماه با یک یا دو رقم
- انجام: روز ماه با ترتیب
- HH: ساعت با دو رقم
- H: ساعت با یک یا دو رقم
- mm: دقیقه با دو رقم
- m: دقیقه با یک یا دو رقم
- ss: دوم با دو رقم
- s: دوم با یک یا دو رقم
هنگامی که مؤلفه برنامه در بلوک کد قبلی ارائه می شود، تاریخ و زمان فعلی در قالب مشخص شده روی صفحه نمایش داده می شود.
متد moment() می تواند آرگومان تاریخ یا زمان رشته ای بگیرد. زمانی که متد moment() دارای آرگومان رشته ای تاریخ یا زمان باشد، یک شی لحظه ای ایجاد می کند که آن تاریخ یا زمان را نشان می دهد. رشته می تواند در فرمت های مختلفی مانند ISO 8601، RFC 2822، یا Unix timestamp باشد.
مثلا:
const date = moment('1998-06-23').format("MMMM DD YYYY");
استفاده از Moment.js برای دستکاری تاریخ و زمان
کتابخانه Moment.js همچنین چندین روش برای دستکاری تاریخ و زمان ارائه می دهد. این روش ها به شما این امکان را می دهند که فواصل زمانی را اضافه یا کم کنید، مقادیر خاصی را برای مؤلفه های تاریخ و زمان تنظیم کنید و سایر عملیات قابل اجرا را انجام دهید.
مثلا:
import React from 'react';
import moment from 'moment';
function App() {
const tomorrow = moment().add(1, 'day').format("Do MMMM,YYYY");
const time = moment().subtract(1, 'hour').format("HH:mm:ss");
const lastYear = moment().set('year', 2022).set('month', 1).format("Do MMMM,YYYY");
const hour = moment().get('hour');
return (
<div className="App">
<p>Tomorrow's date is { tomorrow }</p>
<p>This was the time: { time }, an hour ago</p>
<p>{ lastYear }</p>
<p>{ hour }</p>
</div>
)
}
export default App
در این مثال، متغیرهای جاوا اسکریپت زیر را اعلام می کنید: فردا، زمان، lastYear و ساعت. این چهار متغیر از روش های مختلف کتابخانه Moment.js برای دستکاری تاریخ و زمان استفاده می کنند.
متغیر فردا از متد add() برای اضافه کردن یک روز به تاریخ جاری استفاده می کند. متد add() زمان را به یک شی Moment داده شده اضافه می کند. این تابع دو آرگومان می گیرد: یک مقدار مدت زمان و یک رشته که واحد زمان برای افزودن را نشان می دهد. واحد می تواند سال، ماه، هفته، روز، ساعت، دقیقه و ثانیه باشد.
همچنین می توانید با استفاده از متد subtract() زمان را کم کنید. در این حالت، متغیر زمان از متد subtract() برای کم کردن یک ساعت از زمان فعلی استفاده می‌کند.
با استفاده از متد set()، متغیر lastYear سال را به 2022 و ماه را به فوریه تنظیم می کند (از ژانویه به عنوان ماه 0 نشان داده می شود). متد set() یک واحد زمان خاص را به یک شی Moment اختصاص می دهد.
با متد get() می توانید زمان خاصی را بازیابی کنید. متد get() یک آرگومان واحد، یک واحد زمان می گیرد.
استفاده از Moment.js برای تجزیه تاریخ و زمان
یکی دیگر از ویژگی های مفید Moment.js توانایی آن در تجزیه تاریخ و زمان از رشته ها است. این می تواند هنگام کار با داده های منابع خارجی مفید باشد.
برای تجزیه تاریخ یا زمان از یک رشته، باید از متد () moment استفاده کنید. در این مورد، متد moment() دو آرگومان، رشته تاریخ و یک رشته قالب را می گیرد.
در اینجا مثالی از نحوه استفاده از متد moment() برای تجزیه تاریخ و زمان آورده شده است:
import React from 'react';
import moment from 'moment';
function App() {
const date = moment('2920130000', 'Do-MMMM-YYYY').toDate();
console.log( date );
return (
<div></div>
)
}
export default App
در بلوک کد بالا، متد moment() این رشته ‘2920130000’ را با استفاده از رشته فرمت «Do-MMMM-YYYY» تجزیه می کند. متد toDate() شی لحظه ای را به یک شیء تاریخ جاوا اسکریپت بومی تبدیل می کند.
متد toDate() هیچ آرگومان نمی گیرد و یک شیء تاریخ جاوا اسکریپت را برمی گرداند که همان تاریخ و زمان شی لحظه را نشان می دهد.
نمایش زمان نسبی
با کتابخانه Moment.js می توانید زمان نسبی را قالب بندی و نمایش دهید. برای این کار از متدهای fromNow() و toNow() استفاده می کنید. این روش ها زمان بین تاریخ معین و زمان فعلی را نمایش می دهند.
مثلا:
import React from 'react';
import moment from 'moment';
function App() {
const yesterday = moment().subtract(7, 'day');
const time1 = yesterday.fromNow(); // 7 days ago
const time2 = yesterday.toNow(); // in 7 days
return (
<div>
<p>{ time1 }</p>
<p>{ time2 }</p>
</div>
)
}
export default App
در این مثال، متد fromNow() زمان نسبی سپری شده از تاریخ مشخص شده را برمی گرداند، در حالی که متد toNow() زمان نسبی را تا زمان فعلی برمی گرداند.
بیشتر به Moment.js
Moment.js یک کتابخانه قدرتمند است که روشی ساده برای دستکاری و قالب بندی تاریخ و زمان در جاوا اسکریپت ارائه می دهد. شما یاد گرفته اید که چگونه با استفاده از Moment.js تاریخ ها و زمان ها را در React دستکاری، نمایش و تجزیه کنید.
Moment.js چندین روش دیگر مانند local، startOf، endOf و غیره را ارائه می دهد. با این حال، با اطلاعات ارائه شده، شما آمادگی بیشتری برای شروع استفاده از Moment.js در برنامه React خود دارید.