mirror of
https://github.com/acamarata/dayjs-hijri-plus.git
synced 2026-07-01 11:14:26 +00:00
96 lines
2.1 KiB
Markdown
96 lines
2.1 KiB
Markdown
# Formatting Examples
|
|
|
|
## Hijri format token reference
|
|
|
|
| Token | Output | Example |
|
|
|---|---|---|
|
|
| `iYYYY` | Full Hijri year | `1444` |
|
|
| `iYY` | 2-digit Hijri year | `44` |
|
|
| `iMMMM` | Full month name | `Ramadan` |
|
|
| `iMMM` | Abbreviated month name | `Ramadan` |
|
|
| `iMM` | 2-digit month number | `09` |
|
|
| `iM` | Month number | `9` |
|
|
| `iDD` | 2-digit day | `01` |
|
|
| `iD` | Day number | `1` |
|
|
| `iEEEE` | Full weekday name | `Yawm al-Khamis` |
|
|
| `iEEE` | Short weekday name | `Kham` |
|
|
| `iE` | Weekday number | `5` (1=Sunday) |
|
|
| `ioooo` | Era | `AH` |
|
|
|
|
Tokens not prefixed with `i` pass through to Day.js `.format()` as Gregorian tokens.
|
|
|
|
## Common format patterns
|
|
|
|
```typescript
|
|
import dayjs from 'dayjs';
|
|
import hijriPlugin from 'dayjs-hijri-plus';
|
|
|
|
dayjs.extend(hijriPlugin);
|
|
|
|
const d = dayjs('2023-03-23');
|
|
|
|
// Day Month Year (long)
|
|
d.formatHijri('iD iMMMM iYYYY');
|
|
// '1 Ramadan 1444'
|
|
|
|
// Numeric date
|
|
d.formatHijri('iDD/iMM/iYYYY');
|
|
// '01/09/1444'
|
|
|
|
// Short month name
|
|
d.formatHijri('iD iMMM iYYYY');
|
|
// '1 Ramadan 1444'
|
|
|
|
// Combined Gregorian and Hijri
|
|
d.formatHijri('YYYY-MM-DD (iD iMMMM iYYYY)');
|
|
// '2023-03-23 (1 Ramadan 1444)'
|
|
|
|
// ISO-style Hijri
|
|
d.formatHijri('iYYYY-iMM-iDD');
|
|
// '1444-09-01'
|
|
```
|
|
|
|
## Hijri month names
|
|
|
|
```typescript
|
|
// iMMMM returns the standard transliteration for each month
|
|
for (let m = 1; m <= 12; m++) {
|
|
const d = dayjs.fromHijri(1444, m, 1);
|
|
console.log(d.formatHijri('iM iMMMM'));
|
|
}
|
|
// 1 Muharram
|
|
// 2 Safar
|
|
// 3 Rabi' al-Awwal
|
|
// ...
|
|
// 9 Ramadan
|
|
// ...
|
|
// 12 Dhu al-Hijjah
|
|
```
|
|
|
|
## React component example
|
|
|
|
```tsx
|
|
import dayjs from 'dayjs';
|
|
import hijriPlugin from 'dayjs-hijri-plus';
|
|
|
|
dayjs.extend(hijriPlugin);
|
|
|
|
interface HijriDateDisplayProps {
|
|
date: Date;
|
|
}
|
|
|
|
function HijriDateDisplay({ date }: HijriDateDisplayProps) {
|
|
const d = dayjs(date);
|
|
const gregorianIso = d.format('YYYY-MM-DD');
|
|
const hijriFormatted = d.formatHijri('iD iMMMM iYYYY');
|
|
|
|
return (
|
|
<time dateTime={gregorianIso}>
|
|
{hijriFormatted || gregorianIso}
|
|
</time>
|
|
);
|
|
}
|
|
|
|
// Usage: <HijriDateDisplay date={new Date('2023-03-23')} />
|
|
// Renders: <time datetime="2023-03-23">1 Ramadan 1444</time>
|
|
```
|