or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

core.mdindex.mdinstance.mdlocalization.mdoptions.mdplugins.md
tile.json

core.mddocs/

Core Functionality

The main flatpickr factory function and static utilities for creating and managing date picker instances.

Main Factory Function

function flatpickr(
  selector: Node | ArrayLike<Node> | string,
  config?: Options
): Instance | Instance[];

Creates flatpickr instances from DOM elements or selectors.

Parameters:

  • selector: DOM element(s), NodeList, or CSS selector string
  • config: Optional configuration object

Returns:

  • Single Instance when selector matches one element
  • Array of Instance[] when selector matches multiple elements

Usage:

// Single element
const picker = flatpickr("#date-input", { dateFormat: "Y-m-d" });

// Multiple elements
const pickers = flatpickr(".date-inputs", { mode: "range" });

// Direct element reference
const element = document.getElementById("my-date");
const picker = flatpickr(element, { enableTime: true });

Static Properties and Methods

defaultConfig

flatpickr.defaultConfig: Partial<ParsedOptions>;

Global default configuration applied to all new instances.

// Set global defaults
flatpickr.defaultConfig = {
  dateFormat: "Y-m-d",
  time_24hr: true
};

l10ns

flatpickr.l10ns: { [k in LocaleKey]?: CustomLocale } & { default: Locale };

Collection of available localization objects.

// Access available locales
console.log(flatpickr.l10ns.fr); // French locale
console.log(flatpickr.l10ns.default); // Default English locale

localize

flatpickr.localize: (l10n: CustomLocale) => void;

Sets global localization by merging with default locale.

// Customize global locale
flatpickr.localize({
  firstDayOfWeek: 1, // Monday
  rangeSeparator: " - "
});

setDefaults

flatpickr.setDefaults: (config: Options) => void;

Sets global default configuration options.

// Set global defaults
flatpickr.setDefaults({
  allowInput: true,
  clickOpens: true,
  time_24hr: true
});

Static Utility Functions

parseDate

flatpickr.parseDate: (
  date: DateOption,
  format?: string,
  timeless?: boolean
) => Date | undefined;

Parses various date inputs into Date objects.

Parameters:

  • date: Date input (Date, string, or number)
  • format: Optional format string for parsing
  • timeless: Optional flag to ignore time components
const parsed = flatpickr.parseDate("2023-12-25", "Y-m-d");
console.log(parsed); // Date object for Dec 25, 2023

formatDate

flatpickr.formatDate: (date: Date, format: string) => string;

Formats Date objects into strings using flatpickr format tokens.

Parameters:

  • date: Date object to format
  • format: Format string using flatpickr tokens
const formatted = flatpickr.formatDate(new Date(), "F j, Y");
console.log(formatted); // "December 25, 2023"

compareDates

flatpickr.compareDates: (
  date1: Date,
  date2: Date,
  timeless?: boolean
) => number;

Compares two Date objects, returning -1, 0, or 1.

Parameters:

  • date1: First date for comparison
  • date2: Second date for comparison
  • timeless: Optional flag to ignore time components
const result = flatpickr.compareDates(
  new Date("2023-12-25"),
  new Date("2023-12-26")
);
console.log(result); // -1 (date1 is before date2)

Global Integration

Window Integration

When loaded in a browser, flatpickr automatically attaches to the global window object:

window.flatpickr === flatpickr; // true

jQuery Integration

If jQuery is available, flatpickr automatically adds a jQuery plugin:

$('#date-input').flatpickr({
  dateFormat: "Y-m-d",
  enableTime: true
});

Date Prototype Extension

Flatpickr extends the Date prototype with an increment method:

Date.prototype.fp_incr: (days: number | string) => Date;
const tomorrow = new Date().fp_incr(1);
const nextWeek = new Date().fp_incr(7);