JalaliDatePicker

When working with programmatic date or time values, use the following object shapes:

const date = {
 year: 1403,
 month: 1,
 day: 1
};

const time = {
 hour: 13,
 minute: 45,
 second: 0
};

The mode option allows you to change how dates are selected:

• single: Default mode.
• range: Selects a start and end date. Use rangeSeparator (default `

The library uses the following default string formats for values:

• Date: YYYY/MM/DD (e.g., 1403/01/09)
• Time: HH:mm:ss (e.g., 13:05:00)
• Date and Time: YYYY/MM/DD HH:mm:ss (e.g., 1403/01/09 13:05:00)

Note: If hasSecond is set to false, the time format will be HH:mm (e.g., 13:05).

Use the mode option to switch between different selection behaviors:

• range: Select a start and end date. The output format is [start] [rangeSeparator] [end].
• multiple: Select several individual dates. The output format is [date1] [multipleSeparator] [date2]....

You can also set the mode per-input using the data-jdp-mode attribute if mode: 'attr' is configured in startWatch.

<!-- Range Mode Example -->
<input data-jdp>
<script>
 jalaliDatepicker.startWatch({
  mode: "range",
  rangeSeparator: " - "
 });
</script>

<!-- Multiple Mode Example -->
<input data-jdp>
<script>
 jalaliDatepicker.startWatch({
  mode: "multiple",
  multipleSeparator: ", "
 });
</script>

<!-- Per-input Mode via Attributes -->
<input data-jdp data-jdp-mode="range">
<script>
 jalaliDatepicker.startWatch({
  mode: "attr"
 });
</script>

To quickly enable the datepicker, add the data-jdp attribute to your desired <input> element and call jalaliDatepicker.startWatch() after the JS file has loaded. By default, any input matching the selector input[data-jdp] will display the datepicker when focused.

<!-- Add attribute to input -->
<input data-jdp>

<script>
 jalaliDatepicker.startWatch();
</script>

You can include the library directly in your HTML using unpkg:

<link rel="stylesheet" href="https://unpkg.com/@majidh1/jalalidatepicker/dist/jalalidatepicker.min.css">
<script src="https://unpkg.com/@majidh1/jalalidatepicker/dist/jalalidatepicker.min.js"></script>

You can install JalaliDatePicker via npm or use a CDN to include it in your web pages.

### Install via npm

```shell
npm i @majidh1/jalalidatepicker

Then add the CSS and JS files to your page:

<link rel="stylesheet" href="jalalidatepicker.min.css">
<script src="jalalidatepicker.min.js"></script>

Use via CDN

<link rel="stylesheet" href="https://unpkg.com/@majidh1/jalalidatepicker/dist/jalalidatepicker.min.css">
<script src="https://unpkg.com/@majidh1/jalalidatepicker/dist/jalalidatepicker.min.js"></script>

Install the package using npm:

npm i @majidh1/jalalidatepicker

After installation, you must include the generated CSS and JS files in your HTML page:

<link rel="stylesheet" href="jalalidatepicker.min.css">
<script src="jalalidatepicker.min.js"></script>

To quickly enable the datepicker, add the data-jdp attribute to an input element and call jalaliDatepicker.startWatch() after the JS file is loaded. By default, the datepicker opens when the input is focused.

<input data-jdp>

<script>
 jalaliDatepicker.startWatch();
</script>

In version 1.0.0, you can use targetValueInput to write the converted date/time values to a specific target input element. You can also specify the format of the value written to that target using targetValueType.

• targetValueInput: The target element (e.g., an HTMLInputElement) where the converted value will be written.
• targetValueType: Set to "gregorian" to write Gregorian values to the target input instead of the default Jalali format.

// Example configuration for V1.0.0
{
  targetValueInput: document.getElementById('gregorian-input'),
  targetValueType: 'gregorian'
}

The JalaliDatePicker operates by attaching to DOM elements and managing an overlay and container.

1. Initialization: init(options) sets up global event listeners (resize, body clicks) and starts watching for focus events on elements matching the selector.
2. Showing: When show(input) is called, the picker calculates its position relative to the input, renders the calendar UI, and sets the input to readOnly (if autoReadOnlyInput is enabled).
3. Selection: When a user selects a date, the _value is updated, the input's value string is updated, and a change event is triggered on the input.
4. Hiding: hide() removes the picker from view and cleans up scroll locks on parent elements.