Getting Started

Installation

Installing a flatpickr module

flatpickr is available on npm and bower. Use either one to easily stay up to date with new features and (inevitably) bugfixes.

# using npm install
npm i flatpickr --save

# bower
bower install flatpickr-calendar --save

# or, if you like yarn better
yarn add flatpickr

Non-module environments

If, for any reason, you are constained to a non-module environment (e.g. no bundlers such as webpack) - don’t fret. I suggest simply pulling the latest version of flatpickr from jsdelivr or unpkg.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

<!-- or -->

<link rel="stylesheet" href="https://unpkg.com/flatpickr/dist/flatpickr.min.css">
<script src="https://unpkg.com/flatpickr"></script>

Usage

If you’re using a bundler, e.g. webpack, you’ll need to import flatpickr.

const flatpickr = require("flatpickr");

All of the following are valid ways to create flatpickr instance.

flatpickr("#myID", {});
flatpickr(".myClass", {}); // creates multiple instances
flatpickr(element, {}); // https://developer.mozilla.org/en-US/docs/Web/API/Element

Configuration is optional and passed in an object {}.

jQuery

If you have jQuery, flatpickr is available as a plugin. Simply

$(".selector").flatpickr(optional_config);