The DateObject is an ES6 class that I wrote to make it easier to work with a variety of calendars, so there is no need to import a separate package into the DatePicker for each calendar.

This package can be used in the backend and frontend as well.

DateObject has several other options that make it much easier to work with date and time, and in this section, I want to write about some of the most useful options.

You need to enter 'new DateObject()' to generate an instance of DateObject. If you enter the above code without any constructor, you will get an object containing the current moment with the Gregorian calendar and English locale, for example for today, which is 03/02/2021, if I define a new DateObject(), An object of this moment will be produced for me:

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

Now you can format your date with the format method:

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

Also, if you have a specific token, you can enter that token as a parameter in the format method:

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

And if you use a value inside your tokens that you want to ignore, define those values as an array in the second parameter:

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

As you know, you can destructure this object and get the values you need from it:

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

In the same way, you can destructure the name, shortName, number, and index, from the value of the month & weekDay.

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

If you want to move to the beginning or end of the month, use the toFirstOfMonth() and toLastOfMonth() methods.

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

To use any calendar other than the default calendar, you must first import the calendar and the locale of that calendar.

Importing a calendar is required, but in the case of locale, it depends on what you want to do with the date. For example, if formatting the date in locale letters is not important to you, or you do not want to format the names of the months and days of the week, you can use the same default locale (gregorian_en), but remember that if you format the first month of each calendar with the default locale ( passing MMMM as a parameter to format method), it returns you 'January', which is actually the first month of the default locale (gregorian_en)! But if you format the month number (passing MM as a parameter in the format method) in all locales, ​​you get the same value which is '01'.

So if you want to format the date produced in your favorite calendar in its own locale, you will also need to import that locale too.

Below are some examples of dates in different calendars and locales.

Click on the links below to see the table of all calendars and locales.

To generate the solar Hijri date in the Farsi locale, you must import the persian calendar and persian_fa locale as in the example below:

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

There are several ways to generate a date from a string:

• You can insert that string directly into the DateObject constructor. For this purpose, you should pay attention to the following two items.

  1. If you enter the string directly, the date will be parsed as the Gregorian calendar.

  2. The string must be entered with the following format: year month day hour minute second millisecond meridiem and you can replace the spaces with any character you want.

  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

• If you want to parse a string with a specific format, you must insert that string and format, to an object, and passed it to the DateObject constructor.

  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

  if you want to parse your string on a calendar & locale other than Gregorian & English, you must import that calendar & locale and add them to your object.

  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 دقیقه")
  ); //۱۴ مرداد سال ۱۴۰۰, ساعت ۱۸ و ۳۵ دقیقه

The important point that I am often asked about and I have to explain to you at the end, is about parsing the Gregorian date and converting it into other calendars.

Suppose you want to convert the date 2021/01/01 to the Persian (Solar Hijri) calendar, a mistake that most people make is that they parse the Gregorian string with the Persian calendar:

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
})

This is wrong because by doing this you are actually parsing the 2021 Persian date!

The correct way is to first parse the current date on its own calendar (which is Gregorian), and then convert it to the target calendar (which is Persian):

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)

In the above case, your string will first parse as the valid Gregorian date and then it will convert to the Persian calendar. now, if you format your date, you should see the correct result:

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

I will explain more about the convert method in the following sections.

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:2021,
  month:10,
  day:22,
})

console.log(date.format("dddd DD MMMM YYYY")) //Friday 22 October 2021

The Unix timestamp At the moment I am writing this, is 1614678083.

Just note that this value is in seconds and we have to multiply it by 1000 to convert it to milliseconds:

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

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

You can also enter the value for the Gregorian calendar in this way:

const date = new DateObject(1614678083 * 1000)

If you want to know the Unix value of each date, you must use the 'toUnix()' method. For example, for the above variable, if we use the toUnix() method, the same number will be printed for us again:

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

There are many ways to convert dates to each other, but the best one is the convert method.

The convert method needs two parameters, the first one is required and the second one is optional.

The first parameter is actually the calendar you want to convert the current date to, and the second one is the locale of that calendar.

my advice is to enter the second parameter as well if you want to correctly format the name of the month (MMMM) or day of the week (dddd).

If you want to convert any date other than the Gregorian (for example, Solar Hijri) to the Gregorian calendar, you can leave both parameters empty.

Here are some examples of how to convert dates:

In general, to convert two dates to each other, you must do these two steps:

One: generating a date in the current calendar (which is here Gregorian)

Two: Convert the current date to the target calendar (which is Persian)

You can do these two steps separately or continuously, both of which are given in the example below:

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()) //۱۴۰۰/۰۴/۱۴

To convert the Solar Hijri date to Lunar Hijri, you need to import the Persian calendar, Arabic calendar, and arabic locale (arabic_en used here):

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