@xuda.io/xuda-widget-plugin-flatpickr

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