@xuda.io/xuda-ui-plugin-flatpickr NPM

Flatpickr Xuda 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

Navigate to the Plugins tab in your Xuda project node on Xuda.io.
Locate the Flatpickr Xuda Plugin.
Install the plugin by toggling the activation button.

Usage in Xuda Studio

Open Xuda Studio on Xuda.io and select a UI component.
In the Properties Pane, scroll down to find the plugin options.
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.	`[]`

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

Flatpickr Date Display:
- enableTime: true
- dateFormat: Y-m-d H:i
- locale: he (Hebrew)
- inline: true
Properties Pane in Xuda Studio:
- enableTime: true
- dateFormat: Y-m-d H:i
- locale: he
- inline: true

xuda plugin JavaScript Date Picker Time Picker Lightweight Customizable User-Friendly Cross-Browser Localization Accessibility Interactive UI Date Range Multiple Dates Responsive Design Calendar Widget Frontend Library

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago