The Kirby-Datepicker provides a datepicker field for the Kirby-CMS. It is basically a wrapper for the wonderful flatpickr.
- Download and Unzip Download this repository and unzip it into the root of your project.
Add Datepicker as a field to one of your blueprints like this:
title: Some Site
pages: false
fields:
datepicker:
label: Datepicker
type: datepicker
width: 1/3
Configs can be set by passing them into the kirby config file e.g:
c::set('dp_dateFormat', 'd-m-Y');
Option | Default | Description |
---|---|---|
dp_altFormat | 'F j, Y' | Exactly the same as date format, but for the altInput field |
dp_altInput | false | Show the user a readable date (as per altFormat), but return something totally different to the server. |
dp_allowInput | false | Allows the user to enter a date directly input the input field. By default, direct entry is disabled. |
dp_clickOpens | true | Clicking on the input opens the date (time) picker. Disable this if you wish to open the calendar manually with .open() |
dp_dateFormat | 'F j, Y' | A string of characters which are used to define how the date will be displayed in the input box. |
dp_enableTime | false | Enables time picker |
dp_enableSeconds | false | Enables seconds in the time picker. |
dp_noCalendar | false | Hides the calendar. For use along with enableTime. Make sure to change the "Time Format Characters" |
dp_hourIncrement | 1 | Adjusts the step for the hour input (incl. scrolling) |
dp_minuteIncrement | 5 | Adjusts the step for the minute input (incl. scrolling) |
dp_maxDate | null | The maximum date that a user can pick to, as a string. See Date.parse() |
dp_minDate | null | The minimum date that a user can pick to, as a string. See Date.parse() |
dp_shorthandCurrentMonth | false | Show the month using the shorthand version (ie, Sep instead of September). |
dp_weekNumbers | false | Enables display of week numbers in calendar. |
dp_time_24hr | false | Displays time picker in 24 hour mode without AM/PM selection when enabled. |
Character | Description | Example |
---|---|---|
d | Day of the month, 2 digits with leading zeros | 01 to 31 |
D | A textual representation of a day | Mon through Sun |
l | (lowercase 'L') A full textual representation of the day of the week | Sunday through Saturday |
j | Day of the month without leading zeros | 1 to 31 |
J | Day of the month without leading zeros and ordinal suffix | 1st, 2nd, to 31st |
w | Numeric representation of the day of the week | 0 (for Sunday) through 6 (for Saturday) |
F | A full textual representation of a month | January through December |
m | Numeric representation of a month, with leading zero | 01 through 12 |
n | Numeric representation of a month, without leading zeros | 1 through 12 |
M | A short textual representation of a month | Jan through Dec |
U | The number of seconds since the Unix Epoch | 1413704993 |
y | A two digit representation of a year | 99 or 03 |
Y | A full numeric representation of a year, 4 digits | 1999 or 2003 |
Character | Description | Example |
---|---|---|
H | Hours (24 hours) | 00 to 23 |
h | Hours | 1 to 12 |
i | Minutes | 00 to 59 |
S | Seconds, 2 digits | 00 to 59 |
s | Seconds | 0, 1 to 59 |
K | AM/PM | AM or PM |