<commit_before><!DOCTYPE html>
<html lang="en">

<head>

	<title>flatpickr - lightweight datetimepicker &amp; 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 &amp; 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'>
&lt;link rel="stylesheet" type="text/css" href="/path/to/flatpickr.css"&gt;
&lt;script src="/path/to/flatpickr.js"&gt;&lt;/script&gt;
</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">
&lt;input class=calendar placeholder="calendar 1"&gt;
&lt;input class=calendar placeholder="calendar 2"&gt;
&lt;input class=calendar placeholder="calendar 3"&gt;
</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'>
&lt;input class=flatpickr data-dateFormat="l, F j, Y"&gt;
</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="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">
&lt;input class=flatpickr data-mindate=today&gt;
&lt;input class=flatpickr data-mindate="2016-09-20"&gt;
&lt;input class=flatpickr data-mindate="September 2, 2015"&gt;
&lt;input class=flatpickr data-mindate=today data-maxdate='2016-8-20'&gt;
</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" 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'>
&lt;p class="flatpickr input-group" data-wrap="true" data-clickOpens="false"&gt;

	&lt;input placeholder="Pick date" data-input&gt;

	&lt;a class="input-btn" data-toggle&gt;&lt;i class="icon-calendar"&gt;&lt;/i&gt;&lt;/a&gt;
	&lt;a class="input-btn" data-clear&gt;&lt;i class="icon-close"&gt;&lt;/i&gt;&lt;/a&gt;

&lt;/p>
</pre>

			<p class="flatpickr input-group" data-wrap="true" 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="Datetimepicker" id="datetimepicker">

			<h3>DateTime Picker</h3>
			<pre class='prettyprint lang-html'>
&lt;input class=flatpickr data-enabletime=true&gt;
</pre>

		<p>
			<input class=flatpickr data-enabletime=true placeholder="Pick date and time">
		</p>
		<br>

			<h3>DateTime Picker: 24 Hour Mode</h3>
			<pre class='prettyprint lang-html'>
&lt;input class=flatpickr data-enabletime=true data-time_24hr=true&gt;
</pre>

		<p>
			<input class=flatpickr data-enabletime=true data-time_24hr=true placeholder="24 hour time">
		</p>
		<br>

			<h3>DateTime Picker with seconds</h3>
						<pre class='prettyprint lang-html'>
&lt;input class=flatpickr data-enabletime=true data-enableseconds=true&gt;
</pre>
		<p>
			<input class=flatpickr data-enabletime=true data-enableseconds=true 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'>
&lt;input class=flatpickr data-enabletime=true  data-nocalendar=true value="09:00"&gt;
</pre>

			<input class=flatpickr data-enabletime=true data-nocalendar=true placeholder="Pick time"  value="09:00 PM">
		</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'>
&lt;input class=flatpickr data-altinput=true data-altFormat="F j, Y"&gt;
</pre>
			<p>
				<input class=flatpickr id="alt" data-altinput=true 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'>
&lt;input class=flatpickr data-defaultDate="2016-03-01 03:30:00 -0300"  data-enableTime="true"&gt;
</pre>


			<p>
				<input class=flatpickr data-defaultDate="2016-03-01 03:30:00 -0300"  data-enableTime="true">
			</p>
			<br>
<pre class='prettyprint lang-html'>
&lt;input class=flatpickr data-defaultDate="2016-12-27T16:16:22.585Z"  data-enableTime="true"&gt;
</pre>
			<p>
				<input class=flatpickr data-defaultDate="2016-12-27T16:16:22.585Z"  data-enableTime="true">
			</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'>
&lt;input class=flatpickr data-utc="true" data-defaultDate="2016-03-01 03:30:00 -0300"  data-enableTime="true"&gt;
</pre>


			<p>
				<input class=flatpickr data-utc="true" data-defaultDate="2016-03-01 03:30:00 -0300"  data-enableTime="true">
			</p>

			<br>
			<pre class='prettyprint lang-html'>
&lt;input class=flatpickr data-defaultDate="2016-12-27T16:16:22.585Z" data-utc="true"  data-enableTime="true"&gt;
</pre>
			<p>
				<input class=flatpickr data-defaultDate="2016-12-27T16:16:22.585Z" data-utc="true"  data-enableTime="true">
			</p>

		</div>



		<div class="example_wrapper" data-desc="Disabling dates" id="disable">
			<h3>Disable specific dates or date intervals</h3>

			<pre class='prettyprint lang-js'>
