Create a toggleable dropdown with an datepicker.


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.


Positioned to the right


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

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.



<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'] }">

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.


with seconds, min/max hour

with no seconds showing every 10 minutes


<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

JavaScript options

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

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
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

Init element manually

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


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