Date Formats

Handle different date formats in the JavaScript 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:

<script>
const { Calendar } = calendarjs;

// ISO string (recommended)
Calendar(document.getElementById('calendar'), {
    type: 'inline',
    value: '2024-01-15'
});

// Date object
Calendar(element, { value: new Date() });

// Excel serial (with numeric: true)
Calendar(element, { value: 45000, numeric: true });
</script>

import { Calendar } from '@calendarjs/ce';
import '@calendarjs/ce/dist/style.css';

export default function App() {
    return render => render`<div>
        <Calendar type="inline" value="2024-01-15" />
        <Calendar type="inline" value="${new Date()}" />
        <Calendar type="inline" value="${45000}" numeric="true" />
    </div>`;
}

import { Calendar } from '@calendarjs/ce/dist/react';
import '@calendarjs/ce/dist/style.css';

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

<template>
    <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>
</template>

<script>
import { Calendar } from '@calendarjs/ce/dist/vue';
import '@calendarjs/ce/dist/style.css';

export default {
    components: { Calendar }
}
</script>

Examples

Custom Display Format

Set how dates display using the format property:

<html>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@calendarjs/ce/dist/style.min.css" />
<script src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@calendarjs/ce/dist/index.min.js"></script>

<input type="text" id="input" placeholder="Select date" />
<div id="calendar"></div>

<script>
const { Calendar } = calendarjs;

Calendar(document.getElementById('calendar'), {
    input: document.getElementById('input'),
    format: 'MM/DD/YYYY HH:mm',
    time: true
});
</script>
</html>

import { Calendar } from '@calendarjs/ce';
import '@calendarjs/ce/dist/style.css';

export default function App() {
    const self = this;
    self.input = null;

    return render => render`<div>
        <input type="text" :ref="self.input" placeholder="Select date" />
        <Calendar :input="self.input" format="MM/DD/YYYY HH:mm" time="true" />
    </div>`;
}

import { useRef, useState, useEffect } from 'react';
import { Calendar } from '@calendarjs/ce/dist/react';
import '@calendarjs/ce/dist/style.css';

export default function App() {
    const inputRef = useRef();
    const [input, setInput] = useState(null);

    useEffect(() => {
        if (inputRef.current) setInput(inputRef.current);
    }, []);

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

<template>
    <div>
        <input type="text" ref="inputRef" placeholder="Select date" />
        <Calendar :input="$refs.inputRef" format="MM/DD/YYYY HH:mm" :time="true" />
    </div>
</template>

<script>
import { Calendar } from '@calendarjs/ce/dist/vue';
import '@calendarjs/ce/dist/style.css';

export default {
    components: { Calendar }
}
</script>

Format Conversion Helpers

Use CalendarJS Helpers for format conversion:

import { Calendar, Helpers } from '@calendarjs/ce';
import '@calendarjs/ce/dist/style.css';

// 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"

Edit this page on GitHub