You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1036 lines
27 KiB
1036 lines
27 KiB
2 years ago
|
# Date Object
|
||
|
|
||
|
supported calendars: `gregorian` , `persian` , `arabic` , `indian`
|
||
|
default: `gregorian`
|
||
|
|
||
|
supported locales: `en` , `fa` , `ar` , `hi`
|
||
|
default: `en`
|
||
|
|
||
|
NodeJs: [date-object](https://github.com/shahabyazdi/date-object)
|
||
|
|
||
|
[Descriptions](https://shahabyazdi.github.io/react-multi-date-picker/date-object/)
|
||
|
|
||
|
# Versions before 2.0.0
|
||
|
|
||
|
The way to entering `calendars` and `locales` for the versions before 2.0.0 is different.
|
||
|
|
||
|
To see the readme file for v1.x click <a href="https://github.com/shahabyazdi/react-date-object/tree/v1.x#readme" target="_blank">here</a>
|
||
|
|
||
|
# 1- Install
|
||
|
|
||
|
## 1-1- npm:
|
||
|
|
||
|
```shell
|
||
|
npm install react-date-object --save
|
||
|
```
|
||
|
|
||
|
## 1-2- yarn:
|
||
|
|
||
|
```shell
|
||
|
yarn add react-date-object
|
||
|
```
|
||
|
|
||
|
# 2- Usage
|
||
|
|
||
|
```javascript
|
||
|
import DateObject from "react-date-object";
|
||
|
|
||
|
var date = new DateObject();
|
||
|
|
||
|
console.log(date.format()); //2021/06/10
|
||
|
```
|
||
|
|
||
|
# 3- Calendars & Locales
|
||
|
|
||
|
**If you want to use a Calendar or a Locale other than Gregorian and English :**
|
||
|
|
||
|
<table>
|
||
|
<tbody>
|
||
|
<tr>
|
||
|
<th colspan="2" rowspan="2">Calendars</th>
|
||
|
<th>Gregorian</th>
|
||
|
<th>Persian (Solar Hijri)</th>
|
||
|
<th>Jalali</th>
|
||
|
<th>Arabic (Lunar Hijri)</th>
|
||
|
<th>Indian</th>
|
||
|
</tr>
|
||
|
<tr>
|
||
|
<td>/calendars/gregorian</td>
|
||
|
<td>/calendars/persian</td>
|
||
|
<td>/calendars/jalali</td>
|
||
|
<td>/calendars/arabic</td>
|
||
|
<td>/calendars/indian</td>
|
||
|
</tr>
|
||
|
<tr>
|
||
|
<th rowspan="4">Locales</th>
|
||
|
<th>English</th>
|
||
|
<td>/locales/gregorian_en</td>
|
||
|
<td>/locales/persian_en</td>
|
||
|
<td>/locales/persian_en</td>
|
||
|
<td>/locales/arabic_en</td>
|
||
|
<td>/locales/indian_en</td>
|
||
|
</tr>
|
||
|
|
||
|
<tr>
|
||
|
<th>Farsi</th>
|
||
|
<td>/locales/gregorian_fa</td>
|
||
|
<td>/locales/persian_fa</td>
|
||
|
<td>/locales/persian_fa</td>
|
||
|
<td>/locales/arabic_fa</td>
|
||
|
<td>/locales/indian_fa</td>
|
||
|
</tr>
|
||
|
|
||
|
<tr>
|
||
|
<th>Arabic</th>
|
||
|
<td>/locales/gregorian_ar</td>
|
||
|
<td>/locales/persian_ar</td>
|
||
|
<td>/locales/persian_ar</td>
|
||
|
<td>/locales/arabic_ar</td>
|
||
|
<td>/locales/indian_ar</td>
|
||
|
</tr>
|
||
|
|
||
|
<tr>
|
||
|
<th>Hindi</th>
|
||
|
<td>/locales/gregorian_hi</td>
|
||
|
<td>/locales/persian_hi</td>
|
||
|
<td>/locales/persian_hi</td>
|
||
|
<td>/locales/arabic_hi</td>
|
||
|
<td>/locales/indian_hi</td>
|
||
|
</tr>
|
||
|
|
||
|
</tbody>
|
||
|
</table>
|
||
|
|
||
|
<br>
|
||
|
|
||
|
<details>
|
||
|
<summary>Examples</summary>
|
||
|
|
||
|
## 3-1- Persian Calendar, Farsi Locale
|
||
|
|
||
|
```javascript
|
||
|
import DateObject from "react-date-object";
|
||
|
import persian from "react-date-object/calendars/persian";
|
||
|
import persian_fa from "react-date-object/locales/persian_fa";
|
||
|
|
||
|
var date = new DateObject({ calendar: persian, locale: persian_fa });
|
||
|
|
||
|
console.log(date.format()); //۱۴۰۰/۰۳/۲۰
|
||
|
```
|
||
|
|
||
|
## 3-2- Arabic Calendar, Arabic Locale
|
||
|
|
||
|
```javascript
|
||
|
import DateObject from "react-date-object";
|
||
|
import arabic from "react-date-object/calendars/arabic";
|
||
|
import arabic_ar from "react-date-object/locales/arabic_ar";
|
||
|
|
||
|
var date = new DateObject({ calendar: arabic, locale: arabic_ar });
|
||
|
|
||
|
console.log(date.format()); //١٤٤٢/١٠/٢٩
|
||
|
```
|
||
|
|
||
|
## 3-3- Indiann Calendar, Hindi Locale
|
||
|
|
||
|
```javascript
|
||
|
import DateObject from "react-date-object";
|
||
|
import indian from "react-date-object/calendars/indian";
|
||
|
import indian_hi from "react-date-object/locales/indian_hi";
|
||
|
|
||
|
var date = new DateObject({ calendar: indian, locale: indian_hi });
|
||
|
|
||
|
console.log(date.format()); //१९४३/०३/२०
|
||
|
```
|
||
|
|
||
|
</details>
|
||
|
|
||
|
<br>
|
||
|
|
||
|
# 4- Examples
|
||
|
|
||
|
## 4-1- new instance
|
||
|
|
||
|
### 4-1-1- String (year month day hour minute second millisecond meridiem)
|
||
|
|
||
|
```javascript
|
||
|
import DateObject from "react-date-object";
|
||
|
|
||
|
var date = new DateObject("2020 8 21 11 55 36 100 am");
|
||
|
|
||
|
console.log(date.format("YYYY/MM/DD hh:mm:ss.SSS a")); //2020/08/21 11:55:36.100 am
|
||
|
|
||
|
date = new DateObject("2020/08/01");
|
||
|
|
||
|
console.log(date.format("YYYY/MM/DD hh:mm:ss.SSS a")); //2020/08/01 12:00:00.000 am
|
||
|
```
|
||
|
|
||
|
### 4-1-2- Number (unix time in milliseconds)
|
||
|
|
||
|
```javascript
|
||
|
import DateObject from "react-date-object";
|
||
|
|
||
|
var date = new DateObject(1597994736000);
|
||
|
|
||
|
console.log(date.format("dddd DD MMMM @ hh:mm:ss.SSS a")); //Friday 21 August @ 11:55:36.000 am
|
||
|
```
|
||
|
|
||
|
### 4-1-3- JavaScript Date
|
||
|
|
||
|
```javascript
|
||
|
import DateObject from "react-date-object";
|
||
|
|
||
|
var $date = new Date(2019, 8, 20);
|
||
|
var date = new DateObject($date);
|
||
|
|
||
|
console.log(date.format()); //2019/09/20
|
||
|
```
|
||
|
|
||
|
### 4-1-4- DateObject
|
||
|
|
||
|
```javascript
|
||
|
import DateObject from "react-date-object";
|
||
|
|
||
|
var $date = new DateObject("2019/09/20");
|
||
|
var date = new DateObject($date);
|
||
|
|
||
|
console.log(date.format()); //2019/09/20
|
||
|
```
|
||
|
|
||
|
### 4-1-5- Object
|
||
|
|
||
|
#### 4-1-5-1-
|
||
|
|
||
|
```javascript
|
||
|
{
|
||
|
date: String , Number(unix time in milliseconds), Date or DateObject, //default new Date()
|
||
|
calendar: Calendar, //default gregorian
|
||
|
locale: Locale, //default en
|
||
|
format: String, //default `YYYY/MM/DD`
|
||
|
ignoreList:Array//If the format contained words that should be ignored
|
||
|
}
|
||
|
|
||
|
```
|
||
|
|
||
|
```javascript
|
||
|
import DateObject from "react-date-object";
|
||
|
import persian from "react-date-object/calendars/persian";
|
||
|
import persian_fa from "react-date-object/locales/persian_fa";
|
||
|
import persian_en from "react-date-object/locales/persian_en";
|
||
|
|
||
|
var date = new DateObject({
|
||
|
date: new Date(),
|
||
|
});
|
||
|
|
||
|
console.log(date.format()); //2020/08/21
|
||
|
|
||
|
date = new DateObject({
|
||
|
date: new Date(),
|
||
|
calendar: persian,
|
||
|
locale: persian_fa,
|
||
|
});
|
||
|
|
||
|
console.log(date.format()); //۱۳۹۹/۰۵/۳۱
|
||
|
|
||
|
date = new DateObject({
|
||
|
date: "31 Mordad 1399",
|
||
|
format: "DD MMMM YYYY",
|
||
|
calendar: persian,
|
||
|
locale: persian_en,
|
||
|
});
|
||
|
|
||
|
console.log(date.format()); //31 Mordad 1399
|
||
|
```
|
||
|
|
||
|
#### 4-1-5-2-
|
||
|
|
||
|
```javascript
|
||
|
{
|
||
|
year: Number,
|
||
|
month: Number,
|
||
|
day: Number,
|
||
|
hour: Number, //default 0
|
||
|
minute: Number, //default 0
|
||
|
second: Number, //default 0
|
||
|
millisecond: Number, //default 0
|
||
|
calendar: Calendar, //default gregorian
|
||
|
locale: Locale, //default en
|
||
|
format: String, //default `YYYY/MM/DD`
|
||
|
ignoreList:Array//If the format contained words that should be ignored
|
||
|
}
|
||
|
|
||
|
```
|
||
|
|
||
|
```javascript
|
||
|
import DateObject from "react-date-object";
|
||
|
import persian from "react-date-object/calendars/persian";
|
||
|
import persian_en from "react-date-object/locales/persian_en";
|
||
|
import persian_fa from "react-date-object/locales/persian_fa";
|
||
|
|
||
|
var date = new DateObject({
|
||
|
year: 2020,
|
||
|
month: 8,
|
||
|
day: 21,
|
||
|
hour: 12,
|
||
|
minute: 20,
|
||
|
second: 36,
|
||
|
milisecond: 152,
|
||
|
format: "dddd DD MMMM YYYY",
|
||
|
});
|
||
|
|
||
|
console.log(date.format()); //Friday 21 August 2020
|
||
|
|
||
|
date = new DateObject({
|
||
|
year: 1399,
|
||
|
month: 5,
|
||
|
day: 31,
|
||
|
calendar: persian,
|
||
|
locale: persian_en,
|
||
|
format: "dddd DD MMMM YYYY",
|
||
|
});
|
||
|
|
||
|
console.log(date.format()); //Jomeh 31 Mordad 1399
|
||
|
|
||
|
date = new DateObject({
|
||
|
year: 1399,
|
||
|
month: 5,
|
||
|
day: 31,
|
||
|
calendar: persian,
|
||
|
locale: persian_fa,
|
||
|
format: "dddd DD MMMM YYYY",
|
||
|
});
|
||
|
|
||
|
console.log(date.format()); //جمعه ۳۱ مرداد ۱۳۹۹
|
||
|
```
|
||
|
|
||
|
## 4-2- convert(calendar:Calendar, locale?:Locale)
|
||
|
|
||
|
If you use the convert method without argument, the date will be converted to Gregorian calendar.
|
||
|
|
||
|
The second argument (Locale) is optional.
|
||
|
|
||
|
```javascript
|
||
|
import DateObject from "react-date-object";
|
||
|
import gregorian from "react-date-object/calendars/gregorian";
|
||
|
import persian from "react-date-object/calendars/persian";
|
||
|
import arabic from "react-date-object/calendars/arabic";
|
||
|
import indian from "react-date-object/calendars/indian";
|
||
|
|
||
|
var date = new DateObject();
|
||
|
|
||
|
console.log(date.format()); //2020/10/31
|
||
|
|
||
|
date.convert(persian);
|
||
|
console.log(date.format()); //1399/08/10
|
||
|
|
||
|
date.convert(arabic);
|
||
|
console.log(date.format()); //1442/03/14
|
||
|
|
||
|
date.convert(indian);
|
||
|
console.log(date.format()); //1942/08/09
|
||
|
|
||
|
date.convert(gregorian); //or date.convert()
|
||
|
console.log(date.format()); //2020/10/31
|
||
|
```
|
||
|
|
||
|
## 4-3- format(token:String)
|
||
|
|
||
|
default format is YYYY/MM/DD.
|
||
|
to see all format types click [here](#5--Formatting-Tokens)
|
||
|
|
||
|
```javascript
|
||
|
import DateObject from "react-date-object";
|
||
|
|
||
|
var date = new DateObject();
|
||
|
|
||
|
consoel.log(date.format()); //2020/10/31
|
||
|
consoel.log(date.format("MM/DD/YYYY")); //10/31/2020
|
||
|
consoel.log(date.format("MMM/DD/YYYY HH:mm:ss")); //Oct/31/2020 18:17:28
|
||
|
consoel.log(date.format("dddd DD MMMM YYYY, hh:mm:ss A")); //Saturday 31 October 2020, 06:19:18 PM
|
||
|
consoel.log(date.format("ddd DD MMM YYYY, hh:mm a")); //Sat 31 Oct 2020, 06:20 pm
|
||
|
```
|
||
|
|
||
|
### formatting with ignore list:
|
||
|
|
||
|
```javascript
|
||
|
import DateObject from "react-date-object";
|
||
|
|
||
|
var date = new DateObject();
|
||
|
|
||
|
console.log(
|
||
|
date.format("hours:HH minutes:mm seconds:ss", ["hours", "minutes", "seconds"])
|
||
|
); //hours:12 minutes:22 seconds:40
|
||
|
|
||
|
console.log(date.format("it's HH o'clock", ["it's", "o'clock"])); //it's 12 o'clock
|
||
|
|
||
|
console.log(
|
||
|
date.format(`DD MMMM at hh:mm ${date.hour >= 12 ? "Afternoon" : "Morning"}`, [
|
||
|
"at",
|
||
|
"Afternoon",
|
||
|
"Morning",
|
||
|
])
|
||
|
); //11 November at 12:22 Afternoon
|
||
|
```
|
||
|
|
||
|
## 4-4- setter methods
|
||
|
|
||
|
```javascript
|
||
|
import DateObject from "react-date-object";
|
||
|
import gregorian from "react-date-object/calendars/gregorian";
|
||
|
import persian from "react-date-object/calendars/persian";
|
||
|
import indian from "react-date-object/calendars/indian";
|
||
|
import gregorian_en from "react-date-object/locales/gregorian_en";
|
||
|
import persian_en from "react-date-object/locales/persian_en";
|
||
|
import indian_en from "react-date-object/locales/indian_en";
|
||
|
|
||
|
var date = new DateObject();
|
||
|
|
||
|
date
|
||
|
.setCalendar(gregorian)
|
||
|
.setFormat("YYYY-MM-DD HH:mm:ss.SSS")
|
||
|
.setLocale(gregorian_en)
|
||
|
.setYear(2020)
|
||
|
.setMonth(9)
|
||
|
.setDay(21)
|
||
|
.setHour(12)
|
||
|
.setMinute(20)
|
||
|
.setSecond(14)
|
||
|
.setMillisecond(200);
|
||
|
|
||
|
console.log(date.format()); //2020-09-21 12:20:14.200
|
||
|
|
||
|
date
|
||
|
.setCalendar(persian)
|
||
|
.setLocale(persian_en)
|
||
|
.setYear(1399)
|
||
|
.setMonth(9)
|
||
|
.setDay(21)
|
||
|
.setFormat("dddd DD MMMM YYYY");
|
||
|
|
||
|
console.log(date.format()); //Jom'eh 21 Azar 1399
|
||
|
|
||
|
date.setDate(new Date(2020, 9, 27)).setLocale(gregorian_en); //(calendar is set to gregorian)
|
||
|
|
||
|
console.log(date.format()); //Tuesday 27 October 2020
|
||
|
|
||
|
date.setDate(
|
||
|
new DateObject({
|
||
|
calendar: indian,
|
||
|
locale: indian_en,
|
||
|
year: 1942,
|
||
|
month: 8,
|
||
|
day: 5,
|
||
|
})
|
||
|
); //format is set based on given DateObject (default:YYYY/MM/DD)
|
||
|
|
||
|
console.log(date.format()); //1942/08/05
|
||
|
```
|
||
|
|
||
|
## 4-5- get and set
|
||
|
|
||
|
```javascript
|
||
|
import DateObject from "react-date-object";
|
||
|
|
||
|
var date = new DateObject();
|
||
|
|
||
|
console.log(date.format()); //2020/08/21
|
||
|
|
||
|
date.year += 2;
|
||
|
date.month += 2;
|
||
|
date.day += 2;
|
||
|
date.hour += 2;
|
||
|
date.minute += 2;
|
||
|
date.second += 2;
|
||
|
date.millisecond += 2;
|
||
|
|
||
|
console.log(date.format()); //2022/10/23
|
||
|
|
||
|
console.log(date.month);
|
||
|
|
||
|
/**
|
||
|
* {
|
||
|
* name: 'October',
|
||
|
* shortName: 'Oct',
|
||
|
* length: 31,
|
||
|
* index: 9,
|
||
|
* number: 10,
|
||
|
* toString: [Function (anonymous)]
|
||
|
* }
|
||
|
*/
|
||
|
|
||
|
console.log(date.weekDay);
|
||
|
|
||
|
/**
|
||
|
* {
|
||
|
* name: 'Sunday',
|
||
|
* shortName: 'Sun',
|
||
|
* index: 0,
|
||
|
* number: 1,
|
||
|
* toString: [Function (anonymous)]
|
||
|
* }
|
||
|
*/
|
||
|
|
||
|
var { year, month, weekDay, day } = date;
|
||
|
|
||
|
console.log(`${weekDay.name} ${year}/${month}/${day}`); //Sunday 2022/10/23
|
||
|
|
||
|
date.year = 2020;
|
||
|
date.month = 8;
|
||
|
date.day = 21;
|
||
|
|
||
|
date.isLeap; //true
|
||
|
date.isValid; //true
|
||
|
date.isUTC; //false
|
||
|
date.month.name; //August
|
||
|
date.month.length; //31
|
||
|
date.month.index; //7
|
||
|
date.month.number; //8
|
||
|
|
||
|
date.weekDay.name; //Friday
|
||
|
date.weekDay.index; //5
|
||
|
date.weekDay.number; //6
|
||
|
|
||
|
date.dayOfBeginning; //737658
|
||
|
date.dayOfYear; //234
|
||
|
date.daysLeft; //132
|
||
|
date.weekOfYear; //34
|
||
|
date.unix; //1597951800 (unix time in seconds)
|
||
|
|
||
|
date.weekDays; // array [{ name: 'Sunday', shortName: 'Sun', ...}]
|
||
|
date.months; //array [{ name: 'January', shortName: 'Jan', ...}]
|
||
|
date.leaps; //array [4, 8, 12, 16, 20,...]
|
||
|
|
||
|
date.calendar.name; //gregorian
|
||
|
```
|
||
|
|
||
|
## 4-6- parse(date:String)
|
||
|
|
||
|
Remember that parsing date is based on the format you set
|
||
|
|
||
|
```javascript
|
||
|
import DateObject from "react-date-object";
|
||
|
import persian from "react-date-object/calendars/persian";
|
||
|
import persian_en from "react-date-object/locales/persian_en";
|
||
|
|
||
|
var date = new DateObject();
|
||
|
|
||
|
date._format = "dddd DD MMMM YYYY";
|
||
|
|
||
|
date.parse("Monday 24 August 2020");
|
||
|
console.log(date.format("YYYY/MM/DD")); //2020/08/24
|
||
|
|
||
|
date.parse("Friday 07 August 2020");
|
||
|
console.log(date.format("YYYY-MM-DD")); //2020-08-07
|
||
|
|
||
|
date
|
||
|
.setCalendar(persian)
|
||
|
.setLocale(persian_en)
|
||
|
.setFormat("YYYY/MM/DD")
|
||
|
.parse("1399/06/03");
|
||
|
console.log(date.format()); //1399/06/03
|
||
|
|
||
|
date.setFormat("YYYY/MM/DD HH:mm").parse("1399/06/03 12:32");
|
||
|
console.log(date.format("dddd DD MMMM @ hh:mm a")); //Doshanbeh 03 Shahrivar @ 12:32 pm
|
||
|
```
|
||
|
|
||
|
## 4-7- getValue
|
||
|
|
||
|
```javascript
|
||
|
import DateObject from "react-date-object";
|
||
|
import arabic_ar from "react-date-object/locales/arabic_ar.js";
|
||
|
|
||
|
var date = new DateObject({
|
||
|
date: "1442/01/01",
|
||
|
calendar: arabic,
|
||
|
locale: arabic_ar,
|
||
|
});
|
||
|
|
||
|
console.log(date.getValue("M")); //1
|
||
|
console.log(date.format("M")); //١
|
||
|
|
||
|
console.log(typeof date.getValue("D")); //number
|
||
|
console.log(typeof date.format("D")); //string
|
||
|
|
||
|
console.log(Number(date.getValue("YYYY"))); //1442
|
||
|
console.log(Number(date.format("YYYY"))); //NaN
|
||
|
```
|
||
|
|
||
|
## 4-8- add(duration:Number or String,type:String)
|
||
|
|
||
|
<table>
|
||
|
<tr>
|
||
|
<th colspan="3">Types</td>
|
||
|
</tr>
|
||
|
<tr>
|
||
|
<td>years</td>
|
||
|
<td>year</td>
|
||
|
<td>y</td>
|
||
|
</tr>
|
||
|
<tr>
|
||
|
<td>months</td>
|
||
|
<td>month</td>
|
||
|
<td>M</td>
|
||
|
</tr>
|
||
|
<tr>
|
||
|
<td>days</td>
|
||
|
<td>day</td>
|
||
|
<td>d</td>
|
||
|
</tr>
|
||
|
<tr>
|
||
|
<td>hours</td>
|
||
|
<td>hour</td>
|
||
|
<td>h</td>
|
||
|
</tr>
|
||
|
<tr>
|
||
|
<td>minutes</td>
|
||
|
<td>minute</td>
|
||
|
<td>m</td>
|
||
|
</tr>
|
||
|
<tr>
|
||
|
<td>seconds</td>
|
||
|
<td>second</td>
|
||
|
<td>s</td>
|
||
|
</tr>
|
||
|
<tr>
|
||
|
<td>milliseconds</td>
|
||
|
<td>millisecond</td>
|
||
|
<td>ms</td>
|
||
|
</tr>
|
||
|
</table>
|
||
|
|
||
|
```javascript
|
||
|
import DateObject from "react-date-object";
|
||
|
|
||
|
var date = new DateObject("2020/10/07 5:35:24 pm");
|
||
|
|
||
|
date.setFormat("YYYY/MM/DD hh:mm:ss.SSS");
|
||
|
|
||
|
console.log(date.add(2, "years").format()); //2022/10/07 05:35:24.000
|
||
|
console.log(date.add("1", "month").format()); //2022/11/07 05:35:24.000
|
||
|
console.log(date.add(3, "d").format()); //2022/11/10 05:35:24.000
|
||
|
console.log(date.add(4, "hours").format()); //2022/11/10 09:35:24.000
|
||
|
console.log(date.add(1, "minute").format()); //2022/11/10 09:36:24.000
|
||
|
console.log(date.add("20", "s").format()); //2022/11/10 09:36:44.000
|
||
|
console.log(date.add(100, "milliseconds").format()); //2022/11/10 09:36:44.100
|
||
|
```
|
||
|
|
||
|
## 4-9- subtract(duration:Number or String,type:String)
|
||
|
|
||
|
<table>
|
||
|
<tr>
|
||
|
<th colspan="3">Types</td>
|
||
|
</tr>
|
||
|
<tr>
|
||
|
<td>years</td>
|
||
|
<td>year</td>
|
||
|
<td>y</td>
|
||
|
</tr>
|
||
|
<tr>
|
||
|
<td>months</td>
|
||
|
<td>month</td>
|
||
|
<td>M</td>
|
||
|
</tr>
|
||
|
<tr>
|
||
|
<td>days</td>
|
||
|
<td>day</td>
|
||
|
<td>d</td>
|
||
|
</tr>
|
||
|
<tr>
|
||
|
<td>hours</td>
|
||
|
<td>hour</td>
|
||
|
<td>h</td>
|
||
|
</tr>
|
||
|
<tr>
|
||
|
<td>minutes</td>
|
||
|
<td>minute</td>
|
||
|
<td>m</td>
|
||
|
</tr>
|
||
|
<tr>
|
||
|
<td>seconds</td>
|
||
|
<td>second</td>
|
||
|
<td>s</td>
|
||
|
</tr>
|
||
|
<tr>
|
||
|
<td>milliseconds</td>
|
||
|
<td>millisecond</td>
|
||
|
<td>ms</td>
|
||
|
</tr>
|
||
|
</table>
|
||
|
|
||
|
```javascript
|
||
|
import DateObject from "react-date-object";
|
||
|
|
||
|
var yesterday = new DateObject().subtract(1, "day");
|
||
|
```
|
||
|
|
||
|
## 4-10- set method
|
||
|
|
||
|
### 4-10-1 set(key:String,value:Any)
|
||
|
|
||
|
```javascript
|
||
|
import DateObject from "react-date-object";
|
||
|
import indian from "react-date-object/calendars/indian";
|
||
|
import persian from "react-date-object/calendars/persian";
|
||
|
import indian_hi from "react-date-object/locales/indian_hi";
|
||
|
import persian_en from "react-date-object/locales/persian_en";
|
||
|
|
||
|
var date = new DateObject(); //2020/10/31
|
||
|
|
||
|
console.log(date.set("year", 2021)); //2021/10/31
|
||
|
console.log(date.set("month", 1)); //2021/01/31
|
||
|
console.log(date.set("day", 7)); //2021/01/07
|
||
|
console.log(date.set("format", "MM/DD/YYYY")); //01/07/2021
|
||
|
console.log(date.set("calendar", indian)); //10/17/1942
|
||
|
console.log(date.set("locale", indian_hi)); //१०/१७/१९४२
|
||
|
console.log(date.set("date", new Date())); //2020/10/31 (calendar is set to gregorian)
|
||
|
console.log(
|
||
|
date.set("date", new DateObject({ calendar: persian, locale: persian_en }))
|
||
|
); //1399/08/10 (calendar & locale is set to given values)
|
||
|
```
|
||
|
|
||
|
### 4-10-2 set(object)
|
||
|
|
||
|
```javascript
|
||
|
import DateObject from "react-date-object/index";
|
||
|
import persian from "react-date-object/calendars/persian";
|
||
|
import gregorian from "react-date-object/calendars/gregorian";
|
||
|
import persian_en from "react-date-object/locales/persian_en";
|
||
|
import gregorian_en from "react-date-object/locales/gregorian_en";
|
||
|
|
||
|
var date = new DateObject(); //2020/10/31
|
||
|
|
||
|
console.log(
|
||
|
date
|
||
|
.set({ calendar: persian, locale: persian_en, format: "dddd DD MMMM YYYY" })
|
||
|
.format()
|
||
|
); //Shanbeh 10 Aban 1399
|
||
|
|
||
|
console.log(
|
||
|
date
|
||
|
.set({
|
||
|
calendar: gregorian,
|
||
|
locale: gregorian_en,
|
||
|
year: 2020,
|
||
|
month: 11,
|
||
|
day: 12,
|
||
|
})
|
||
|
.format()
|
||
|
); //Saturday 12 December 2020
|
||
|
|
||
|
console.log(date.set(new DateObject().toObject()).format()); //2020/10/31
|
||
|
|
||
|
console.log(
|
||
|
date.set({ format: "Date:MM/DD/YYYY", ignoreList: ["Date"] }).format()
|
||
|
); //Date:10/31/2020
|
||
|
```
|
||
|
|
||
|
## 4-11- toUTC()
|
||
|
|
||
|
```javascript
|
||
|
import DateObject from "react-date-object";
|
||
|
import arabic from "react-date-object/calendars/arabic";
|
||
|
import gregorian from "react-date-object/calendars/gregorian";
|
||
|
import arabic_en from "react-date-object/locales/arabic_en";
|
||
|
import gregorian_en from "react-date-object/locales/gregorian_en";
|
||
|
|
||
|
var date = new Date(); //Wed Oct 14 2020 11:12:18 GMT+0330
|
||
|
|
||
|
var dateObject = new DateObject({
|
||
|
date,
|
||
|
calendar: arabic,
|
||
|
locale: arabic_en,
|
||
|
format: "ddd, DD MMM YYYY HH:mm:ss",
|
||
|
});
|
||
|
|
||
|
console.log(dateObject.format()); //Arb, 26 Sa 1442 11:12:18
|
||
|
|
||
|
console.log(`
|
||
|
dateUTC : ${date.toUTCString()}
|
||
|
arabicUTC : ${dateObject.toUTC().toString()}
|
||
|
gregorianUTC : ${dateObject.convert(gregorian, gregorian_en).toString()}
|
||
|
`);
|
||
|
|
||
|
/**
|
||
|
* dateUTC : Wed, 14 Oct 2020 07:42:18 GMT
|
||
|
* arabicUTC : Arb, 26 Sa 1442 07:42:18
|
||
|
* gregorianUTC : Wed, 14 Oct 2020 07:42:18
|
||
|
*/
|
||
|
```
|
||
|
|
||
|
## 4-12- custom months, week days & digits
|
||
|
|
||
|
See the example below in case you want to use your personal data instead of default months, week days & digits
|
||
|
|
||
|
```javascript
|
||
|
import DateObject from "react-date-object";
|
||
|
|
||
|
var date = new DateObject();
|
||
|
|
||
|
console.log(date.format("MMMM MMM")); //November Nov
|
||
|
console.log(date.format("dddd ddd")); //Monday Mon
|
||
|
console.log(date.format("D")); //2
|
||
|
|
||
|
date.months = [
|
||
|
["jan", "j"], //[["name","shortName"], ... ]
|
||
|
["feb", "f"],
|
||
|
["mar", "m"],
|
||
|
["apr", "a"],
|
||
|
["may", "m"],
|
||
|
["jun", "j"],
|
||
|
["jul", "j"],
|
||
|
["aug", "a"],
|
||
|
["sep", "s"],
|
||
|
["oct", "o"],
|
||
|
["nov", "n"],
|
||
|
["dec", "d"],
|
||
|
];
|
||
|
|
||
|
date.weekDays = [
|
||
|
["su", "s"], //[["name","shortName"], ... ]
|
||
|
["mo", "m"],
|
||
|
["tu", "t"],
|
||
|
["we", "w"],
|
||
|
["th", "t"],
|
||
|
["fr", "f"],
|
||
|
["sa", "s"],
|
||
|
];
|
||
|
|
||
|
/**
|
||
|
* This is just a test to display digits.
|
||
|
* The Greek number system does not work like this.
|
||
|
*/
|
||
|
date.digits = ["", "I", "II", "III", "IV", "V", "VI", "VII", "VIII", "IX"];
|
||
|
|
||
|
console.log(date.format("MMMM MMM")); //nov n
|
||
|
console.log(date.format("dddd ddd")); //mo m
|
||
|
console.log(date.format("D")); //II
|
||
|
|
||
|
console.log(date.month);
|
||
|
|
||
|
/**
|
||
|
*{
|
||
|
* name: 'nov',
|
||
|
* shortName: 'n',
|
||
|
* length: 30,
|
||
|
* index: 10,
|
||
|
* number: 11,
|
||
|
* toString: [Function (anonymous)]
|
||
|
* valueOf: [Function: valueOf]
|
||
|
*}
|
||
|
*/
|
||
|
|
||
|
console.log(date.weekDay);
|
||
|
|
||
|
/**
|
||
|
*{
|
||
|
* name: 'mo',
|
||
|
* shortName: 'm'
|
||
|
* index: 1,
|
||
|
* number: 2,
|
||
|
* toString: [Function: toString],
|
||
|
* valueOf: [Function: valueOf]
|
||
|
*}
|
||
|
*/
|
||
|
|
||
|
console.log(date.digits);
|
||
|
|
||
|
/**
|
||
|
* [
|
||
|
* '', 'I', 'II',
|
||
|
* 'III', 'IV', 'V',
|
||
|
* 'VI', 'VII', 'VIII',
|
||
|
* 'IX'
|
||
|
* ]
|
||
|
*/
|
||
|
```
|
||
|
|
||
|
You can use `date.setMonths(months).setWeekDays(weekDays).setDigits(digits)` as well
|
||
|
|
||
|
## 4-13- other methods
|
||
|
|
||
|
```javascript
|
||
|
import DateObject from "react-date-object";
|
||
|
|
||
|
var date = new DateObject();
|
||
|
|
||
|
console.log(date.toFirstOfWeek().format()); //2020/08/16
|
||
|
console.log(date.toFirstOfMonth().format()); //2020/08/01
|
||
|
console.log(date.toFirstOfYear().format()); //2020/01/01
|
||
|
console.log(date.toFirstWeekOfYear().format()); //2020/01/05
|
||
|
console.log(date.toLastOfMonth().format()); //2020/01/31
|
||
|
console.log(date.toLastOfWeek().format()); //2020/02/01
|
||
|
console.log(date.toLastOfYear().format()); //2020/12/31
|
||
|
console.log(date.toLastWeekOfYear().format()); //2020/12/27
|
||
|
|
||
|
console.log(date.toString()); //2020/12/27
|
||
|
console.log(date.toDate()); //2020-12-27T07:38:34.724Z
|
||
|
console.log(date.toUnix()); //1609054714 (unix time in seconds)
|
||
|
console.log(date.toJulianDay()); //2459210
|
||
|
console.log(date.toObject());
|
||
|
/**
|
||
|
*{
|
||
|
* year: 2020,
|
||
|
* month: {
|
||
|
* name: 'December',
|
||
|
* shortName: 'Dec',
|
||
|
* length: 31,
|
||
|
* index: 11,
|
||
|
* number: 12,
|
||
|
* toString: [Function: toString],
|
||
|
* valueOf: [Function: valueOf]
|
||
|
* },
|
||
|
* day: 27,
|
||
|
* weekDay: {
|
||
|
* name: 'Sunday',
|
||
|
* shortName: 'Sun',
|
||
|
* index: 0,
|
||
|
* number: 1,
|
||
|
* toString: [Function: toString],
|
||
|
* valueOf: [Function: valueOf]
|
||
|
* },
|
||
|
* hour: 11,
|
||
|
* minute: 8,
|
||
|
* second: 34,
|
||
|
* millisecond: 724,
|
||
|
* weekOfYear: 52,
|
||
|
* dayOfYear: 362,
|
||
|
* daysLeft: 4,
|
||
|
* calendar: {
|
||
|
* name: 'gregorian',
|
||
|
* startYear: 1,
|
||
|
* yearLength: 365,
|
||
|
* epoch: 1721424,
|
||
|
* century: 20,
|
||
|
* weekDaysIndex: [
|
||
|
* 0, 1, 2, 3,
|
||
|
* 4, 5, 6
|
||
|
* ],
|
||
|
* getMonthLengths: [Function: getMonthLengths],
|
||
|
* isLeap: [Function: isLeap],
|
||
|
* getLeaps: [Function: getLeaps],
|
||
|
* getDayOfYear: [Function: getDayOfYear],
|
||
|
* getAllDays: [Function: getAllDays],
|
||
|
* leapsLength: [Function: leapsLength],
|
||
|
* guessYear: [Function: guessYear]
|
||
|
* },
|
||
|
* locale: {
|
||
|
* months: [
|
||
|
* [Array], [Array],
|
||
|
* [Array], [Array],
|
||
|
* [Array], [Array],
|
||
|
* [Array], [Array],
|
||
|
* [Array], [Array],
|
||
|
* [Array], [Array]
|
||
|
* ],
|
||
|
* weekDays: [
|
||
|
* [Array], [Array],
|
||
|
* [Array], [Array],
|
||
|
* [Array], [Array],
|
||
|
* [Array]
|
||
|
* ],
|
||
|
* digits: [
|
||
|
* '0', '1', '2', '3',
|
||
|
* '4', '5', '6', '7',
|
||
|
* '8', '9'
|
||
|
* ],
|
||
|
* meridiems: [ [Array], [Array] ]
|
||
|
* },
|
||
|
* format: 'YYYY/MM/DD',
|
||
|
* ignoreList: []
|
||
|
*}
|
||
|
*/
|
||
|
console.log(date.toJSON()); //1609054714724
|
||
|
|
||
|
console.log(JSON.stringify({ date })); //{"date":1609054714724}
|
||
|
console.log(new DateObject(date.toJSON()).format()); //2020/12/27
|
||
|
```
|
||
|
|
||
|
## 4-14 valueOf()
|
||
|
|
||
|
returns unix time in milliseconds
|
||
|
|
||
|
```javascript
|
||
|
import DateObject from "react-date-object";
|
||
|
import persian_calendar from "react-date-object/calendars/persian";
|
||
|
import arabic_calendar from "react-date-object/calendars/arabic";
|
||
|
import indian_calendar from "react-date-object/calendars/indian";
|
||
|
|
||
|
var gregorian = new DateObject();
|
||
|
var persian = new DateObject({ date: gregorian, calendar: persian_calendar });
|
||
|
var arabic = new DateObject({ date: gregorian, calendar: arabic_calendar });
|
||
|
var indian = new DateObject({ date: gregorian, calendar: indian_calendar });
|
||
|
|
||
|
console.log(gregorian.valueOf(), gregorian.format()); //1604824018304 2020/11/08
|
||
|
console.log(persian.valueOf(), persian.format()); //1604824018304 1399/08/18
|
||
|
console.log(indian.valueOf(), indian.format()); //1604824018304 1942/08/17
|
||
|
console.log(arabic.valueOf(), arabic.format()); //1604824018304 1442/03/22
|
||
|
|
||
|
console.log(persian - gregorian === 0); //true
|
||
|
```
|
||
|
|
||
|
## 4-15- using calendars, format & locales
|
||
|
|
||
|
```javascript
|
||
|
import DateObject from "react-date-object";
|
||
|
import gregorian from "react-date-object/calendars/gregorian";
|
||
|
import persian from "react-date-object/calendars/persian";
|
||
|
import arabic from "react-date-object/calendars/arabic";
|
||
|
import persian_fa from "react-date-object/locales/persian_fa";
|
||
|
import gregorian_en from "react-date-object/locales/gregorian_en";
|
||
|
|
||
|
var date = new DateObject({
|
||
|
calendar: gregorian,
|
||
|
format: "dddd DD MMMM",
|
||
|
});
|
||
|
|
||
|
console.log(date.format()); //Friday 21 August
|
||
|
|
||
|
date.calendar = persian;
|
||
|
date.locale = persian_fa; //جمعه 31 مرداد
|
||
|
console.log(date.format());
|
||
|
|
||
|
date._format = "YY/MM/DD";
|
||
|
console.log(date.format()); //۹۹/۰۵/۳۱
|
||
|
|
||
|
date.setCalendar(gregorian).setLocale(gregorian_en);
|
||
|
console.log(date.format()); //20/08/21
|
||
|
|
||
|
date = new DateObject(new Date());
|
||
|
|
||
|
console.log(date.convert(persian).format()); //1399/05/31
|
||
|
console.log(date.convert(arabic).format()); //1442/01/02
|
||
|
```
|
||
|
|
||
|
# 5- Formatting Tokens
|
||
|
|
||
|
| Token | Example | Description | Availability (Parse /Format) |
|
||
|
| ----- | :---------------------------: | :--------------------------: | ---------------------------- |
|
||
|
| YYYY | 2020 | full year | both |
|
||
|
| YY | 20 | 2 digits year | both |
|
||
|
| MMMM | December | month name | both |
|
||
|
| MMM | Dec | month short name | both |
|
||
|
| MM | 03, 09, 10, ... | 2 digits month number | both |
|
||
|
| M | 3, 9, 10, ... | month number | both |
|
||
|
| DDDD | 09 | day of year | format |
|
||
|
| DDD | 9 | day of year | format |
|
||
|
| DD | 03, 09, 10, 17, ... | 2 digits day of month | both |
|
||
|
| D | 3, 9 ,10, 17 | day of month | both |
|
||
|
| WW | 01, 03, 24, 33, ... | week of year | format |
|
||
|
| W | 1, 3, 24. 33, ... | week of year | format |
|
||
|
| dddd | Saturday, Sunday, Monday, ... | week day name | format |
|
||
|
| ddd | Sat, Sun, Mon, ... | week day short name | format |
|
||
|
| dd | 01,02,...,07 | 2 digits week day number | format |
|
||
|
| d | 1,2,...,7 | week day number | format |
|
||
|
| HH | 03, 09, 10, 17,... | 2 digits hour (24 hour mode) | both |
|
||
|
| H | 3, 9, 10, 17,... | hour (24 hour mode) | both |
|
||
|
| hh | 03, 09, 10, 17,... | 2 digits hour (12 hour mode) | both |
|
||
|
| h | 3, 9, 10, 17,... | hour (12 hour mode) | both |
|
||
|
| mm | 03, 09, 10, 17,... | 2 digits minute | both |
|
||
|
| m | 3, 9, 10, 17,... | minute | both |
|
||
|
| ss | 03, 09, 10, 17,... | 2 digits second | both |
|
||
|
| s | 3, 9, 10, 17,... | second | both |
|
||
|
| SSS | 100 | 3 digits millisecond | both |
|
||
|
| SS | 10 | 2 digits millisecond | both |
|
||
|
| S | 1 | 1 digit millisecond | both |
|
||
|
| A | AM | meridiem | both |
|
||
|
| a | am | meridiem lowercase | both |
|