دیت آبجکت در حقیقت یک کلاس ES6 هست که من برای راحت شدن کار با انواع تقویم ها نوشتم تا برای هر تقویم لازم نباشه یک پکیج جدا را در دیت پیکر ایمپورت کنم.

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

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

برای تولید یک نمونه از DateObject باید از کد ()new DateObject استفاده کنید. اگر کد بالا رو بدون هیچ کانستراکتوری وارد کنید براتون یک نمونه از DateObject با تقویم میلادی (gregorian) و locale انگلیسی (en) ساخته میشه مثلا برای امروز که به میلادی 2021/01/14 هست اگر من یک ()new DateObject تعریف کنم، یک نمونه از همین تاریخ برای من تولید میشه:

const date = new DateObject()

console.log(date.year) //2021
console.log(date.month.number) //3
console.log(date.day) //2
console.log(date.calendar) //gregorian
console.log(date.locale) //en

حالا میتونید با متد format تاریخ خودتون رو فرمت کنید :

console.log(date.format()) //2021/03/02

همچنین اگر توکن خاصی مد نظرتون هست میتونید داخل متد فرمت اون token رو به صورت پارامتر وارد کنید:

console.log(date.format("dddd DD MMMM YYYY")) //Tuesday 02 March 2021

و اگر داخل توکن هاتون از مقداری استفاده میکنید که میخواید ignore شه ، اون مقادیر را به صورت آرایه در پارامتر دوم تعریف کنید:

console.log(
  date.format(
    "Date: YYYY/MM/DD Time: HH:mm:ss",
    ["Date", "Time"]
  )
) //Date: 2021/03/02 Time: 10:53:00

همونطور که میدونید شما میتونید مقدار های مورد نظرتون رو از تاریخ تولید شده استخراج کنید:

const {year, month, day, hour, minute} = date

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

const {name, shortName, number, index} = date.month

console.log(name, shortName, number, index); //March Mar 3 2

const {name, shortName, number, index} = date.weekDay

console.log(name, shortName, number, index); //Tuesday Tue 3 2

اگر میخواهید به اول و آخر ماه حرکت کنید از متد های ()toFirstOfMonth و ()toLastOfMonth استفاده کنید.

date.toFirstOfMonth()

console.log(date.format()); //2021/03/01

date.toLastOfMonth()

console.log(date.format()); //2021/03/31

const date = new DateObject() //2021/03/02

date.add(5, "days");

console.log(date.format()); //2021/03/07

date.subtract(1, "month"); 

console.log(date.format()); //2021/02/07

console.log(
  new DateObject()
    .add(5, "days")
    .subtract(1, "month")
    .format()
); //2021/02/07

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

ایمپورت کردن تقویم اجباریه، ولی در مورد زبان، بستگی به کاری که میخواید با تاریخ انجام بدید داره. مثلا اگر فرمت شدن تاریخ با حروف محلی براتون مهم نیست، یا نمیخواید اسم ماه ها و روز های هفته رو فرمت کنید میتونید از همون زبان پیشفرض استفاده کنید ولی به یاد داشته باشید که اگر با زبان پیشفرض، ماه اول هر تقویمی رو فرمت کنید(یعنی در متد فرمت، مقدار MMMM رو به عنوان پارامتر وارد کنید)، بهتون مقدار January رو نشون میده، که در حقیقت ماه اول زبان پیشفرض (میلادی) هست! ولی در صورت فرمت کردن شماره ماه (وارد کردن مقدار MM به عنوان پارامتر در متد فرمت) در همه زبان ها همون مقدار 01 رو میگیرید.

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

در زیر چند مثال از تولید تاریخ با استفاده از تقویم و زبان های مربوط به اون تقویم ها آورده شده.

برای مشاهده جداول تقویم و زبان های مربوط به هر تقویم روی لینک های زیر کلیک کنید.

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

import persian from "react-date-object/calendars/persian"
import persian_fa from "react-date-object/locales/persian_fa"

const date = new DateObject({ calendar: persian, locale: persian_fa })

console.log(date.format()) //۱۴۰۰/۰۴/۱۳
console.log(date.month.name) //تیر

import arabic from "react-date-object/calendars/arabic"
import arabic_ar from "react-date-object/locales/arabic_ar"

