h2 Examples
#strap.example
	h4 Custom elements and input groups
	p
		| flatpickr can parse an input group of textboxes and buttons, common in 
		strong Bootstrap
		|  and other frameworks.
	p
		| This permits additional markup, as well as custom elements to trigger the state of the calendar.
	p
		| Mark your input element with
		code data-input
		| (mandatory), and any additional buttons with
		code data-toggle
		| ,
		code data-open
		| ,
		code data-close
		| , or
		code data-clear
		| .
	pre.prettyprint.lang-html.
		<p class="flatpickr" data-wrap="true" data-click-opens="false">
			<input placeholder="Pick date" data-input>

			<a class="input-button" data-toggle><i class="icon-calendar"></i></a>
			<a class="input-button" data-clear><i class="icon-close"></i></a>
		</p>

	p.flatpickr.input-group(data-allow-input='true', data-wrap='true', data-click-opens='false')
		input(type="text", data-input='', placeholder='Pick date')
		a.input-btn(data-toggle='')
			i.icon-calendar
		a.input-btn(data-clear='')
			i.icon-close
		div(style='clear:both;')

#disable.example(data-desc='Disabling dates')
	h4 Disabling dates
	.row
		.col.col-6
			p Disable a date interval, or a specific date.
			pre.prettyprint.lang-js.
				document.getElementById("#disableRange").flatpickr({
					disable: [
						{ from: "2016-08-16", to: "2016-08-19" },
						"2016-08-24",
						new Date().fp_incr(30) // 30 days from now
					]
				});

			p
				input#disableRange(type='text', placeholder='Select date')

		.col.col-6
			p Or pass in a custom function and disable dates using any logic you want.
			pre.prettyprint.lang-js.
				document.getElementById("#disableOddDays").flatpickr({
					disable: [
						function(date){ // disable odd days
							return date.getDate()%2 > 0;
						}
					]
				});

			p
				input#disableOddDays(type='text', placeholder='Select date')

#enable.example(data-desc='Disabling dates')
	h4 Enabling dates
	p Use the 
		code enable[]
		|  option to disable all dates except the ones you specify.
	.row
		.col.col-6
			p Pass in date strings, Date objects, or functions.
			pre.prettyprint.lang-js.
				document.getElementById("#enableNextSeven").flatpickr({
					enable: [
						{
							from: "today",
							to: new Date().fp_incr(7) // 7 days from now
						}
					]
				});

			p
				input#enableNextSeven(type='text', placeholder='Select date')
		.col.col-6
			p
				| For instance, to enable only business days of 2016:
			pre.prettyprint.lang-js.
				document.getElementById("#enableCustom").flatpickr({
					enable: [
						function(dateObj){
							// dateObj is a JavaScript Date
							return dateObj.getDay() %6 !== 0 && dateObj.getFullYear() === 2016;
						}
					]
				});

			p
				input#enableCustom(type='text', placeholder='Select date')

#utc.example(data-desc='Timezones & UTC')
	h4 UTC mode
	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.
	pre.prettyprint.lang-html.
		<input type='text' class='flatpickr' data-utc=true data-default-date="Wed, 21 Sep 2016 18:33:47 GMT" data-enable-time=true>

	p
		input.flatpickr(type='text', data-utc='true', data-default-date='Wed, 21 Sep 2016 18:33:47 GMT', data-enable-time='true')
	br
	pre.prettyprint.lang-html.
		<input type='text' class='flatpickr' data-default-date="2016-12-27T16:16:22.585Z" data-utc=true data-enable-time=true>

	p
		input.flatpickr(type='text', data-default-date='2016-12-27T16:16:22.585Z', data-utc='true', data-enable-time='true')

hr

#eventsAPI.example(data-desc='Events API')
	h2 Events
	pre.prettyprint.lang-js.
		document.getElementById("events-api-example").flatpickr({
			minDate: "today",
			enableTime: true,
			onChange: function(dateObj, dateStr, instance) {
				...
			},
			onOpen: function(dateObj, dateStr, instance){
				...
			},
			onClose: function(dateObj, dateStr, instance){
				...
			}
		});

	p#events(style='height: 80px; overflow-y: auto')
	p
		input#events-api-example(type='text', placeholder='Select date')
	hr
	h4#onDayCreate onDayCreate()
	p
		| Take full control of every date cell with the
		code onDayCreate()
		| hook.
	pre.prettyprint.lang-js.
		flatpickr("#dayCreate", {
			onDayCreate: function(dObj, dStr, fp, dayElem){
				// utilize fp.currentYear, fp.currentMonth, dayElem.textContent
				if (Math.random() < 0.15)
					dayElem.innerHTML += "<span class='event'></span>";

				else if (Math.random() > 0.85)
					dayElem.innerHTML += "<span class='event busy'></span>";
			}
		});

	p
		input#dayCreate(type='text', placeholder='Select date')
	hr

#fiscal-calendar.example(data-desc='Fiscal Calendar')
	h4 Fiscal Calendar
	p
		| You may override the
		code getWeek()
		| function, used for calculating a week number, for various purposes. A fiscal year is used for calculating yearly financial statements. In this example, we will use override the
		code getWeek()
		| function to display the fiscal term instead of the usual week numbers.
	pre.prettyprint.lang-html.
		<input type='text' id="fiscal" placeholder="Fiscal Calendar">

	pre.prettyprint.lang-js.
		Flatpickr.prototype.getWeek = function(givenDate){
			var checkDate = new Date(givenDate.getTime());
			checkDate.setDate(checkDate.getDate() + 4 - (checkDate.getDay() || 7));
			var time = checkDate.getTime();
			checkDate.setMonth(7);
			checkDate.setDate(28);
			var week = (Math.floor(Math.round((time - checkDate) / 86400000) / 7) + 2);
			if (week < 1) {
				week = 52 + week;
			}
			return 'FW'+week;
		}

		document.getElementById("fiscal").flatpickr({
			weekNumbers: true
		});

	p
		input#fiscal(type='text', placeholder='Calendar w/ fiscal periods')

hr