or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

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

instance.mddocs/

Instance Management

Instance control methods for programmatic interaction with flatpickr date pickers after initialization.

Instance Properties

State Properties

interface Instance {
  // Current state
  selectedDates: Date[];
  currentYear: number;
  currentMonth: number;
  isOpen: boolean;
  isMobile: boolean;
  
  // Configuration
  config: ParsedOptions;
  l10n: Locale;
  
  // DOM references
  element: HTMLElement;
  input: HTMLInputElement;
  altInput?: HTMLInputElement;
  calendarContainer: HTMLDivElement;
  
  // Loaded plugins
  loadedPlugins: string[];
}

Key Properties:

  • selectedDates: Array of currently selected Date objects
  • isOpen: Whether the calendar is currently open
  • config: Current configuration options
  • element: The original input element
  • calendarContainer: The calendar DOM element

Calendar Control Methods

open

open: (e?: FocusEvent | MouseEvent, positionElement?: HTMLElement) => void;

Opens the calendar programmatically.

Parameters:

  • e: Optional event that triggered opening
  • positionElement: Optional element to position calendar relative to
const picker = flatpickr("#date-input");

// Open calendar
picker.open();

// Open and position relative to specific element
picker.open(null, document.getElementById("trigger-btn"));

close

close: () => void;

Closes the calendar.

const picker = flatpickr("#date-input");
picker.close();

toggle

toggle: () => void;

Toggles calendar open/closed state.

const picker = flatpickr("#date-input");
picker.toggle(); // Opens if closed, closes if open

Date Management Methods

setDate

setDate: (
  date: DateOption | DateOption[],
  triggerChange?: boolean,
  format?: string
) => void;

Sets the selected date(s) programmatically.

Parameters:

  • date: Single date or array of dates to select
  • triggerChange: Whether to trigger onChange hooks (default: true)
  • format: Format string if date is a string
const picker = flatpickr("#date-input");

// Set single date
picker.setDate("2023-12-25");
picker.setDate(new Date(2023, 11, 25));

// Set multiple dates (requires mode: "multiple")
picker.setDate(["2023-12-25", "2023-12-26", "2023-12-27"]);

// Set date range (requires mode: "range")
picker.setDate(["2023-12-25", "2023-12-31"]);

// Set without triggering change events
picker.setDate("2023-12-25", false);

clear

clear: (emitChangeEvent?: boolean, toInitial?: boolean) => void;

Clears the selected date(s).

Parameters:

  • emitChangeEvent: Whether to trigger onChange hooks (default: true)
  • toInitial: Whether to reset to initial/default date (default: false)
const picker = flatpickr("#date-input", { defaultDate: "today" });

// Clear selection
picker.clear();

// Clear without triggering change events
picker.clear(false);

// Clear and reset to default date
picker.clear(true, true);

jumpToDate

jumpToDate: (date?: DateOption, triggerChange?: boolean) => void;

Navigates calendar to display specific date without selecting it.

Parameters:

  • date: Date to navigate to (defaults to today)
  • triggerChange: Whether to trigger change events (default: false)
const picker = flatpickr("#date-input");

// Jump to specific date
picker.jumpToDate("2024-06-15");
picker.jumpToDate(new Date(2024, 5, 15));

// Jump to today
picker.jumpToDate();

Calendar Navigation Methods

changeMonth

changeMonth: (
  value: number,
  isOffset?: boolean,
  fromKeyboard?: boolean
) => void;

Changes the displayed month.

Parameters:

  • value: Month number (0-11) or offset amount
  • isOffset: Whether value is an offset (default: true)
  • fromKeyboard: Whether triggered by keyboard (internal use)
const picker = flatpickr("#date-input");

// Move forward one month
picker.changeMonth(1);

// Move back two months  
picker.changeMonth(-2);

// Jump to specific month (January = 0)
picker.changeMonth(5, false); // Jump to June

changeYear

changeYear: (year: number) => void;

Changes the displayed year.

const picker = flatpickr("#date-input");

// Jump to specific year
picker.changeYear(2025);

Configuration Methods

set

set: (
  option: keyof Options | { [k in keyof Options]?: Options[k] },
  value?: any
) => void;

Updates configuration options after initialization.

Parameters:

  • option: Single option key or object of options
  • value: New value for single option
const picker = flatpickr("#date-input");

// Set single option
picker.set("dateFormat", "d/m/Y");
picker.set("enableTime", true);

// Set multiple options
picker.set({
  dateFormat: "F j, Y",
  enableTime: true,
  time_24hr: false
});

redraw

redraw: () => void;

Forces a complete redraw of the calendar interface.

const picker = flatpickr("#date-input");
picker.redraw();

Utility Methods

updateValue

updateValue: (triggerChange?: boolean) => void;

Synchronizes the input element value with selected dates.

Parameters:

  • triggerChange: Whether to trigger change events (default: true)
const picker = flatpickr("#date-input");
picker.updateValue();

isEnabled

isEnabled: (date: DateOption, timeless?: boolean) => boolean;

Checks if a specific date is enabled/selectable.

Parameters:

  • date: Date to check
  • timeless: Whether to ignore time component (default: false)
const picker = flatpickr("#date-input", {
  disable: ["2023-12-25", "2023-12-26"]
});

console.log(picker.isEnabled("2023-12-25")); // false
console.log(picker.isEnabled("2023-12-24")); // true

onMouseOver

onMouseOver: (elem?: DayElement, cellClass?: string) => void;

Internal method for handling mouse hover events on calendar days. Used primarily by plugins for custom interaction behaviors.

pad

pad: (num: string | number) => string;

Utility method for zero-padding numbers to two digits.

const picker = flatpickr("#date-input");
console.log(picker.pad(5)); // "05"
console.log(picker.pad("7")); // "07"
console.log(picker.pad(12)); // "12"

destroy

destroy: () => void;

Completely destroys the flatpickr instance and cleans up DOM and event listeners.

const picker = flatpickr("#date-input");

// Clean up when done
picker.destroy();

Date Formatting Methods

parseDate

parseDate: (
  date: Date | string | number,
  givenFormat?: string,
  timeless?: boolean
) => Date | undefined;

Instance-specific date parsing using current locale and configuration.

formatDate

formatDate: (dateObj: Date, format: string) => string;

Instance-specific date formatting using current locale and configuration.

const picker = flatpickr("#date-input", { 
  locale: "fr" // French locale
});

const formatted = picker.formatDate(new Date(), "F j, Y");
console.log(formatted); // French month names

Utility Properties

utils

utils: {
  getDaysInMonth: (month?: number, year?: number) => number;
};

Utility object with helper functions.

const picker = flatpickr("#date-input");

// Get days in current month
const daysInMonth = picker.utils.getDaysInMonth();

// Get days in specific month/year
const daysInFeb2024 = picker.utils.getDaysInMonth(1, 2024); // February 2024