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

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