const date = new DateObject({ calendar: arabic, locale: arabic_ar })

console.log(date.format()) //١٤٤٢/١١/٢٤
console.log(date.month.name) //ذیقعده

import indian from "react-date-object/calendars/indian"
import indian_hi from "react-date-object/locales/indian_hi"

const date = new DateObject({ calendar: indian, locale: indian_hi })

console.log(date.format()) //१९४३/०४/१३
console.log(date.month.name) //आषाढ़

const date = new DateObject()

date.year = 2020
date.month = 3
date.day = 4

console.log(date.format()) //2020/03/04

date.set({ year: 2010, month: 4, day: 7 })

console.log(date.format()) //2010/04/07

console.log(
  date
    .setYear(2000)
    .setMonth(1)
    .setDay(1)
    .format()
) //2000/01/01

console.log(
  date
    .set("year", 1907)
    .set("month", 7)
    .set("day", 7)
    .format()
) //1907/07/07

چند راه برای تولید تاریخ از روی استرینگ وجود داره که در اینجا اومده:

• اول اینکه می تونید استرینگ مورد نظرتون رو مستقیماً در کانستراکتور DateObject وارد کنید که برای این منظور باید به دو مورد زیر توجه داشته باشید:

  1. تاریخ تولید شده به این روش به تقویم میلادی و زبان انگلیسی پارس میشه.

  2. استرینگ وارد شده باید از این فرمت تبعیت کند در غیر اینصورت اشتباه تولید میشه : year month day hour minute second millisecond meridiem که شما میتونید فاصله ها رو با هر کاراکتر دیگه ای جایگرین کنید:

  var date = new DateObject("2020 8 21 11 55 36 100 am");
  
  date.format("YYYY/MM/DD hh:mm:ss.SSS a"); //2020/08/21 11:55:36.100 am
  
  date = new DateObject("2020/08/01");
  
  date.format("YYYY/MM/DD hh:mm:ss.SSS a"); //2020/08/01 12:00:00.000 am

• اگر فرمت خاصی به غیر از فرمت گفته شده در مثال قبل مد نظرتون هست باید اون فرمت و استرینگ رو داخل یک آبجکت قرار بدید؛ برای این منظور به روش زیر عمل کنید :

  const date = new DateObject({
    date: "September 04 2021, 12:42 am",
    format: "MMMM DD YYYY, HH:mm a"
  })
  
  console.log(date.format()); //September 04 2021, 12:42 pm

  اگر استرینگ تاریخ شما باید به تقویمی غیر از میلادی یا زبانی غیر از انگلیسی پارس بشه باید اون تقویم رو به همراه زبان مربوطه اش ایمپورت کرده و داخل آبجکتتون قرار بدید:

  import persian from "react-date-object/calendars/persian"
  import persian_fa from "react-date-object/locales/persian_fa"
  
  const date = new DateObject({
    date: "1400/05/14 18:35:44",
    format: "YYYY/MM/DD HH:mm:ss",
    calendar: persian,
    locale: persian_fa
  })
  
  console.log(
    date.format("DD MMMM سال YYYY, ساعت HH و mm دقیقه")
  ); //۱۴ مرداد سال ۱۴۰۰, ساعت ۱۸ و ۳۵ دقیقه

نکته مهمی که اکثر اوقات در موردش از من سوال میشه و باید در انتها بهتون توضیح بدم، در مورد پارس کردن تاریخ میلادی و تبدیلش به تاریخ های دیگر هست.

فرض کنید میخواید تاریخ 2021/01/01 رو به تاریخ شمسی تبدیل کنید، اشتباهی که اکثرا انجام میدن این هست که اکثرا تاریخ میلادی رو با تقویم شمسی پارس میکنن:

import persian from "react-date-object/calendars/persian"
import persian_fa from "react-date-object/locales/persian_fa"

const date = new DateObject({
  date: "2021/01/01",
  calendar: persian,
  locale: persian_fa
})

این کار اشتباه هست چون شما با این کار در حقیقت دارید تاریخ 2021 شمسی رو پارس میکنید!

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

import persian from "react-date-object/calendars/persian"
import persian_fa from "react-date-object/locales/persian_fa"

