flatpickr
Version:
A lightweight, powerful javascript datetime picker
1,082 lines (886 loc) • 28.6 kB
HTML
<html lang="en">
<head>
<title>flatpickr - lightweight datetimepicker & calendar</title>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="assets/site.css">
<link rel="stylesheet" id=cal_style type="text/css" href="dist/flatpickr.min.css">
<link rel="icon" type="image/png" href="favicon.png">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=yes">
</head>
<body>
<header class="hero" id=hero>
<div class='wrapper'>
<h1>flatpickr</h1>
<p class="desc">
A lightweight & powerful datetimepicker
</p>
<div>
<a title="Follow @chmln on GitHub" target="_blank" class="btn" href="https://github.com/chmln">
<i class="icon-github"></i>
<span>Follow</span>
</a>
<a title="Star chmln/flatpickr on GitHub" target="_blank" class="btn" href="https://github.com/chmln/flatpickr">
<i class="icon-star"></i>
<span>Star!</span>
</a>
<a class="btn" href="https://github.com/chmln/flatpickr/archive/gh-pages.zip">
<i class="icon-cloud-down"></i>
<span>Download</span>
</a>
</div>
</div>
</header>
<div class=flex>
<div class="c-l">
<div class='wrapper'>
<div class="example_wrapper" data-desc="Install" id=install>
<h3>Install</h3>
<p>
Node Package Manager:<br>
<code>npm install flatpickr</code>
</p>
<p>
Bower:<br>
<code>bower install flatpickr-calendar</code>
</p>
<p>Otherwise:<br>
<a class="btn" href="https://github.com/chmln/flatpickr/archive/gh-pages.zip">
<i class="icon-cloud-down"></i>
<span>Download</span>
</a>
</p>
<p class=nomargin>Then <code>require('flatpickr')</code>, use wiredep, or otherwise load the necessary files.</p>
<pre class='prettyprint lang-html' style='clear:both'>
<link rel="stylesheet" type="text/css" href="/path/to/flatpickr.css">
<script src="/path/to/flatpickr.js"></script>
</pre>
</div>
<div class="example_wrapper">
<h3>Syntax</h3>
<pre class='prettyprint lang-js'>
flatpickr('selector', [options]);
</pre>
</div>
<div class="example_wrapper" data-desc="A basic datepicker" id="basic">
<h3>Basics</h3>
<strong>A basic datepicker</strong>
<pre class='prettyprint lang-js'>flatpickr('#flatpickr-tryme')</pre>
<p>
<input id="flatpickr-tryme" placeholder="Try me..">
</p>
<strong>Multiple datetimepickers</strong>
<p>
The selector can be a class as well, turning multiple inputs/fields into calendars.
</p>
<pre class='prettyprint lang-js'>
flatpickr('.calendar')
</pre>
<pre class="prettyprint lang-html">
<input class=calendar placeholder="calendar 1">
<input class=calendar placeholder="calendar 2">
<input class=calendar placeholder="calendar 3">
</pre>
<p>
<input class=calendar placeholder="calendar 1">
</p>
<p>
<input class=calendar placeholder="calendar 2">
</p>
<p>
<input class=calendar placeholder="calendar 3">
</p>
</div>
<div class="example_wrapper" data-desc="Custom date/time formats" id="format">
<h3>Date Formatting</h3>
<p>Using <a href=#options>dateFormat</a></p>
<pre class='prettyprint lang-js'>
flatpickr('#yourSelector', { dateFormat: 'd-m-Y'});
flatpickr('#yourSelector', { dateFormat: 'm/d/Y'});
</pre>
<pre class='prettyprint lang-html'>
<input class=flatpickr data-dateFormat="l, F j, Y">
</pre>
<p>
<input id="dateFormat" placeholder="European Format ('d-m-Y')">
</p>
<p>
<input id="dateFormat-mdy" placeholder="American Format ('m/d/Y')">
</p>
<p>
<input class=flatpickr data-dateFormat="l, F j, Y" placeholder="Fancy Textual Format ('l, F j, Y')">
</p>
</div>
<div class="example_wrapper" data-desc="Datetimepicker" id="datetimepicker">
<h3>DateTime Picker</h3>
<pre class='prettyprint lang-html'>
<input class=flatpickr data-enabletime>
</pre>
<p>
<input class=flatpickr data-enabletime placeholder="Pick date and time">
</p>
<br>
<h3>DateTime Picker: 24 Hour Mode</h3>
<pre class='prettyprint lang-html'>
<input class=flatpickr data-enabletime data-time_24hr>
</pre>
<p>
<input class=flatpickr data-enabletime data-time_24hr placeholder="24 hour time">
</p>
<br>
<h3>DateTime Picker with seconds</h3>
<pre class='prettyprint lang-html'>
<input class=flatpickr data-enabletime data-enableseconds data-dateFormat="Y-m-d h:i:S K">
</pre>
<p>
<input class=flatpickr data-enableTime data-enableseconds data-dateFormat="Y-m-d h:i:S K" placeholder="Pick date and time">
</p>
</div>
<div class="example_wrapper" data-desc="Time Picker" id="timepicker">
<h3>Time Picker</h3>
<pre class='prettyprint lang-html'>
<input class=flatpickr data-enabletime data-nocalendar value="09:00">
</pre>
<input class=flatpickr data-enabletime data-nocalendar placeholder="Pick time" value="09:00 PM">
</div>
<div class="example_wrapper" data-desc="Date Limits (maxDate/minDate)" id="maxmindate">
<h3>Date Limits - minDate and maxDate</h3> The example below conveniently uses data-attributes for setting
<strong>minDate</strong> and <strong>maxDate</strong> <a href=#options>options</a>.
<pre class="prettyprint lang-html">
<input class=flatpickr data-mindate=today>
<input class=flatpickr data-mindate="2016-09-20">
<input class=flatpickr data-mindate="September 2, 2015">
<input class=flatpickr data-mindate=today data-maxdate='2016-8-20'>
</pre>
<p>
<input class=flatpickr data-mindate=today placeholder="minDate: today">
</p>
<p>
<input class=flatpickr data-mindate="2016-09-20" placeholder="minDate: '2016-09-20'">
</p>
<p>
<input class=flatpickr data-mindate="September 2, 2015" placeholder="minDate: new Date('September 2, 2015')">
</p>
<p>
<input class=flatpickr data-mindate=today data-maxdate='2016-8-20' placeholder="minDate: today, maxDate: '2016-8-20'">
</p>
</div>
<div class="example_wrapper" data-desc="User-Friendly date output" id="altinput">
<h3>Human-friendly Date Output</h3>
<p>altInput can be used for displaying a friendly date format (per <code>altFormat</code>) to the user while sending the date formatted as <code>dateFormat</code> to the server. Feel free to inspect the input element below after picking a date to see what's going on. </p>
<pre class='prettyprint lang-html'>
<input class=flatpickr data-altinput data-altFormat="F j, Y">
</pre>
<p>
<input class=flatpickr id="alt" data-altinput data-altFormat="F j, Y" placeholder="The real input is hidden :^)">
</p>
<p><strong>Selected date</strong>: <span id=realdate>nothing yet</span></p>
</div>
<div class="example_wrapper" data-desc="Preloading dates" id="defaultdate">
<h3>Preload date and time</h3>
<p>
You may load the calendar with a predefined value, ranging from
simple dates, such as "2016-04-10" to full-fledged datetime strings.
</p>
<pre class='prettyprint lang-html'>
<input type=text class=flatpickr data-enableTime value="2016-03-01 03:30:00 -0300">
</pre>
<p>
<input type=text class=flatpickr data-enableTime value="2016-03-01 03:30:00 -0300">
</p>
<br>
<pre class='prettyprint lang-html'>
<input class=flatpickr data-defaultDate="2016-12-27T16:16:22.585Z" data-enableTime>
</pre>
<p>
<input class=flatpickr data-defaultDate="2016-12-27T16:16:22.585Z" data-enableTime>
</p>
</div>
<div class="example_wrapper" id="strap">
<h3>Custom elements and input groups</h3>
<p>flatpickr can parse an input group of textboxes and buttons, common in <strong>Bootstrap</strong> and other frameworks.</p>
<p>This permits additional markup, as well as custom elements to trigger the state of the calendar. </p>
<p>Mark your input element with
<code>data-input</code> (mandatory), and any additional buttons with
<code>data-toggle</code>,
<code>data-open</code>,
<code>data-close</code>, or
<code>data-clear</code>.</p>
<pre class='prettyprint lang-html'>
<p class="flatpickr input-group" data-wrap data-clickOpens="false">
<input placeholder="Pick date" data-input>
<a class="input-btn" data-toggle><i class="icon-calendar"></i></a>
<a class="input-btn" data-clear><i class="icon-close"></i></a>
</p>
</pre>
<p class="flatpickr input-group" data-wrap data-clickOpens="false">
<input data-input placeholder="Pick date">
<a class="input-btn" data-toggle><i class="icon-calendar"></i></a>
<a class="input-btn" data-clear><i class="icon-close"></i></a>
<div style="clear:both;"></div>
</p>
</div>
<div class="example_wrapper" data-desc="Disabling dates" id="disable">
<h3>Disabling dates</h3>
<p>Disable a date interval, or a specific date.</p>
<pre class='prettyprint lang-js'>
flatpickr('#disableRange', {
disable: [
{
from: "2016-08-16",
to: "2016-08-19"
},
"2016-08-24",
new Date().fp_incr(30) // 30 days from now
]
});
</pre>
<p>
<input id="disableRange" placeholder="Select date">
</p>
<hr>
<p>Or pass in a custom function and disable dates using any logic you want.</p>
<pre class='prettyprint lang-js'>
flatpickr('#disableOddDays', {
disable: [
function(date){ // disable odd days
return date.getDate()%2 > 0;
}
]
});
</pre>
<p>
<input id="disableOddDays" placeholder="Select date">
</p>
<hr>
<p>Disable <strong>all</strong> dates except the ones you need, by passing in date strings, Date objects, or functions.</p>
<pre class='prettyprint lang-js'>
flatpickr('#enableNextSeven', {
enable: [
{
from: "today",
to: new Date().fp_incr(7) // 7 days from now
}
]
});
</pre>
<p>
<input id="enableNextSeven" placeholder="Select date">
</p>
<hr>
<p>Use custom logic to enable the dates you need. For instance, enable business days of 2016:</p>
<pre class='prettyprint lang-js'>
flatpickr('#enableCustom', {
enable: [
function(dateObj){
return dateObj.getDay() %6 !== 0 && dateObj.getFullYear() === 2016;
}
]
});
</pre>
<p>
<input id="enableCustom" placeholder="Select date">
</p>
</div>
<div class="example_wrapper" data-desc="Allowing manual input" id="manual_input">
<h3>Allowing manual input</h3>
<p>
You may let your users input dates themselves simply by toggling the <code>allowInput</code> option
</p>
<pre class='prettyprint lang-html'>
<input type=text class=flatpickr data-allowInput">
</pre>
<p>
<input type=text class=flatpickr data-allowInput placeholder="Select date">
</p>
</div>
<div class="example_wrapper" data-desc="Timezones & UTC" id="utc">
<h3>UTC mode</h3>
<p>
By default, JavaScript's Date converts all dates to a local time. However, locale-agnostic databases often store dates in UTC. flatpickr can convert any given dates to UTC and select a datetime in UTC with a simple switch. Here are the previous examples with UTC mode enabled.
</p>
<pre class='prettyprint lang-html'>
<input class=flatpickr data-utc data-defaultDate="2016-03-01 03:30:00 -0300" data-enableTime>
</pre>
<p>
<input class=flatpickr data-utc data-defaultDate="2016-03-01 03:30:00 -0300" data-enableTime>
</p>
<br>
<pre class='prettyprint lang-html'>
<input class=flatpickr data-defaultDate="2016-12-27T16:16:22.585Z" data-utc data-enableTime>
</pre>
<p>
<input class=flatpickr data-defaultDate="2016-12-27T16:16:22.585Z" data-utc data-enableTime>
</p>
</div>
<div class="example_wrapper" data-desc="Events API" id="eventAPI">
<h3>Event API</h3>
<pre class='prettyprint lang-js'>
flatpickr("#events-api-example", {
minDate: "today",
enableTime: true,
onChange: function(dateObj, dateStr) {
...
},
onOpen: function(dateObj, dateStr){
...
},
onClose: function(dateObj, dateStr){
...
}
});
</pre>
<p id=events style="height: 60px; overflow-y: auto"></p>
<p>
<input id="events-api-example" placeholder="Select date">
</p>
<hr>
<h3>Example: check in and check out</h3>
<pre class='prettyprint lang-js'>
var check_in = flatpickr("#check_in_date", {
altInput: true,
altFormat: "\\C\\h\\e\\c\\k \\i\\n\\: l, F j Y",
minDate: new Date()
});
var check_out = flatpickr("#check_out_date", {
altInput: true,
altFormat: "\\C\\h\\e\\c\\k \\o\\u\\t: l, F j Y",
minDate: new Date()
});
check_in.set("onChange", function(d) {
check_out.set("minDate", d.fp_incr(1));
});
check_out.set("onChange", function(d) {
check_in.set("maxDate", d.fp_incr(-1));
});
</pre>
<p>
<input id="check_in_date" placeholder="Check-In Date">
</p>
<p>
<input id="check_out_date" placeholder="Check Out Date">
</p>
</div>
<div class="example_wrapper" id=weeknumbers data-desc="Week numbers" >
<h3>Display week numbers</h3>
<pre class='prettyprint lang-html'>
<input class=flatpickr data-weeknumbers placeholder="Enabled week numbers">
</pre>
<p>
<input class=flatpickr data-weeknumbers placeholder="Enabled week numbers">
</p>
</div>
<div class="example_wrapper" id=inline-calendar data-desc="Inline calendar" >
<h3>Inline or embedded calendar</h3>
<pre class='prettyprint lang-html'>
<input class=flatpickr data-inline placeholder="Pick a date below">
</pre>
<p>
<input class=flatpickr data-inline placeholder="Pick a date below">
</p>
</div>
<div class="example_wrapper" data-desc="Customizing default options" id="prototype">
<h3>Customizing default options</h3>
<pre class='prettyprint lang-js'>
// use your own arrow icons
flatpickr.init.prototype.defaultConfig.prevArrow = "<i class='icon i-angle-left'></i>";
flatpickr.init.prototype.defaultConfig.nextArrow = "<i class='icon i-angle-right'></i>";
// change the first day of the week to Monday
flatpickr.init.prototype.l10n.firstDayOfWeek = 1;
// then initialize your calendars
flatpickr(".flatpickr")
....
</pre>
</div>
<p></p>
<div class="example_wrapper" id=options>
<h3 data-desc="Options">Options</h3>
<p>
<strong>Protip: </strong> <u>all</u> of the string/boolean config options can also be supplied using data attributes, e.g. data-mindate, data-defaultdate, data-dateformat etc.
</p>
<table class=table>
<thead>
<tr>
<th>Config Option</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>altFormat</td>
<td>string</td>
<td>"F j, Y"</td>
<td>Exactly the same as date format, but for the altInput field</td>
</tr>
<tr>
<td>altInput</td>
<td>Boolean</td>
<td>false</td>
<td>Show the user a readable date (as per altFormat), but return something totally different to the server. </td>
</tr>
<tr>
<td>altInputClass</td>
<td>String</td>
<td>""</td>
<td>This class will be added to the input element created by the altInput option. Helpful if input elements are styled using classes. Bootstrap users will want to specify <code>form-control</code> here.</td>
</tr>
<tr>
<td>allowInput</td>
<td>boolean</td>
<td>false</td>
<td>Allows the user to enter a date directly input the input field. By default, direct entry is disabled.</td>
</tr>
<tr>
<td>clickOpens</td>
<td>boolean</td>
<td>true</td>
<td>Clicking on the input opens the date (time) picker. Disable this if you wish to open the calendar manually with <code>.open()</code></td>
</tr>
<tr>
<td>dateFormat</td>
<td>string</td>
<td>"Y-m-d"</td>
<td>A string of characters which are used to define how the date will be displayed in the input box. The supported characters are defined in the table below.</td>
</tr>
<tr>
<td>defaultDate</td>
<td>String/Date Object</td>
<td>null</td>
<td>Set the initial selected date. Same as preloading a date string into an input's value attribute, but can also handle a Date object. </td>
</tr>
<tr>
<td>disable</td>
<td>array</td>
<td>[]</td>
<td>Dates to disable, using intervals</td>
</tr>
<tr>
<td>enableTime</td>
<td>boolean</td>
<td>false</td>
<td>Enables time picker </td>
</tr>
<tr>
<td>enableSeconds</td>
<td>boolean</td>
<td>false</td>
<td>Enables seconds in the time picker.</td>
</tr>
<tr>
<td>noCalendar</td>
<td>boolean</td>
<td>false</td>
<td>Hides the calendar. For use along with enableTime.</td>
</tr>
<tr>
<td>hourIncrement</td>
<td>integer</td>
<td>1</td>
<td>Adjusts the step for the hour input (incl. scrolling) </td>
</tr>
<tr>
<td>minuteIncrement</td>
<td>integer</td>
<td>5</td>
<td>Adjusts the step for the minute input (incl. scrolling) </td>
</tr>
<tr>
<td>inline</td>
<td>boolean</td>
<td>false</td>
<td>Displays the calendar inline. See <a href="https://chmln.github.io/flatpickr/#inline-calendar">Inline or embedded calendar</a>.</td>
</tr>
<tr>
<td>static</td>
<td>boolean</td>
<td>false</td>
<td>Position the calendar inside the wrapper and next to the input element. (Leave <code>false</code> unless you know what you're doing.</td>
</tr>
<tr>
<td>wrap</td>
<td>Boolean</td>
<td>false</td>
<td>The wrapping element. See <a href="https://chmln.github.io/flatpickr/#strap">Custom elements and input groups</a>.</td>
</tr>
<tr>
<td>maxDate</td>
<td>String</td>
<td>null</td>
<td>The maximum date that a user can pick to, as a string.
<br>See <a target=_blank href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/parse">Date.parse()</a></td>
</tr>
<tr>
<td>minDate</td>
<td>String</td>
<td>null</td>
<td>The minimum date that a user can start picking from, as a string.
<br>See <a target=_blank href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/parse">Date.parse()</a></td>
</tr>
<tr>
<td>onChange</td>
<td>function(dateObject, dateString)</td>
<td>null</td>
<td>A function that gets triggered on every date selection </td>
</tr>
<tr>
<td>onOpen</td>
<td>function(dateObject, dateString)</td>
<td>null</td>
<td>A function that gets triggered on every time the calendar is opened.</td>
</tr>
<tr>
<td>onClose</td>
<td>function(dateObject, dateString)</td>
<td>null</td>
<td>A function that gets triggered on every time the calendar is closed.</td>
</tr>
<tr>
<td>parseDate</td>
<td>function</td>
<td>false</td>
<td>A function that expects a date string and must return a Date object</td>
</tr>
<tr>
<td>shorthandCurrentMonth</td>
<td>boolean</td>
<td>false</td>
<td>Show the month using the shorthand version (ie, Sep instead of September).</td>
</tr>
<tr>
<td>weekNumbers</td>
<td>boolean</td>
<td>false</td>
<td>Enables display of week numbers in calendar.</td>
</tr>
<tr>
<td>time_24hr</td>
<td>boolean</td>
<td>false</td>
<td>Displays time picker in 24 hour mode without AM/PM selection when enabled.</td>
</tr>
<tr>
<td>utc</td>
<td>boolean</td>
<td>false</td>
<td>When true, dates will parsed, formatted, and displayed in UTC. It's recommended that date strings contain the timezone, but not necessary.</td>
</tr>
<tr>
<td>prevArrow</td>
<td>string</td>
<td><code><</code></td>
<td>Code for the previous icon.</td>
</tr>
<tr>
<td>nextArrow</td>
<td>string</td>
<td><code>></code></td>
<td>Code for the next icon.</td>
</tr>
</tbody>
</table>
</div>
<div class="example_wrapper" id=dateformat>
<h3>Date Format Characters</h3>
<table class=table>
<thead>
<tr>
<th>Character</th>
<th>Description</th>
<th>Example</th>
</tr>
</thead>
<tbody>
<tr>
<td>d</td>
<td>Day of the month, 2 digits with leading zeros</td>
<td>01 to 31</td>
</tr>
<tr>
<td>D</td>
<td>A textual representation of a day</td>
<td>Mon through Sun</td>
</tr>
<tr>
<td>l (lowercase 'L')</td>
<td>A full textual representation of the day of the week</td>
<td>Sunday through Saturday</td>
</tr>
<tr>
<td>j</td>
<td>Day of the month without leading zeros</td>
<td>1 to 31</td>
</tr>
<tr>
<td>J</td>
<td>Day of the month without leading zeros and ordinal suffix</td>
<td>1st, 2nd, to 31st</td>
</tr>
<tr>
<td>w</td>
<td>Numeric representation of the day of the week</td>
<td>0 (for Sunday) through 6 (for Saturday)</td>
</tr>
<tr>
<td>F</td>
<td>A full textual representation of a month</td>
<td>January through December</td>
</tr>
<tr>
<td>m</td>
<td>Numeric representation of a month, with leading zero</td>
<td>01 through 12</td>
</tr>
<tr>
<td>n</td>
<td>Numeric representation of a month, without leading zeros</td>
<td>1 through 12</td>
</tr>
<tr>
<td>M</td>
<td>A short textual representation of a month</td>
<td>Jan through Dec</td>
</tr>
<tr>
<td>U</td>
<td>The number of seconds since the Unix Epoch</td>
<td>1413704993</td>
</tr>
<tr>
<td>y</td>
<td>A two digit representation of a year</td>
<td>99 or 03</td>
</tr>
<tr>
<td>Y</td>
<td>A full numeric representation of a year, 4 digits</td>
<td>1999 or 2003</td>
</tr>
</tbody>
</table>
</div>
<div class="example_wrapper" id=timeformat>
<h3>Time Format Characters</h3>
<table class=table>
<thead>
<tr>
<th>Character</th>
<th>Description</th>
<th>Example</th>
</tr>
</thead>
<tbody>
<tr>
<td>H</td>
<td>Hours (24 hours)</td>
<td>00 to 23</td>
</tr>
<tr>
<td>h</td>
<td>Hours</td>
<td>1 to 12</td>
</tr>
<tr>
<td>i</td>
<td>Minutes</td>
<td>00 to 59</td>
</tr>
<tr>
<td>S</td>
<td>Seconds, 2 digits</td>
<td>00 to 59</td>
</tr>
<tr>
<td>s</td>
<td>Seconds</td>
<td>0, 1 to 59</td>
</tr>
<tr>
<td>K</td>
<td>AM/PM</td>
<td>AM or PM</td>
</tr>
</tbody>
</table>
<p>
<h3>Escaping date format characters</h3>
</p>
<p>To escape a character (if you need to use one of the reserved format characters above) use a double backslash: <code>\\</code></p>
<p>Example:</p>
<pre class='prettyprint'><code>dateFormat: '\\D\\a\\y \\p\\i\\c\\k\\e\\d: Y/m/d'
</code></pre>
<p>To get something like:</p>
<p><strong>Day picked: 2013/02/12</strong></p>
<p>If you do not escape the characters you would end up with something like this instead:</p>
<p><strong>Tuea13 picke12: 2013/02/12</strong></p>
<p>Which is probably not what you want...</p>
<p><em>Note:</em> It's recommended that you escape all characters that you don't want accidentally converted to format characters in the future as others are added.</p>
</div>
<div class="example_wrapper" id=local>
<h3 id="locale">Localization</h3>
<p>flatpickr supports localizing text in a similar way to modifying the methods (above).</p>
<table class=table>
<thead>
<tr>
<th>Property</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>l10n.weekdays.shorthand</td>
<td>array</td>
<td>['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']</td>
<td>The shortened version of each weekday, starting with Sunday</td>
</tr>
<tr>
<td>l10n.weekdays.longhand</td>
<td>array</td>
<td>['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']</td>
<td>The long version of each weekday, starting with Sunday</td>
</tr>
<tr>
<td>l10n.months.shorthand</td>
<td>array</td>
<td>['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']</td>
<td>Shortened version of each month, starting with January</td>
</tr>
<tr>
<td>l10n.months.longhand</td>
<td>array</td>
<td>['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']</td>
<td>Long version of each month, starting with January</td>
</tr>
<tr>
<td>l10n.daysInMonth</td>
<td>array</td>
<td>[31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]</td>
<td>How many days in each month, starting with January</td>
</tr>
<tr>
<td>l10n.firstDayOfWeek</td>
<td>integer</td>
<td>0</td>
<td>Start the calendar on a different weekday (0 = Sunday, 1 = Monday, 2 = Tuesday, etc.)</td>
</tr>
</tbody>
</table>
<p><strong>Example:</strong> weekdays in French:
<pre class='prettyprint lang-js'><code><script>
flatpickr.init.prototype.l10n.weekdays.longhand = ['dimanche', 'lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi', 'samedi'];
flatpickr('#yourId');
</script>
</code></pre>
</p>
</div>
</div>
</div>
<div class="c-r">
<div>
<h2>Table of Contents</h2>
<ol></ol>
<hr>
<strong>Theme:</strong>
<select id=themes>
<option value="">Default</option>
</select>
</div>
</div>
</div>
<script src="dist/flatpickr.js"></script>
<script>
// setting custom defaults
flatpickr.init.prototype.defaultConfig.prevArrow = "<i class='icon icon-angle-left'></i>";
flatpickr.init.prototype.defaultConfig.nextArrow = "<i class='icon icon-angle-right'></i>";
flatpickr.init.prototype.l10n.firstDayOfWeek = 1;
//Regular flatpickr
var t = flatpickr('#flatpickr-tryme');
var calendars = flatpickr(".flatpickr");
flatpickr(".calendar");
// Custom date format
flatpickr('#dateFormat', {
dateFormat: 'd-m-Y'
});
flatpickr('#dateFormat-mdy', {
dateFormat: 'm/d/Y'
});
var real_selection = document.getElementById("realdate");
calendars.byID("alt").config.onChange = function(obj, str){
real_selection.textContent = str;
}
flatpickr('#disableRange', {
disable: [
{
from: "2016-08-16",
to: "2016-08-19"
},
"2016-08-24",
new Date().fp_incr(30) // 30 days from now
],
minDate: "today"
});
flatpickr('#disableOddDays', {
disable: [
function(date){ // disable odd days
return date.getDate()%2 > 0;
}
]
});
flatpickr('#enableNextSeven', {
enable: [
{
from: "today",
to: new Date().fp_incr(7)
}
]
});
flatpickr('#enableCustom', {
enable: [
function(dateObj){
return dateObj.getDay() %6 !== 0 && dateObj.getFullYear() === 2016;
}
]
});
var events = document.getElementById("events");
flatpickr("#events-api-example", {
minDate: "today",
enableTime: true,
onChange: function(dateObj, dateStr) {
events.innerHTML += "<b>onChange</b> (<code>" + dateObj + "</code>, <code>" + dateStr + "</code> )<br>";
events.scrollTop = events.offsetTop;
},
onOpen: function(dateObj, dateStr){
events.innerHTML += "<b>onOpen</b> (<code>" + dateObj + "</code>, <code>" + dateStr + "</code> )<br>";
events.scrollTop = events.offsetTop;
},
onClose: function(dateObj, dateStr){
events.innerHTML += "<b>onClose</b> (<code>" + dateObj + "</code>, <code>" + dateStr + "</code> )<br>";
events.scrollTop = events.offsetTop;
}
});
var check_in = flatpickr("#check_in_date", {
altInput: true,
altFormat: "\\C\\h\\e\\c\\k \\i\\n\\: l, F j Y",
minDate: new Date()
});
var check_out = flatpickr("#check_out_date", {
altInput: true,
altFormat: "\\C\\h\\e\\c\\k \\o\\u\\t: l, F j Y",
minDate: new Date()
});
check_in.set("onChange", function(d) {
check_out.set("minDate", d.fp_incr(1));
});
check_out.set("onChange", function(d) {
check_in.set("maxDate", d.fp_incr(-1));
});
</script>
<script async src="assets/prettify.js?skin=none"></script>
<script async src="assets/table-of-contents.js"></script>
<script async src="assets/themer.js"></script>
</body>
</html>