Beautiful Animated jQuery Date Picker Plugin - datedropper

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

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.