const date = new DateObject("2021/01/01").convert(persian, persian_fa)

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

console.log(date.format()) //۱۳۹۹/۱۰/۱۲

در مورد متد convert در قسمت های بعد بیشتر توضیح میدم.

const date = new DateObject(new Date(2020, 1, 15))

console.log(date.format()) //2020/01/15

import persian from "react-date-object/calendars/persian"

const date = new DateObject({
  date: new Date(2020, 1, 15),
  calendar: persian
})

console.log(date.format()) //1399/10/26

const date = new DateObject({
  year:1400,
  month:10,
  day:22,
  calendar: persian,
  locale: persian_fa
})

console.log(date.format("dddd DD MMMM سال YYYY")) //چهارشنبه ۲۲ دی سال ۱۴۰۰

زمان یونیکس در این لحظه ای که دارم این مطلب رو مینویسم 1614678083 هست.

فقط توجه کنید که این مقدار به ثانیه هست و ما باید به میلی ثانیه تبدیلش کنیم پس ضرب در 1000 اش میکنیم :

import persian from "react-date-object/calendars/persian"

const date = new DateObject({
  date: 1614678083 * 1000,
  calendar: persian
})

console.log(date.format()) //1399/12/12

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

const date = new DateObject(1614678083 * 1000)

فقط اینم بگم که اگر بخواید مقدار unix هر تاریخی رو بدونید باید از متد ()toUnix استفاده کنید. مثلا برای متغیر بالا اگر از متد toUnix استفاده کنیم دوباره همون عدد خودمون برامون چاپ میشه :

console.log(date.toUnix()) //1614678083

برای تبدیل تاریخ ها به یکدیگر روش های زیادی وجود داره، ولی بهترینشون همین متد convert هست که در ادامه راجع بهش توضیح میدم.

متد convert از شما دو تا پارامتر میخواد که وارد کردن اولیش اجباری و دومیش اختیاریه.

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

اگر میخواید هر تاریخی غیر از تاریخ میلادی (مثلا شمسی) رو به تاریخ میلادی تبدیل کنید میتونید هر دو پارامتر رو خالی بزارید.

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

در حالت کلی برای تبدیل دو تاریخ به یکدیگر شما باید این دو مرحله رو انجام بدید:

یک: تولید تاریخ اولیه (که در اینجا میلادی هست)

دو: تبدیل تاریخ اولیه به تاریخ مورد نظر (که در اینجا شمسی هست)

شما میتونید این دو مرحله رو به صورت جداگانه یا پیوسته انجام بدید که در مثال زیر هر دوی آنها آورده شده:

import persian from "react-date-object/calendars/persian"
import persian_fa from "react-date-object/locales/persian_fa"

//--> 1
const date = new DateObject()
console.log(date.format()) //2021/07/05
//<--

//-->2
date.convert(persian, persian_fa)
console.log(date.format()) //۱۴۰۰/۰۴/۱۴
//<--

import persian from "react-date-object/calendars/persian"
import persian_fa from "react-date-object/locales/persian_fa"

const date = new DateObject().convert(persian, persian_fa)
console.log(date.format()) //۱۴۰۰/۰۴/۱۴

برای تبدیل تاریخ شمسی به تقویم قمری احتیاج به ایمپورت کردن تقویم شمسی، تقویم قمری، و لوکال مربوط به تقویم قمری دارید(در اینجا از لوکال قمری_انگلیسی استفاده شده):

import persian from "react-date-object/calendars/persian"
import arabic from "react-date-object/calendars/arabic"
import arabic_en from "react-date-object/locales/arabic_en"

const date = new DateObject({calendar:persian, date:"1399/12/24"})
        
date.convert(arabic, arabic_en)

console.log(date.format()) //1442/07/30

import arabic from "react-date-object/calendars/arabic"
import persian from "react-date-object/calendars/persian"
import persian_en from "react-date-object/locales/persian_en"

const date = new DateObject({ calendar: arabic, date: "1442/05/10" })

date.convert(persian, persian_en)

console.log(date.format()) //1399/10/05

import indian from "react-date-object/calendars/indian"
import indian_en from "react-date-object/locales/indian_en"

console.log(new DateObject().convert(indian, indian_en).format()) //1942/12/11