jQuery DatePicker Example

by HĂ©ctor Cabrera

HTML

<div class="input-group">
	<input type="text" class="form-control" name="date" id="date" data-select="datepicker">
	<span class="input-group-btn"><button type="button" class="btn btn-primary" data-toggle="datepicker">Select a Date</button></span>
</div>

CSS

.datepicker {

	position: absolute;
	top: 18px;
	left: 18px;
	background: #FFF;
	padding: 4px;
	border: 1px solid #CCC;
	font-size: 16px;
	font-weight: 400;
	z-index: 50;
	/* box-shadow */
	-webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.15);
	box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.15);
}

.datepicker * {

	/* box-sizing */
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
}

.datepicker .tip {

	position: absolute;
	left: 12px;
	top: -12px;
	z-index: 5;
	width: 0;
	height: 0;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-bottom: 12px solid #CCC;
}

.datepicker .tip:before {

	content: ' ';
	position: absolute;
	left: -8px;
	top: 2px;
	z-index: 20;
	width: 0;
	height: 0;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-bottom: 10px solid #FFF;
}

.datepicker a {

	text-decoration: none;
	color: #000;
}

.datepicker .row {

	margin: 0;
	padding: 0;
	overflow: hidden;
	width: 100%;
}

.datepicker .row.header {

	text-align: center;
	position: relative;
	margin: 4px 0;
}

.datepicker .row.header a {

	margin: 0 3px;
	cursor: pointer;
}

.datepicker .row.header .prev {

	display: block;
	position: absolute;
	left: 0;
	top: 0;
	margin: 0;
	width: 10px;
	height: 10px;
	padding: 4px;
}

.datepicker .row.header .next {

	display: block;
	position: absolute;
	right: 0;
	top: 0;
	margin: 0;
	width: 10px;
	height: 10px;
	padding: 4px;
}

.datepicker .row.header .prev .arrow{
	display: block;
	width: 0;
	height: 0;
	border-top: 5px solid transparent;
	border-right: 6px solid #000;
	border-bottom: 5px solid transparent;
	float: left;
}

.datepicker .row.header .next .arrow{
	display: block;
	width: 0;
	height: 0;
	border-top: 5px solid transparent;
	border-left: 6px solid #000;
	border-bottom: 5px solid transparent;
	float: right;
}

.datepicker .row.header .prev.disabled {

	cursor: default;
}

.datepicker .row.header .next.disabled {

	cursor:...

JavaScript

/**
* jQuery DatePicker
* @author biohzrdmx <github.com/biohzrdmx>
* @version 1.0
* @requires jQuery 1.8+
* @license MIT
*/
;(function($) {
	//
	$.datePicker = {
		strings: {
			monthsFull: ['January', 'Febraury', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
			monthsShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
			daysFull: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
			daysShort: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
			messageLocked: 'The day you have just selected is not available'
		},
		defaults: {
			formatDate: function(date) {
        //var formatted = $.datePicker.utils.pad(date.getDate(), 2) + '/' + $.datePicker.utils.pad(date.getMonth() + 1, 2) + '/' +  date.getFullYear();
				var formatted = $.datePicker.utils.pad(date.getMonth() + 1, 2) + '/' + $.datePicker.utils.pad(date.getDate(), 2) + '/' + date.getFullYear();

				return formatted;
			},
			parseDate: function(string) {
				var date = new Date();
        
        if ( string ) {
        	formatted_date = string.split('/');
        	date = new Date( formatted_date[2], formatted_date[0] - 1, formatted_date[1] );
        }
        
				return date;
			},
			selectDate: function(date) {
				return true;
			},
			limitCenturies: true,
			closeOnPick: true,
			appendTo: null
		},
		utils: {
			firstDay: function(year, month) {
				return new Date(year, month, 1).getDay();
			},
			daysInMonth: function(year, month) {
				return new Date(year, ++month, 0).getDate();
			},
			buildDecadePicker: function(century, year) {
				var obj = $.datePicker,
					decades = $('<div class="decades"></div>'),
					firstDecade = (Math.floor(century/100) * 100) - 10,
					limit = $.datePicker.defaults.limitCenturies;
				// Decade header
				var header = '<div class="row header">'+
								'<a href="#" class="prev'+(limit && firstDecade < 1900 ? ' disabled' : '')+'"><span...