What is DateDropper?

DateDropper is:

• Type: jQuery Extension made by Felice Gattuso
• GitHub initial commit: February 16, 2015
• Purpose: "a jQuery plugin that provides a quick and easy way to manage dates for input fields."

Support & Dependencies

• Dependency: jQuery v 1.7 - current
• Browser Support: earliest version supported
  • IE 9+
  • FF 4+
  • Chrome 14+
  • Safari 5+
  • Opera 12+

Set Up DateDropper

Step 1: Links in the head of your document

• jQuery
• DateDropper Plugin
• DateDropper stylesheet
• Your own JS file

It should look similar to this:

<!-- STYLESHEETS -->
<link rel="stylesheet" type="text/css" href="css/datedropper.css">

<!-- SCRIPTS -->
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/datedropper.min.js"></script>
<script src="js/main.js"></script>

Step 2: Set up the input fields

Input fields should have the following attributes:

•  <input type="text" id="anyID"> 

• Set type to "text"
• Set id to "whatever"

Step 3: Configure using JS

• Target input fields by their #id's:

  $("#birthDate")

• Call the dateDropper method

  $("#birthDate").dateDropper()

• Pass in options as an object

  $("#birthDate").dateDropper({option:value})

Watch: DateDropper in action!

Example Code Demo

Live Code Example

Learn: DateDropper Code Walkthrough

HTML

<h3>Example Input Fields</h3>

<input type="text" id="ex1" placeholder="Birth Date">

<input type="text" id="ex2" placeholder="High School Graduation">

<input type="text" id="ex3" placeholder="First Kiss">

<input type="text" id="ex4a" placeholder="Grad month">

<input type="text" id="ex4b" placeholder="Grad year">

<input type="submit" value="submit" id="submit">

					

JS

$(function () {
$("#ex1").dateDropper({
format: " m / d / Y ",
minYear: "1930",
maxYear: "1998",
animation: "dropdown",
years_multiple: "20",
color: "#fa9f42"
});


$("#ex2").dateDropper({
format: "Y",
years_multiple: "10",
color: "#00BABE"
});


$("#ex3").dateDropper({
format: " l | F j, Y ",
minYear: "1930",
maxYear: "2015",
animation: "dropdown",
years_multiple: "20",
color: "#aad33a"
});


$("#ex4a").dateDropper({
format: "m",
animation: "bounce",
color: "#e33298"
});


$("#ex4b").dateDropper({
format: "Y",
maxYear: 2020,
animation: "bounce",
color: "#e33298"
});
});