flatpickr('#disableRange', {

	disable: [
		{
			from: "2016-07-06",
			to: "2016-07-09"
		},
		"2016-07-24"
	],
	minDate: "today"

});

flatpickr('#disableRangeMultiple', {

	disable:
	[
		{ 'from' : "2016-09-06", 'to' : "2016-09-09" },
		{ 'from' : "August 25, 2016", 'to' : "August 31, 2016" }
	],
	minDate: "today",
	dateFormat: 'Y-m-d'

});
</pre>


			<p>
				<input id="disableRange" placeholder="disabled from July 6-9">
			</p>
			<p>
				<input id="disableRangeMultiple" placeholder="disabled September 6-9 &amp; August 25-31 2016 ">
			</p>
		</div>


		<div class="example_wrapper" data-desc="Utilizing onChange Event" id="onchange">
			<h3>Setting options on the fly</h3>

			<pre class='prettyprint lang-js'>
var check_in = flatpickr("#check_in_date", { minDate: new Date() });
var check_out = flatpickr("#check_out_date", { minDate: new Date() });

check_in.set("onChange", function(d) {
	check_out.set("minDate", d.fp_incr(1)); //increment by one day
});
check_out.set("onChange", function(d) {
	check_in.set("maxDate", d);
});
</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'>
&lt;input class=flatpickr data-weeknumbers=true placeholder="Enabled week numbers"&gt;
</pre>

			<p>
				<input class=flatpickr data-weeknumbers=true 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'>
&lt;input class=flatpickr data-inline=true placeholder="Pick a date below"&gt;
</pre>

			<p>
				<input class=flatpickr data-inline=true 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 = "&lt;i class='icon i-angle-left'&gt;&lt;/i&gt;";
flatpickr.init.prototype.defaultConfig.nextArrow = "&lt;i class='icon i-angle-right'&gt;&lt;/i&gt;";

// 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>minuteIncrement</td>
					<td>integer</td>
					<td>5</td>
					<td>Adjusts the step for the minute input (incl. scrolling) </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><commit_msg>Moving/Removing duplicate minuteIncrement<commit_after><!DOCTYPE html>
<html lang="en">

<head>

	<title>flatpickr - lightweight datetimepicker &amp; 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 &amp; 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'>
&lt;link rel="stylesheet" type="text/css" href="/path/to/flatpickr.css"&gt;
&lt;script src="/path/to/flatpickr.js"&gt;&lt;/script&gt;
</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">
&lt;input class=calendar placeholder="calendar 1"&gt;
&lt;input class=calendar placeholder="calendar 2"&gt;
&lt;input class=calendar placeholder="calendar 3"&gt;
</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'>
&lt;input class=flatpickr data-dateFormat="l, F j, Y"&gt;
</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="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">
&lt;input class=flatpickr data-mindate=today&gt;
&lt;input class=flatpickr data-mindate="2016-09-20"&gt;
&lt;input class=flatpickr data-mindate="September 2, 2015"&gt;
&lt;input class=flatpickr data-mindate=today data-maxdate='2016-8-20'&gt;
</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" 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'>
&lt;p class="flatpickr input-group" data-wrap="true" data-clickOpens="false"&gt;

	&lt;input placeholder="Pick date" data-input&gt;

	&lt;a class="input-btn" data-toggle&gt;&lt;i class="icon-calendar"&gt;&lt;/i&gt;&lt;/a&gt;
	&lt;a class="input-btn" data-clear&gt;&lt;i class="icon-close"&gt;&lt;/i&gt;&lt;/a&gt;

&lt;/p>
</pre>

			<p class="flatpickr input-group" data-wrap="true" 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="Datetimepicker" id="datetimepicker">

			<h3>DateTime Picker</h3>
			<pre class='prettyprint lang-html'>
&lt;input class=flatpickr data-enabletime=true&gt;
</pre>

		<p>
			<input class=flatpickr data-enabletime=true placeholder="Pick date and time">
		</p>
		<br>

			<h3>DateTime Picker: 24 Hour Mode</h3>
			<pre class='prettyprint lang-html'>
&lt;input class=flatpickr data-enabletime=true data-time_24hr=true&gt;
</pre>

		<p>
			<input class=flatpickr data-enabletime=true data-time_24hr=true placeholder="24 hour time">
		</p>
		<br>

			<h3>DateTime Picker with seconds</h3>
						<pre class='prettyprint lang-html'>
