jalali-js playground (Vanilla / Web Components)

Vanilla playground · React playground · Vue playground

Dark mode English (unchecked: Farsi)

No framework anywhere on this page: @jalali-js/web and @jalali-js/ui-web are plain Web Components (custom elements), rendered in light DOM (no shadow root), so the exact same date-picker.css that styles the React and Vue bindings styles these too. The compact theme is always on below, for spacing; the dark theme is what the toggle above controls. The language toggle controls every component below except the two explicit English/Farsi comparison sections, which always show both at once.

Grid variant, English, Jalali system

Stored value (Gregorian by default): null

Grid variant, Farsi

Quick year/month navigation (default on)

Click the month or year in the header to jump straight to a month grid or year grid.

Quick navigation turned off (quickNav: false)

The month and year in the header are plain text; only the prev/next arrows page.

No initial selection (defaultDate: null)

Opens with nothing picked, showing the placeholder until a person picks a date.

Dropdown variant (date-of-birth style entry)

Gregorian system

Inline calendar (@jalali-js/ui-web)

Selected: none

Range picker (@jalali-js/ui-web)

Stored range (Gregorian by default): null

Time picker

Hour and minute selects, with a 15-minute step.

Selected time: null

Date and time (precision: datetime)

Stored value (Gregorian by default): null

Time range picker (@jalali-js/ui-web)

Selected range: null

Selection rules (min/max, blocked dates, blocked weekdays)

Mordad 1403 with rules: selectable from the 5th to the 28th, the 12th is blocked, and the Thursday/Friday weekend is blocked. Blocked days render disabled (data-disabled) and reject clicks, and the Tab order skips them. The rules object is a JS property (see main.ts), not an attribute.

Custom CSS override (consumer-configured, not a shipped theme file)

A consumer can retheme a picker by overriding the --jalali-* custom properties, with no theme file at all. This section follows architecture.md's own documented pattern: a scoped selector under a parent class (see the "Theming contract" section there).