@logo-elements/hijri-datepicker

A web component that allows to enter a date by typing or by selecting from Islamic Hijri calendar which uses the Umm Al-Qura calendar system.

<logo-elements-hijri-datepicker></logo-elements-hijri-datepicker>

Installation

Install the component:

npm i @logo-elements/hijri-datepicker --save

Once installed, import the component in your application:

import '@logo-elements/hijri-datepicker';

Attributes:

| name | required | type | description | |---------------|----------|------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | componentId | no | string | The ID for input area in the component. If you want to access the input you can use this feature. | | placement | no | Popper Positions | The placement of the the datepicker 'bottom', 'top', 'right', 'left' and 'auto' default: bottom, you can use any placement in popper.js | | date-format | no | Moment Types | The date format, it is string, default: iYYYY/iMM/iDD, any format in moment-hijri will work | | selected-date | no | string | The selected date it is string with the same format of date-format prop | | lang-code | no | 'en' - 'ar' | The language code for the datepicker. It can accept 'en' and 'ar' values. default: 'ar' | | label | no | string | The label value of the input. | | helper-text | no | string | Helper text of the input. | | required | no | boolean | If area is required you can set this feature true. | | disabled | no | boolean | The language code for the datepicker. It can accept 'en' and 'ar' values. default: 'ar' |

Event onchange

in any change on the date, will be firing a change event. so you can listen and respond to the change.

For more detailed information, please visit:

Logo Elements Documentation ↗