Date Formats

Handle different date formats in the React Calendar component.

Documentation

Format Tokens

Token	Description	Example
YYYY	4-digit year	2024
YY	2-digit year	24
MMMM	Full month name	January
MMM	Short month name	Jan
MM	Month with zero (01-12)	01
M	Month (1-12)	1
DDDD	Full day name	Monday
DDD	Short day name	Mon
DD	Day with zero (01-31)	05
D	Day (1-31)	5
HH	Hour 24h with zero (00-23)	09
H	Hour 24h (0-23)	9
hh	Hour 12h with zero (01-12)	09
h	Hour 12h (1-12)	9
mm	Minutes with zero (00-59)	05
m	Minutes (0-59)	5
ss	Seconds with zero (00-59)	08
s	Seconds (0-59)	8
AM/PM	Uppercase meridiem	AM
am/pm	Lowercase meridiem	am

Regional Formats

Region	Format	Example
USA	MM/DD/YYYY	12/31/2024
Europe	DD/MM/YYYY	31/12/2024
Germany	DD.MM.YYYY	31.12.2024
Japan	YYYY/MM/DD	2024/12/31
ISO	YYYY-MM-DD	2024-12-31

Supported Input Formats

The calendar accepts ISO strings, Date objects, and Excel serial numbers:

import React from 'react';
import { Calendar } from '@calendarjs/react';

export default function App() {
    return (
        <div>
            {/* ISO string */}
            <Calendar type="inline" value="2024-01-15" />
            {/* Date object */}
            <Calendar type="inline" value={new Date()} />
            {/* Excel serial */}
            <Calendar type="inline" value={45000} numeric={true} />
        </div>
    );
}

Examples

Custom Display Format

Set how dates display using the format property:

import React, { useRef } from 'react';
import { Calendar } from '@calendarjs/react';

export default function App() {
    const inputRef = useRef();

    return (
        <div>
            <input type="text" ref={inputRef} placeholder="Select date" />
            <Calendar
                input={inputRef}
                format="MM/DD/YYYY HH:mm"
                time={true}
            />
        </div>
    );
}

Format Conversion Helpers

Use CalendarJS Helpers for format conversion:

import { Helpers } from '@calendarjs/react';

// Date to Excel serial
const serialNumber = Helpers.dateToNum(new Date());

// Excel serial to date
const dateString = Helpers.numToDate(serialNumber);

// Current date formatted
const now = Helpers.now();

// Two-digit padding
const month = Helpers.two(5); // "05"

Related

CalendarJS Documentation

• Calendar Documentation - Main calendar component
• Internationalization - Multi-language support and localization
• Date Helpers - Date formatting utility functions

Cross-Domain Resources

• jSuites Calendar International Settings - Alternative internationalization approach
• Jspreadsheet Cell Formatting - Date formatting in spreadsheet cells