datepicker Configurator
Configure your input widget to your needs. Tip set check inlinePicker option and watch changes.
Rendered output
Code input
Config type
all input types
only date
dashed/expanded
JSON/compressed
Markup format
verbose
one line
HTML5 datepicker widget date type control cookbook
creating a daterange picker (from <-> to) with two date widgets
disable specific dates in datepicker
Using datepicker for a birthdate
Dynamically setting min or max attribute to today's value
Creating inline calendars
Using date + time input to create datetime-local input
webshim's github repository, downloads and links
documentation / readme
download
repository
live configuration options
$.prop/$.attr
min
max
defaultValue
list
date-list (predefined datalist)
placeholder
disabled
readonly
required
Config properties / data-date attribute
startView
minView
size
startValue (only used if value is empty)
useDecadeBase
0
max (only with max option)
min (only with min option)
inlinePicker
noChangeDismiss
openOnFocus
splitInput
yearSelect
monthSelect
daySelect
buttonOnly
nopicker
calculateWidth
monthNames (only with monthSelect checked)
monthNamesShort
monthDigits
monthNames
popover
popover.position
"my": "left top", "at": "left bottom"
"at": "right bottom"
"my": "left middle", "at": "right middle"
popover.appendTo
auto (mostly = element)
element
body
popover.inline
false
true (same as "slide")
"fade"
"no"
Classes/SASS extends
show-week
show-yearbtns
hide-btnrow
show-uparrow
show-selectnav
hide-spinbtns
hide-dropdownbtn
hide-inputbtns
inputbtns-outside
a11yhide-inputbtns
Style/Theme
Style-/Themeswitcher
general document/browser enviroment
direction of the document
ltr
rtl
webshim.activeLang();
widget scale
Polyfill/enhance strategy
"auto" enhance non-mobile
false: only polyfill
true: enhance all