date
dropper

v.3.0

The smallest and powerful
jQuery UI datepicker.

19421 thanks

  • Download v.3.0
  • What's new
  • Demos
  • Get started
  • Docs

What's
new
in
3.0


  • introduced
    translation mode

  • introduced
    large mode

  • improved
    UX/UI

  • scripts
    completely
    redesigned

How it
works

  • Flight booking
  • Online payments
  • Social integrations

Get
started

1. Add datedropper libs on your HTML

Make sure to insert the js after the jQuery instance

2. Create the element that will be your datedropper

You must use the input tag and set "text" to the "type" property

3. Initialize script

Define element and function

<!doctype html>
<html>
<head>
<!-- custom css -->
<link href="datedropper.css" rel="stylesheet" type="text/css" />
<!-- jQuery lib -->
<script src="jquery.min.js"></script>
<!-- dateDropper lib -->
<script src="datedropper.js"></script>
</head>
<body>
<!-- tag element -->
<input type="text" />
<!-- init dateDropper -->
<script>
$('input').dateDropper();
</script>
</body>
</html>

Docs

Options

Now you can apply any options through data-attributes and no longer via JavaScript.

<input type="text" data-lang="it" />

Show all available options

Custom CSS

Now you can apply style properties through CSS and no longer via JavaScript. Therefore, use the theme generator to make all your customizations.

<input type="text" data-theme="YOUR CUSTOM NAME" />

Generate theme

License

  • MIT License
  • CC BY 4.0

Social

  • Fork on Github
  • Follow me on twitter

See also

  • Timedropper
  • Cookies
  • Paypal donations
Made with love by @felice_gattuso

Cookie terms×

What is a cookie?

Cookies are usually small text files, given ID tags that are stored on your computer's browser directory or program data subfolders. Cookies are created when you use your browser to visit a website that uses cookies to keep track of your movements within the site, help you resume where you left off, remember your registered login, theme selection, preferences, and other customization functions.The website stores a corresponding file(with same ID tag)to the one they set in your browser and in this file they can track and keep information on your movements within the site and any information you may have voluntarily given while visiting the website, such as email address.
Source: www.allaboutcookies.org

Cookies used

Cookies used are third parties(Google Analytics, Google Adsense) and are finalized to the statistical analysis and advertising.

Read more about:
Google Analytics policy
Google Adsense policy

All available options×

  • default-date

    This option offers the possibility to set a starting date. Please note that you must follow this specific format (mm-dd-yyyy) to allow the matching to recognize month, day and year.

    Default: CURRENT DATE

    data-default-date="11-13-2016"

  • disabled-days

    This option offers the possibility to set a string of disabled days. So, separete all days by comma and the picker will convert them into an array. Please note that you must follow this specific format (mm/dd/yyyy) to allow the matching to recognize month, day and year.

    Default: false

    data-disabled-days="12/13/2016,12/14/2016,12/15/2016"

  • format

    The date format the picker will write on the selected input.

    Default: "m-d-Y"

    data-format="F S, Y"

    Key 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
    S Suffixed numeric day 13th
    U Unix timestamp 1481328000
  • fx

    If set to true, the picker will run an initial state animation and all user changes are animated.

    Default: true

    data-fx="false"

  • fx-mobile

    Animations could be very slow on some older smartphones. To prevent this, set this option to false to disable animations on any mobile viewport.

    Default: true

    data-fx-mobile="true"

  • init-set

    This option changes the input value automatically, by default. Set to false to prevent it.

    data-init-set="false"

  • lang

    Languages used for months and days of the week.

    Default: en

    data-lang="it"

    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
  • large-mode

    This option enables to switch the size of the picker by clicking on the icon at the bottom or clicking on the day block.

    Default: false

    data-large-mode="true"

  • large-default

    If "data-large-mode" is set to true, this option shows the large view by default.

    Default: false

    data-large-default="true"

  • lock

    This option sets the date limit based on the assigned variable. If you set to "from", you can't select a date earlier than the current date. Opposed to this behavior, if it's set to "to", you can not select a date after the current date.

    Default: false

    data-lock="from"

  • jump

    It groups years based on the value set(multiple). This option is enabled when you click on the year block, to accellerate the transition between years.

    Default: 10

    data-jump="4"

  • max-year

    The highest year that the control will allow.

    Default: CURRENT YEAR

    data-max-year="2030"

  • min-year

    The lowest year that the control will allow.

    Default: 1970

    data-min-year="1800"

  • modal

    If this option is set to true, the picker will be displayed centered, with a dark overlay in background.

    Default: false

    data-modal="true"

  • theme

    Set the name of style that you have assigned on the stylesheet generated by the theme generator.

    data-theme="my-style"

  • translate-mode

    If it's set to true, you can change the language by clicking on the icon at the bottom.

    Default: false

    data-translate-mode="true"

Create your custom CSS×

Dec
31Saturday
2016
Colors scheme
Border-radius
Box-shadow
Other properties
Width

This website uses technical and third parts cookies. More information