Beautiful Animated jQuery Date Picker Plugin - datedropper

File Size: 29.6 KB
Views Total: 18053
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Beautiful Animated jQuery Date Picker Plugin - datedropper

datedropper is a pretty simple jQuery plugin which appends a beautiful, customizable and animated date picker to your input fields.


  • Currently supports over 17+ languages.
  • Subtle scrolling animations.
  • Custom date format, year range and min/max years.
  • Fully stylable in the JavaScript.

Basic usage:

1. Download the plugin and upload the datedropper.min.css, datedropper.min.js and dd-icon folder into your web server.

2. Link to the required files as follows:

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

3. Call the function on the target input field to generate a default date picker.

$( "input" ).dateDropper();

4. Customize the date picker with the following options.

$( "input" ).dateDropper({
  animate: true,

  // bounce, dropDown
  init_animation: "fadein", 
  format: "m/d/Y",
  lang: "en",

  // Set the initial value to current date or lock the control value to current date
  // false(default), from, to.
  lock: false,
  maxYear: t_y_cur,
  minYear: 1970,
  yearsRange: 10,

  dropPrimaryColor: "#01CEFF",
  dropTextColor: "#333333",
  dropBackgroundColor: "#FFFFFF",
  dropBorder: "1px solid #08C",
  dropBorderRadius: 8,
  dropShadow: "0 0 10px 0 rgba(0, 136, 204, 0.45)",
  dropWidth: 124,
  dropTextWeight: 'bold'

Change log:


  • Add Georgian Language pack support
  • ES short weekdays fixed


  • bugfix


  • Persian Language Translation MIN


  • REVERT Allow to use both script options and dom data options MIN


  • bugfixes
  • Style improvement


  • bugfixes
  • Added new feature "modal"
  • Style improvement


  • updated to datedropper 3.

About Author:

Author: Felice Gattuso


This awesome jQuery plugin is developed by felicegattuso. For more Advanced Usages, please check the demo page or visit the official website.