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
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 |
|
||||||||||||||||||||||
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 |
event | On date selected |
dayselected.f.datepicker |
event | On day selected |