Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

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

xuda.io15Proprietary software licenses1.0.9

Xuda Flatpickr plugin implementation is a library for customizable date and time pickers. It offers features like date range selection, multiple date picking, localization, and accessibility, making it user-friendly, visually appealing, and suitable for m

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

readme

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