jalali-js

English

فارسی

English

فارسی

Appearance

Documentation / @jalali-js/ui-web

@jalali-js/ui-web ​

npm versionLicense: MITDocs

Higher-level Web Components on @jalali-js/web: range, inline, event, and time-range pickers, plus extra themes.

Start here: Live demo · Documentation

npm ecosystem: jalali-js · @jalali-js/i18n · @jalali-js/nlp · @jalali-js/holidays · @jalali-js/react · @jalali-js/vue · @jalali-js/web · @jalali-js/ui-react · @jalali-js/ui-vue · @jalali-js/ui-web

Contents ​

Install ​

sh
npm install @jalali-js/ui-web @jalali-js/web
ts
import '@jalali-js/web';
import '@jalali-js/ui-web';
import '@jalali-js/web/date-picker.css';

Compatibility ​

ItemSupport
RuntimeModern browsers with Custom Elements
PeersNone (@jalali-js/web is a normal dependency)
Node22 and 24 (CI matrix)
VerifiedChromium, Firefox, WebKit in e2e

Quick start ​

html
<script type="module">
  import '@jalali-js/web';
  import '@jalali-js/ui-web';
  import '@jalali-js/web/date-picker.css';
</script>

<jalali-range-picker system="jalali" locale="fa"></jalali-range-picker>

Elements ​

ElementRole
<jalali-range-picker>Start and end dates
<jalali-inline-calendar>Always-visible month grid
<jalali-event-calendar>Month / week / day / timeline events
<jalali-time-range-picker>Start and end times

Options ​

Key <jalali-range-picker> attributes:

AttributeValuesDefaultNotes
systemjalali / gregorianjalaliDisplay calendar
localeen / fa / psenUI language
value-formatgregorian-iso / …gregorian-isoStorage shape
show-holidaysboolean attributeoffMark holidays

EventCalendar: view (month / week / day / timeline), events and timeline (properties), event-click event. Timeline layout is single, alternating, or roadmap.

Full tables: Web Components guide.

Theming ​

css
[data-jalali-datepicker-root] {
  --jalali-primary: #0f766e;
  --jalali-radius: 12px;
}

See Theming.

License ​

MIT

Classes ​

Interfaces ​

Functions ​