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.

Features:

• 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="//code.jquery.com/jquery-1.12.2.min.js"></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,

  //CSS PRIOPRIETIES
  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:

2017-03-09

• Add Georgian Language pack support
• ES short weekdays fixed

2017-01-25

• bugfix

2017-01-07

• Persian Language Translation MIN

2017-01-05

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

2016-12-15

• bugfixes
• Style improvement

2016-12-14

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

2016-12-09

• updated to datedropper 3.

About Author:

Author: Felice Gattuso

Website: http://felicegattuso.com/projects/datedropper/

---

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