Customizable Date Selector Plugin with jQuery and Moment.js - DateSelector

DateSelector is an easy yet highly customizable jQuery plugin that convert a normal text input into separate "day", "month" and "year" dropdowns for easy date & time selection. Intended for generating a birthday picker for your web application.

Features:

• Simple to implement.
• Supports date & datetime selection.
• Lots of customization options and API.
• Compatible with modern CSS frameworks like Bootstrap and Foundation.

See also:

• Customizable Dropdown Birthday Picker Plugin with jQuery
• Minimal jQuery Plugin For Easy Birthday Picker
• Minimalist jQuery Plugin For Birthday Selector - DOB Picker

Basic usage:

1. Add jQuery library together with the jQuery DateSelector plugin's JavaScript and Stylesheet into your web pages.

<link href="dateselector/dateselector.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="dateselector/jquery.dateselector.js"></script>

2. The plugin also relies on moment.js to handle dates.

<script src="/path/to/moment-with-locales.min.js"></script>

3. Create a regular text input field for the date selector.

<input class="demo" type="text">

4. Just call the plugin on the input field and we're ready to go.

$('.demo').dateSelector({
    cssFramework: 'foundation',
});

5. Default plugin options.

// the javascript query selector of a DOM element
container: null,

// custom class to added to the container
containerClass: null,

// bootstrap, foundation, etc.
cssFramework: null,

// The momentjs date format for display & getDateString method
dateFormat: 'DD/MM/YYYY HH:mm:ss',

// The default selector value
defaultValue: current date,

// To hide/show the selector's source element (usually an input)
hideSourceNode: true,  

// The max year of the selector
maxYear: current year,  

// The min year of the selector
minYear: 1970, 

// The function to call on date change
onDateChange: function(){} ,

// custom class to added to the selector's selects/dropdowns
selectsClass: null,

// To hide/show the date part of the selector
showDate: true,  

// To hide/show the time part of the selector
showTime: false 

6. Public methods.

• getDate - Return the selector value as a date object  
• setDate - Set the selector value with a date object 
• getDateString - Return the selector value as a string 
• setDateString - Set the selector value with a string  
• getDateStringWithFormat - Return the selector value as a string, following the given format 
• setDateStringWithFormat - Set the selector value with a string, following the given format

---

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