npm package: @logo-elements/hijri-datepicker
Description: Logo Elements Design System Vaadin Textfield based Hijri Datepicker.
Latest version: 23.0.12

# @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.

[![npm version](https://badgen.net/npm/v/@logo-elements/hijri-datepicker)](https://www.npmjs.com/package/@logo-elements/hijri-datepicker)


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

## Installation

Install the component:

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

Once installed, import the component in your application:

```js
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](https://popper.js.org/popper-documentation.html#Popper.placements) |
| date-format   |    no    | Moment Types     | The date format, it is string, `default:` iYYYY/iMM/iDD, any format in [moment-hijri](https://github.com/xsoh/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 ↗](http://elements.logo.com.tr)