CSSScript Demos

Azar Datepicker Demos

Add a Jalali or Gregorian date/time picker to any input with Azar Datepicker.

01 Jalali

Auto-loaded Jalali Date

Loads the current Jalali date into the field and keeps the clear button enabled.

Select a Jalali date

02 DateTime

Uses Gregorian datetime mode with a custom input format and a separate output format.

Pick a date and time

03 Time

Shows the current time on load and skips the calendar view entirely.

Select a time

04 Range

Limits selection to dates from 1405/01/01 through 1405/06/31.

Choose a date in range

05 Min / Max

Restricts Gregorian dates to 2025-01-01 through 2026-12-31.

Select a Gregorian date

06 Pinned

Hides the calendar switcher and keeps the picker open after a date is selected.

Select without auto-close

07 LTR

Forces left-to-right direction while keeping the Jalali calendar active.

Select an LTR Jalali date

08 Events

Updates the live log when onSelect, onChange, or onClear fires.

Trigger picker callbacks

Waiting for a picker event.

09 Extended

This extended section adds a data-attribute datetime field and keeps the original dark-mode refresh behavior available for every picker.

Auto-init datetime field

Picker theme controls