@xuda.io/xuda-widget-plugin-flatpickr/src/index.mjs

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

const properties = {
  enableTime: {
    label: "Enable Time Picker",
    type: "boolean",
    render: "segment",
    tooltip: "Enable or disable time selection in the picker.",
    defaultValue: () => false,
    options: [
      { label: "Yes", value: true },
      { label: "No", value: false },
    ],
  },
  dateFormat: {
    label: "Date Format",
    type: "string",
    render: "input",
    tooltip: "Specify the format for the selected date.",
    defaultValue: () => "Y-m-d",
  },
  altInput: {
    label: "Alternative Input",
    type: "boolean",
    render: "segment",
    tooltip: "Enable an alternative input field with custom formatting.",
    defaultValue: () => false,
    options: [
      { label: "Yes", value: true },
      { label: "No", value: false },
    ],
  },
  altFormat: {
    label: "Alternative Format",
    type: "string",
    render: "input",
    tooltip: "Define the format for the alternative input field.",
    defaultValue: () => "F j, Y",
  },
  minDate: {
    label: "Minimum Date",
    type: "string",
    render: "input",
    tooltip: "Set the earliest selectable date.",
    defaultValue: () => "today",
  },
  maxDate: {
    label: "Maximum Date",
    type: "string",
    render: "input",
    tooltip: "Set the latest selectable date.",
    defaultValue: () => "",
  },
  mode: {
    label: "Selection Mode",
    type: "string",
    render: "select",
    tooltip: "Choose between single, multiple, or range selection modes.",
    defaultValue: () => "single",
    options: [
      { label: "Single", value: "single" },
      { label: "Multiple", value: "multiple" },
      { label: "Range", value: "range" },
    ],
  },
  locale: {
    label: "Locale",
    type: "string",
    render: "select",
    tooltip: "Set the language for the picker.",
    defaultValue: () => "en",
    options: [
      { label: "English", value: "en" },
      { label: "Spanish", value: "es" },
      { label: "French", value: "fr" },
    ],
  },
  inline: {
    label: "Inline Calendar",
    type: "boolean",
    render: "segment",
    tooltip: "Display the calendar inline rather than in a dropdown.",
    defaultValue: () => false,
    options: [
      { label: "Yes", value: true },
      { label: "No", value: false },
    ],
  },
  weekNumbers: {
    label: "Show Week Numbers",
    type: "boolean",
    render: "segment",
    tooltip: "Display week numbers in the calendar view.",
    defaultValue: () => false,
    options: [
      { label: "Yes", value: true },
      { label: "No", value: false },
    ],
  },
  disable: {
    label: "Disable Specific Dates",
    type: "array",
    tooltip: "Provide an array of dates to disable.",
    render: "chips",
    defaultValue: () => [],
  },
  outputBindFormat: {
    label: "Output bind format",
    type: "string",
    render: "select",
    tooltip:
      "Choose between Date, or Value to set how the bind output will be set.",
    defaultValue: () => "date",
    options: [
      { label: "Date object", value: "date" },
      { label: "Date value", value: "value" },
    ],
  },
};

export const methods = {
  _default: {
    name: "Default",
    tooltip: "",
    fields: properties,
  },
};