Play demo

Text field

Profile Page

Subscribe

Credit Card

Expiration

Places

Partenza

Datedropper is a jQuery datepicker plugin.

Download Version 2.0
9990thanks

Install
in 3 simple
steps

Head

<script src="js/datedropper.js"></script>
<link rel="stylesheet" type="text/css" href="js/datedropper.css">

Body

<input type="text" id="departure" />

End

<script>$( "#departure" ).dateDropper();</script>

Options

  • animate
  • init_animation
  • format
  • lang
  • lock
  • maxYear
  • minYear
  • yearsRange
  • dropPrimaryColor
  • dropTextColor
  • dropBackgroundColor
  • dropBorder
  • dropBorderRadius
  • dropShadow
  • dropWidth
  • dropTextWeight

Download, fork and share

animate

When set to true (default) the dropdown will run an initial state animation when the user clicks the control for the first time and all user changes are animated.

Close

init_animation

Animation Style to use when init datedropper. There are three available animation values: fadeIn(default), bounce, dropDown.

Close

format

A date format string that dateDropper expects existing values to be in and will write dates out it. Default: m-d-Y

Value Description Result
M Short month Jan
F Long month January
m Numeric month 01-12
n Non-padded numeric month 1-12
Y Long numeric year 2015
d Padded numeric day 01-31
j Non-Padded Numeric day 1-31
D Short day-of-week Sun
l Long day-of-week Sunday
Close

lang

Display Language to use for Month name and Day-of-week. (English by default)

Value Result
ar Arabic
it Italian
hu Hungarian
gr Greek
es Espanol
da Dansk
de Deutsch
nl Dutch
fr Francais
pl Polski
pt Portuguese
si Slovenian
uk Ukrainian
ru Russian
tr Turkish
ko Korean

Special thanks are due to the entire community of github.

Close

lock

Set the initial value to current date or lock the control value to current date: false(default), from, to.

Close

maxYear

The highest year value the control will allow. Current year by default.

Close

minYear

The oldest year the control will allow. Default: 1970

Close

yearsRange

It groups the years based on the value set(multiple). Default: 10

Close

dropPrimaryColor

Specify a color value for drop down accent color. Default: #01CEFF

Close

dropTextColor

Specify a color value for drop down text color. Default: #333

Close

dropBackgroundColor

Specify a color value for drop down background color. Default: #FFFFFF

Close

dropBorder

Specify a css proprieties for drop down border style. Default: 1px solid #08C

Close

dropBorderRadius

Specify a integer value for drop down border radius. Default: 8

Close

dropShadow

Specify a css proprieties for drop down shadow. Default: 0 0 10px 0 rgba(0, 136, 204, 0.45)

Close

dropWidth

Specify a integer value for drop down width. Default: 124

Close

dropTextWeight

Specify a integer value for drop down text weight. Default: bold

Close