# Flatpickr Xuda Widget Plugin

The **Flatpickr Xuda Plugin** provides a customizable and lightweight date and time picker for seamless integration with Xuda UI. Enhance your user experience with range selection, multiple date picking, and localization support, including Hebrew.

---

## Features

- **Customizable Date and Time Picker**: Tailor the format, styles, and functionality to your needs.
- **Range and Multiple Date Selection**: Support for selecting single, range, or multiple dates.
- **Localization Support**: Includes English, Hebrew, French, Spanish, and more.
- **Real-time Updates**: Dynamically refresh the date picker as needed.
- **Seamless Xuda Integration**: Works natively with Xuda UI properties and rendering system.

---

## Installation in Xuda Platform

1. Navigate to the **Plugins** tab in your Xuda project node on [Xuda.io](https://xuda.io).
2. Locate the **Flatpickr Xuda Plugin**.
3. Install the plugin by toggling the activation button.

---

## Usage in Xuda Studio

1. Open **Xuda Studio** on [Xuda.io](https://xuda.io/studio) and select a UI component.
2. In the **Properties Pane**, scroll down to find the plugin options.
3. Activate the plugin and configure the properties as needed.

---

## Properties

| Property           | Type      | Description                                                         | Default Value |
| ------------------ | --------- | ------------------------------------------------------------------- | ------------- |
| `enableTime`       | `boolean` | Enables or disables time selection in the picker.                   | `false`       |
| `dateFormat`       | `string`  | Specifies the format for the selected date.                         | `Y-m-d`       |
| `altInput`         | `boolean` | Shows an alternative input field with custom formatting.            | `false`       |
| `altFormat`        | `string`  | Defines the format for the alternative input field.                 | `F j, Y`      |
| `minDate`          | `string`  | Sets the earliest selectable date.                                  | `null`        |
| `maxDate`          | `string`  | Sets the latest selectable date.                                    | `null`        |
| `mode`             | `string`  | Selects the picker mode: single, multiple, or range.                | `single`      |
| `locale`           | `string`  | Chooses the locale for the date picker.                             | `en`          |
| `inline`           | `boolean` | Displays the calendar inline rather than in a dropdown.             | `false`       |
| `weekNumbers`      | `boolean` | Shows week numbers in the calendar view.                            | `false`       |
| `disable`          | `array`   | Provides an array of dates to disable in the picker.                | `[]`          |
| `outputBindFormat` | `string`  | Choose between setting the bind output as a date object or a value. | `date`        |

---

## Supported Locales

Here are some of the supported locales:

- `en`: English
- `he`: Hebrew
- `fr`: French
- `es`: Spanish
- `de`: German
- `ru`: Russian
- `zh-cn`: Chinese (Simplified)
- `ja`: Japanese
- `ko`: Korean

For a complete list of supported locales, visit the [Flatpickr Localization Documentation](https://flatpickr.js.org/localization/).

---

## Example Configuration

1. **Flatpickr Date Display**:

   - **enableTime**: `true`
   - **dateFormat**: `Y-m-d H:i`
   - **locale**: `he` (Hebrew)
   - **inline**: `true`

2. **Properties Pane in Xuda Studio**:
   - `enableTime`: `true`
   - `dateFormat`: `Y-m-d H:i`
   - `locale`: `he`
   - `inline`: `true`