or run

npx @tessl/cli init

Version

Tile

Overview

Evals

Files

docs

core.md index.md instance.md localization.md options.md plugins.md

tile.json

Configuration Options

Comprehensive configuration system for customizing flatpickr behavior, appearance, and functionality.

Core Selection Options

mode

mode: "single" | "multiple" | "range" | "time";

Determines the selection behavior of the date picker.

"single": Single date selection (default)
"multiple": Multiple individual dates
"range": Date range selection
"time": Time-only picker

// Single date
flatpickr("#single", { mode: "single" });

// Multiple dates
flatpickr("#multiple", { mode: "multiple" });

// Date range
flatpickr("#range", { mode: "range" });

// Time only
flatpickr("#time", { mode: "time" });

dateFormat

dateFormat: string;

Format string for displaying dates using flatpickr tokens. Default: "Y-m-d".

Common Format Tokens:

Y: 4-digit year
y: 2-digit year
m: Month (01-12)
n: Month (1-12)
F: Full month name
M: Short month name
d: Day (01-31)
j: Day (1-31)
H: Hour 24-format (00-23)
h: Hour 12-format (01-12)
i: Minutes (00-59)
s: Seconds (00-59)
K: AM/PM

flatpickr("#date", { dateFormat: "F j, Y" }); // "December 25, 2023"
flatpickr("#datetime", { dateFormat: "Y-m-d H:i" }); // "2023-12-25 14:30"
flatpickr("#custom", { dateFormat: "d/m/y" }); // "25/12/23"

Time Configuration

enableTime

enableTime: boolean;

Enables time selection alongside date selection. Default: false.

flatpickr("#datetime", {
  enableTime: true,
  dateFormat: "Y-m-d H:i"
});

time_24hr

time_24hr: boolean;

Use 24-hour time format instead of 12-hour with AM/PM. Default: false.

flatpickr("#time24", {
  enableTime: true,
  time_24hr: true,
  dateFormat: "Y-m-d H:i"
});

enableSeconds

enableSeconds: boolean;

Show seconds in time picker. Requires enableTime: true. Default: false.

flatpickr("#seconds", {
  enableTime: true,
  enableSeconds: true,
  dateFormat: "Y-m-d H:i:s"
});

hourIncrement

hourIncrement: number;

Hour increment step in time picker. Default: 1.

minuteIncrement

minuteIncrement: number;

Minute increment step in time picker. Default: 5.

flatpickr("#time-steps", {
  enableTime: true,
  hourIncrement: 2,    // Hours: 0, 2, 4, 6...
  minuteIncrement: 15  // Minutes: 0, 15, 30, 45
});

Date Constraints

minDate

minDate: DateOption;

Minimum selectable date.

maxDate

maxDate: DateOption;

Maximum selectable date.

maxTime

maxTime: DateOption;

Maximum selectable time (when enableTime is true).

minTime

minTime: DateOption;

Minimum selectable time (when enableTime is true).

flatpickr("#constrained", {
  minDate: "today",
  maxDate: new Date().fp_incr(30), // 30 days from today
  enableTime: true,
  minTime: "09:00",
  maxTime: "17:00"
});

disable

disable: DateLimit[];

Array of dates/ranges/functions to disable.

flatpickr("#disabled", {
  disable: [
    "2023-12-25",                    // Specific date
    { from: "2024-01-01", to: "2024-01-07" }, // Date range
    function(date) {                 // Custom function
      return date.getDay() === 0;    // Disable Sundays
    }
  ]
});

enable

enable: DateLimit[];

Array of dates/ranges/functions to enable (all others disabled).

flatpickr("#enabled-only", {
  enable: [
    { from: "2024-01-01", to: "2024-01-31" }, // Only January 2024
    function(date) {
      return date.getDay() >= 1 && date.getDay() <= 5; // Weekdays only
    }
  ]
});

Default Values

defaultDate

defaultDate: DateOption | DateOption[];

Default selected date(s) when picker initializes.

// Single default
flatpickr("#default-single", {
  defaultDate: "today"
});

// Multiple defaults
flatpickr("#default-multiple", {
  mode: "multiple",
  defaultDate: ["2023-12-25", "2023-12-26"]
});

// Range default
flatpickr("#default-range", {
  mode: "range", 
  defaultDate: ["2023-12-01", "2023-12-31"]
});

defaultHour

defaultHour: number;

Default hour when time picker opens. Default: 12.

defaultMinute

defaultMinute: number;

Default minute when time picker opens. Default: 0.

defaultSeconds

defaultSeconds: number;

Default seconds when time picker opens. Default: 0.

flatpickr("#default-time", {
  enableTime: true,
  enableSeconds: true,
  defaultHour: 9,
  defaultMinute: 30,
  defaultSeconds: 15
});

UI Behavior Options

clickOpens

clickOpens: boolean;

Whether clicking input opens the picker. Default: true.

// Manual control only
flatpickr("#manual", {
  clickOpens: false
});

closeOnSelect

closeOnSelect: boolean;

Whether calendar closes after date selection. Default: true.

// Keep open after selection
flatpickr("#stay-open", {
  closeOnSelect: false
});