&lt;input class=flatpickr data-enabletime=true data-enableseconds=true&gt;
</pre>
		<p>
			<input class=flatpickr data-enabletime=true data-enableseconds=true 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'>
&lt;input class=flatpickr data-enabletime=true  data-nocalendar=true value="09:00"&gt;
</pre>

			<input class=flatpickr data-enabletime=true data-nocalendar=true placeholder="Pick time"  value="09:00 PM">
		</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'>
&lt;input class=flatpickr data-altinput=true data-altFormat="F j, Y"&gt;
</pre>
			<p>
				<input class=flatpickr id="alt" data-altinput=true 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'>
&lt;input class=flatpickr data-defaultDate="2016-03-01 03:30:00 -0300"  data-enableTime="true"&gt;
</pre>


			<p>
				<input class=flatpickr data-defaultDate="2016-03-01 03:30:00 -0300"  data-enableTime="true">
			</p>
			<br>
<pre class='prettyprint lang-html'>
&lt;input class=flatpickr data-defaultDate="2016-12-27T16:16:22.585Z"  data-enableTime="true"&gt;
</pre>
			<p>
				<input class=flatpickr data-defaultDate="2016-12-27T16:16:22.585Z"  data-enableTime="true">
			</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'>
&lt;input class=flatpickr data-utc="true" data-defaultDate="2016-03-01 03:30:00 -0300"  data-enableTime="true"&gt;
</pre>


			<p>
				<input class=flatpickr data-utc="true" data-defaultDate="2016-03-01 03:30:00 -0300"  data-enableTime="true">
			</p>

			<br>
			<pre class='prettyprint lang-html'>
&lt;input class=flatpickr data-defaultDate="2016-12-27T16:16:22.585Z" data-utc="true"  data-enableTime="true"&gt;
</pre>
			<p>
				<input class=flatpickr data-defaultDate="2016-12-27T16:16:22.585Z" data-utc="true"  data-enableTime="true">
			</p>

		</div>



		<div class="example_wrapper" data-desc="Disabling dates" id="disable">
			<h3>Disable specific dates or date intervals</h3>

			<pre class='prettyprint lang-js'>
flatpickr('#disableRange', {

	disable: [
		{
			from: "2016-07-06",
			to: "2016-07-09"
		},
		"2016-07-24"
	],
	minDate: "today"

});

flatpickr('#disableRangeMultiple', {

	disable:
	[
		{ 'from' : "2016-09-06", 'to' : "2016-09-09" },
		{ 'from' : "August 25, 2016", 'to' : "August 31, 2016" }
	],
	minDate: "today",
	dateFormat: 'Y-m-d'

});
</pre>


			<p>
				<input id="disableRange" placeholder="disabled from July 6-9">
			</p>
			<p>
				<input id="disableRangeMultiple" placeholder="disabled September 6-9 &amp; August 25-31 2016 ">
			</p>
		</div>


		<div class="example_wrapper" data-desc="Utilizing onChange Event" id="onchange">
			<h3>Setting options on the fly</h3>

			<pre class='prettyprint lang-js'>
var check_in = flatpickr("#check_in_date", { minDate: new Date() });
var check_out = flatpickr("#check_out_date", { minDate: new Date() });

check_in.set("onChange", function(d) {
	check_out.set("minDate", d.fp_incr(1)); //increment by one day
});
check_out.set("onChange", function(d) {
	check_in.set("maxDate", d);
});
</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'>
&lt;input class=flatpickr data-weeknumbers=true placeholder="Enabled week numbers"&gt;
</pre>

			<p>
				<input class=flatpickr data-weeknumbers=true 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'>
&lt;input class=flatpickr data-inline=true placeholder="Pick a date below"&gt;
</pre>

			<p>
				<input class=flatpickr data-inline=true 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 = "&lt;i class='icon i-angle-left'&gt;&lt;/i&gt;";
flatpickr.init.prototype.defaultConfig.nextArrow = "&lt;i class='icon i-angle-right'&gt;&lt;/i&gt;";

// 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>
{'fraction_non_alphanumeric': 0.17271659324522762, 'fraction_numerical': 0.020293685756240822, 'mean_word_length': 3.7194733194733196, 'pattern_counts': {'":': 0, '<': 1121, '<?xml version=': 0, '>': 1123, 'https://': 16, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 4, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3888265', 'n_tokens_mistral': 14809, 'n_tokens_neox': 12153, 'n_words': 2882}