DEPRECATED
This is no longer maintained.
Please consider using d1-web instead.
Add-on for d1.
Replacement of standard HTML inputs: date
, datetime-local
.
Demo & Docs
- Replaces standard HTML
date
anddatetime-local
inputs withtext
input and custom dropdown calendar. - Optionally keeps standard inputs for small-screen devices (
minWidth
option). - Date
format
option:d.m.Y
,Y-m-d
,m/d Y
. - Validates
min
andmax
dates. - Default date for empty field in
data-def
attribute. - Set
data-modal
attribute to overrideshowModal
option. - Customizable icons.
npm install d1calendar
On page load call:
d1calendar.init(options);
In your markup, add calendar
class to date
and datetime-local
inputs which should be replaced.
CSS class of buttons.
Default: "pad hover"
Date format, one of following:
"d"
ford.m.Y
"m"
form/d Y
"y"
forY-m-d
Default: "d"
Hash of "close" link.
Default: "#cancel"
Hash of "now" link.
Default: "#now"
Icons to show after input. Array of up to 3 icons, used to:
- toggle visibility of the date picker.
- set current date (and time)
- clear input value
Default: ["date", "now", "delete"]
Id
of the popup date picker element.
Default: "pick-date"
Minimum window width for which inputs should be replaced.
Default: 801
Query selector of inputs to replace.
Default: "input.calendar"
Show calendar in popup (0
) or in modal (1
).
Default: 0
Minimum window width for which calendar is shown in dropdow (otherwise in modal).
Default: 801
Minutes step for datetime input.
Default: 1
- IE 10+
- Latest Stable: Chrome, Firefox, Opera, Safari