https://flatpickr.js.org/Recent content in Introduction on flatpickrHugo -- gohugo.ioen-usThu, 02 Feb 2017 00:00:00 +0000https://flatpickr.js.org/getting-started/Fri, 03 Mar 2017 00:00:00 +0000https://flatpickr.js.org/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 # using npm install 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. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css"> <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.https://flatpickr.js.org/examples/Fri, 03 Mar 2017 00:00:00 +0000https://flatpickr.js.org/examples/Unless otherwise specified, the markup for examples below consists of just an input element, and flatpickr invocation with a given config. Basic flatpickr without any config. DateTime { enableTime: true, dateFormat: "Y-m-d H:i", } Human-friendly Dates altInput hides your original input and creates a new one. Upon date selection, the original input will contain a Y-m-d... string, while the altInput will display the date in a more legible, customizable format.https://flatpickr.js.org/instance-methods-properties-elements/Fri, 03 Mar 2017 00:00:00 +0000https://flatpickr.js.org/instance-methods-properties-elements/Retrieving the flatpickr instance You may store the instance by assigning the result of an invocation to a variable. Here are a few ways to do it. const fp = flatpickr("#myID", {}); // flatpickr const myInput = document.querySelector(".myInput"); const fp = flatpickr(myInput, {}); // flatpickr const calendars = flatpickr(".calendar", {}); calendars[0] // flatpickr And if you’ve forgot to save the instance to a variable flatpickr("#myInput", {}); // invocation without saving to a var // .https://flatpickr.js.org/events/Fri, 03 Mar 2017 00:00:00 +0000https://flatpickr.js.org/events/Events flatpickr features event hooks for the most common and useful actions. For each hook, you may specify a single function, or an array of functions. After instantiation, all hooks can be accessed via the instance’s config object. Inside the object, all functions are stored in arrays, so you would need to manipulate the array itself to add or remove functions: Example: instance.config.onChange.push(function() { } ); Each function added to a hook will receive 3 arguments when called.https://flatpickr.js.org/options/Fri, 03 Mar 2017 20:23:43 -0500https://flatpickr.js.org/options/An always up-to-date list of options may be found at options.ts Config Option Type Default Description altFormat String "F j, Y" Exactly the same as date format, but for the altInput field altInput Boolean false Show the user a readable date (as per altFormat), but return something totally different to the server. altInputClass String "" This class will be added to the input element created by the altInput option.https://flatpickr.js.org/formatting/Fri, 03 Mar 2017 20:23:43 -0500https://flatpickr.js.org/formatting/Each character in the table below can be used in dateFormat and altFormat options to achieve the format you need. Date Formatting Tokens Character Description Example d Day of the month, 2 digits with leading zeros 01 to 31 D A textual representation of a day Mon through Sun l (lowercase 'L') A full textual representation of the day of the week Sunday through Saturday j Day of the month without leading zeros 1 to 31 J Day of the month without leading zeros and ordinal suffix 1st, 2nd, to 31st w Numeric representation of the day of the week 0 (for Sunday) through 6 (for Saturday) W Numeric representation of the week 0 (first week of the year) through 52 (last week of the year) F A full textual representation of a month January through December m Numeric representation of a month, with leading zero 01 through 12 n Numeric representation of a month, without leading zeros 1 through 12 M A short textual representation of a month Jan through Dec U The number of seconds since the Unix Epoch 1413704993 y A two digit representation of a year 99 or 03 Y A full numeric representation of a year, 4 digits 1999 or 2003 Z ISO Date format 2017-03-04T01:23:43.https://flatpickr.js.org/localization/Fri, 03 Mar 2017 20:23:43 -0500https://flatpickr.js.org/localization/Dozens of locales are available. flatpickr can be localized per-instance, or globally. Using Modules ES modules (if your environment supports it) import flatpickr from "flatpickr" import { Russian } from "flatpickr/dist/l10n/ru.js" flatpickr(myElem, { "locale": Russian // locale for this instance only }); Using plain require() const flatpickr = require("flatpickr"); const Russian = require("flatpickr/dist/l10n/ru.js").default.ru; flatpickr(myElem, { "locale": Russian // locale for this instance only }); Localize globally (for all instances): const Russian = require("flatpickr/dist/l10n/ru.https://flatpickr.js.org/plugins/Sat, 25 Mar 2017 20:23:43 -0500https://flatpickr.js.org/plugins/Plugins are essentially a set of hooks, that receive an optional config object and a flatpickr instance. Functionality requested by users that doesn’t make it to core usually ends up in a plugin. The flatpickr repo comes with a few plugins. confirmDate Provides a visual cue for users after selecting either: date + time multiple dates { "enableTime": true, "plugins": [new confirmDatePlugin({})] } A spiffy SVG icon is included, along with sane defaults, but you can customize them.https://flatpickr.js.org/themes/Sun, 09 Apr 2017 20:23:43 -0500https://flatpickr.js.org/themes/Select Theme: Default Usage To use a theme of your choice, simply load its corresponding CSS file. For webpack builds and similar, you’d do something like: require("flatpickr/dist/themes/dark.css"); Themes in browser environments Otherwise, if you’re constrained to a browser, just link the CSS file as a regular stylesheet. <link rel="stylesheet" type="text/css" href="https://npmcdn.com/flatpickr/dist/themes/dark.css"> Available Themes Available theme names are listed in the theme selector on top of the page.https://flatpickr.js.org/mobile-support/Sun, 23 Apr 2017 20:23:43 -0500https://flatpickr.js.org/mobile-support/Native DateTime Input When flatpickr detects a mobile browser, it turns the date input into a native date/time/datetime input. Native datetime selection provides a UX that’s familiar to the user and is superior to most web-based solutions. There is no extra configuration necessary. However, native datetime selection is limited to the following features: Preloading a date/time/datetime minDate maxDate Callbacks like onChange work as well. Thus due to missing functionality in native datetime selection, using certain features (e.https://flatpickr.js.org/ie9/Sun, 23 Apr 2017 20:23:43 -0500https://flatpickr.js.org/ie9/flatpickr should work out-of-the-box in IE10+, Safari 6+, Firefox, and Chrome. IE9 flatpickr depends on classList which is absent from IE9, thus if you’re targeting IE9 you will need to include a polyfill. Additionally, flatpickr has specific styles for IE9. Make sure to include that as well, utilizing browser detection. For instance, <!--[if IE 9]> <link rel="stylesheet" type="text/css" href="https://npmcdn.com/flatpickr/dist/ie.css"> <![endif]--> If you’re using a bundler like webpack, see html-webpack-pluginhttps://flatpickr.js.org/updating-from-v2/Sun, 23 Apr 2017 20:23:43 -0500https://flatpickr.js.org/updating-from-v2/Breaking changes in flatpickr v3 have been kept to a minimum to ensure an easy upgrade path for users. Deprecation of the utc option Motivation The utc option was a hack using date manipulation. It didn’t yield the correct timezone. Resulting dates were not always accurate. Upgrade path Use the dateFormat: "Z" option, which is a shortcut for the ISO date format. It contains the correct timezone information and is supported by nearly every database.