Datepicker

Create a toggleable dropdown with an datepicker.

Usage

To create a datepicker, just add the data-f-datepicker attribute to an <input> element. You also have the possibility of customizing the date format. Just add the format option to the data-f-datepicker attribute (note: DD/MM/YYYY is the default).

The datepicker detects whether the JavaScript from the Form select component is being loaded. This allows you to quickly toggle between years and months through a select form inside the datepicker.

Example

Positioned to the right

Markup

<form class="f-form">
	<input type="date" data-f-datepicker="{ format : 'DD-MM-YYYY '}">
</form>

Blacked Out Dates

As well as setting a minimum and maximum selectable date you can also pass an array of dates to not be selectable.

Example

Markup

<form class="f-form">
	<input type="date" data-f-datepicker="{ format : 'DD/MM/YYYY', minDate : '29/01/2016', maxDate : '12/12/2016', blackoutDates : ['05/05/2016', '06/05/2016', '12/05/2016'] }">
</form>

Date & Time Picker

To add a time picker to the datepicker you need to pass the option timepicker: { active : true } in the options. You can also pass a format for the time picker that will dictate whether to show seconds or not. Valid formats are HH:mm:ss or HH:mm.

Example

with seconds, min/max hour

with no seconds showing every 10 minutes

Markup

<form class="f-form">
	<input type="date" data-f-datepicker="{ minDate: true, timepicker: { active : true, minHour : 12, maxHour : 15 } }"> <!-- with seconds -->
	<input type="date" data-f-datepicker="{ minDate: true, timepicker: { active : true, format: 'HH:mm', every : 10 } }"> <!-- with no seconds -->
</form>

JavaScript options

This is an example of how to set options via attribute:

<input type="date" data-f-datepicker="{weekstart:0, format:'DD-MM-YYYY'}">
Option Possible value Default Description
weekstart integer (0..6) 1 Start of the week
i18n JSON object { months:['January',...], weekdays:['Sun',..,'Sat'] } Language string definitions
format any combination of DD, MM and YY 'DD/MM/YYYY' Date format string
offsettop integer 5 Offset to the input value
minDate misc false Min. date
maxDate misc false Max. date
blackoutDates array false An array of blacked out dates that aren't selectable on the calendar
pos 'auto', 'top', 'bottom', 'right' 'auto' Position of the datepicker
timepicker
active boolean false Activate timepicker
format HH:mm:ss or HH:mm HH:mm:ss Time format
every integer false Show every x minutes only
minHour integer false The hour from
maxHour integer false The hour to
mobile boolean false select whether or not to use the native device datepicker on touch devices
renderTo string body place to render the datepicker
template function function this is a very large function, it's not recommended to alter this without referring to the components source code

Init element manually

let datepicker = FatKit.datepicker(element, { /* options */ });

Events

Name Parameter Description
show.f.datepicker event On datepicker dropdown show
hide.f.datepicker event On datepicker dropdown hide
update.f.datepicker event On calendar rendering
dateselected.f.datepicker eventOn date selected
dayselected.f.datepicker eventOn day selected