Pickadate Example

Pickadate.js is a "mobile-friendly, responsive, and lightweight jQuery date and time input picker."

Date Example1

(Format: mm/dd/yyyy)

Dropdowns for Month and Year

Requirements

The following pieces of code are required to make Pickadate work:

<head> portion:

		<link rel="stylesheet" href="https://common.olemiss.edu/_js/pickadate.js-3.5.3/lib/themes/classic.css" id="theme_base">
		<link rel="stylesheet" href="https://common.olemiss.edu/_js/pickadate.js-3.5.3/lib/themes/classic.date.css" id="theme_date">

Within <form>

Simply define the input id and utilize it to specify the formatting in the JavaScript setup as illustrated below. You may make use of the HTML5 placeholder attribute to demonstrate the requested formatting.

Before closing </body>

Call to jQuery & pickadate.js

		<script src="https://common.olemiss.edu/_js/jquery.js"></script>
		<script src="https://common.olemiss.edu/_js/pickadate.js"></script>

(I have compiled the four scripts it uses into this single script call.)

Field formatting

		<script type="text/javascript">
// PICKADATE FORMATTING

$( '#date_1' ).pickadate( {
	formatSubmit: 'mm/dd/yyyy',
	hiddenName: true
} );
		</script>

The "formatSubmit" option can be changed depending on which format you need to use. You can take away the option for users to type the date manually, but non-javascript users must still be aware of the required formatting. You can utilize the HTML5 placeholder attribute for newer browsers and and off-screen element for older: <span class="offscreen">(Format: mm/dd/yyyy)</span>.

Here's the other thing Pickadate does well:

Time Picker

You can view the source code to see what is necessary to make this work.

More examples are coming, but others can be seen on the pickadate.js website if you want to explore it now.