Getting Started

Installation

Installing a flatpickr module

flatpickr is delivered primarily via npm.

Bower users: please use https://www.npmjs.com/package/bower-npm-resolver

  1. # using npm install
  2. npm i flatpickr --save

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.

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

Usage

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

  1. // commonjs
  2. const flatpickr = require("flatpickr");
  4. // es modules are recommended, if available, especially for typescript
  5. import flatpickr from "flatpickr";

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

  1. // If using flatpickr in a framework, its recommended to pass the element directly
  2. flatpickr(element, {});
  4. // Otherwise, selectors are also supported
  5. flatpickr("#myID", {});
  7. // creates multiple instances
  8. flatpickr(".anotherSelector");

Configuration is optional and passed in an object {}.

jQuery

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

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