allowInput

allowInput: boolean;

Allow direct typing into input field. Default: false.

flatpickr("#typeable", {
  allowInput: true,
  dateFormat: "Y-m-d"
});

allowInvalidPreload

allowInvalidPreload: boolean;

Allow loading invalid/disabled dates initially. Default: false.

Display Options

inline

inline: boolean;

Display calendar inline instead of as popup. Default: false.

flatpickr("#inline-calendar", {
  inline: true
});

static

static: boolean;

Use static positioning instead of absolute. Default: false.

position

position: "auto" | "above" | "below";

Calendar position relative to input. Default: "auto".

flatpickr("#positioned", {
  position: "above"
});

positionElement

positionElement: HTMLElement;

Element to position calendar relative to (instead of input).

const trigger = document.getElementById("trigger-btn");
flatpickr("#hidden-input", {
  positionElement: trigger
});

Alternative Input Options

altInput

altInput: boolean;

Show user-friendly formatted date but store different format in original input. Default: false.

altFormat

altFormat: string;

Format for the alternative input display. Default: "F j, Y".

altInputClass

altInputClass: string;

CSS class for alternative input element. Default: "".

flatpickr("#alt-input", {
  altInput: true,
  altFormat: "F j, Y",      // Display: "December 25, 2023"
  dateFormat: "Y-m-d",      // Store: "2023-12-25"
  altInputClass: "friendly-date"
});

Calendar Display Options

showMonths

showMonths: number;

Number of months to display simultaneously. Default: 1.

monthSelectorType

monthSelectorType: "dropdown" | "static";

How the month selector should be displayed. Default: "dropdown".

flatpickr("#multi-month", {
  showMonths: 2,
  monthSelectorType: "static"
});

weekNumbers

weekNumbers: boolean;

Show week numbers in calendar. Default: false.

flatpickr("#with-weeks", {
  weekNumbers: true
});

shorthandCurrentMonth

shorthandCurrentMonth: boolean;

Use abbreviated month names in header. Default: false.

Mobile Options

disableMobile

disableMobile: boolean;

Disable mobile-optimized interface. Default: false.

flatpickr("#desktop-only", {
  disableMobile: true
});

Calendar Content Options

noCalendar

noCalendar: boolean;

Hide calendar, show time picker only. Default: false.

flatpickr("#time-only", {
  enableTime: true,
  noCalendar: true
});

conjunction

conjunction: string;

String to join multiple selected dates. Default: ", ".

flatpickr("#multiple-custom", {
  mode: "multiple",
  conjunction: " | "  // "2023-12-25 | 2023-12-26"
});

Navigation Options

prevArrow

prevArrow: string;

HTML for previous month arrow. Default: "<svg>...</svg>".

nextArrow

nextArrow: string;

HTML for next month arrow. Default: "<svg>...</svg>".

flatpickr("#custom-arrows", {
  prevArrow: "◀",
  nextArrow: "▶"
});

Animation Options

animate

animate: boolean;

Enable CSS animations for calendar transitions. Default: true.

flatpickr("#no-animation", {
  animate: false
});

Container Options

appendTo

appendTo: HTMLElement;

Append calendar to specific DOM element instead of body. Default: undefined.

const container = document.getElementById("calendar-container");
flatpickr("#contained", {
  appendTo: container
});

Accessibility Options

ariaDateFormat

ariaDateFormat: string;

Date format for aria-label on calendar days. Default: "F j, Y".

autoFillDefaultTime

autoFillDefaultTime: boolean;

Auto-fill default time when input gains/loses focus. Default: true.

Error Handling

errorHandler

errorHandler: (error: Error) => void;

Custom error handler function.

formatDate

formatDate: (date: Date, format: string, locale: Locale) => string;

Custom date formatting function (overrides built-in formatter).

getWeek

getWeek: (date: Date) => string | number;

Function to generate week numbers when weekNumbers is enabled.

ignoredFocusElements

ignoredFocusElements: HTMLElement[];

Elements that won't close the calendar when clicked.

flatpickr("#custom-errors", {
  errorHandler: function(error) {
    console.error("Flatpickr error:", error.message);
  },
  ignoredFocusElements: [document.getElementById("keep-open-btn")]
});

Current Date Override

now

now: Date;

Override the current date/time reference.

flatpickr("#override-now", {
  now: new Date(2024, 0, 1) // Pretend it's Jan 1, 2024
});

Plugin Integration

parseDate

parseDate: (date: string, format: string) => Date;

Custom date parsing function (overrides built-in parser).

plugins

plugins: Plugin[];

Array of plugin instances to load.

import rangePlugin from "flatpickr/dist/plugins/rangePlugin";

flatpickr("#with-plugins", {
  mode: "range",
  plugins: [
    rangePlugin({ input: "#end-date" })
  ]
});

Layout Options

wrap

wrap: boolean;

Enable wrap mode for complex layouts with multiple trigger elements. Default: false.

// HTML: <div class="flatpickr"><input data-input><button data-toggle>📅</button></div>
flatpickr(".flatpickr", {
  wrap: true
});