tutorial #6: Date Picker

Like Autocomplete in the preceding demonstration, Date Picker is commonly used on webpages. It allows users to submit a date through an online calendar form.

(Please Note: the Date Picker requires both jquery-ui-1.8.17.custom.css and jquery-ui-1.8.17.custom.min.js to work. For more information, visit: CSS Framework and jQuery UI.)

This last demonstration will show you how to create a form with Date Picker, and how to build the jQuery code needed, while learning the purpose of each line of code. Furthermore, you will learn how to create the HTML and CSS for the Date Picker form.

Below is the demonstration of Date Picker. To display the calendar, click inside the form or the image next it. Then click on one of the dates on calendar and that date will appear in the form.

The How-To

HTML

                 
<div id="calendar-form">

<form action="#" method="post">

<input type="text" id="calendar" placeholder="Choose A Date" />

</form>

</div>

CSS

#calendar-form input  {
    border: thin solid #155a7a;
    border-radius: 5px;
    color: #363636;
    display: block;
    font-family: Gotham,"Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size:16px;
    margin-bottom: 25px;
    padding: 15px;
	width:250px;
	display: inline-block;
}

#calendar-form input:focus  {
	border: #0A4E63 medium solid;
}

.ui-datepicker-trigger {
    margin-top: 3px;
	margin-bottom: -8px;
    margin-left: 5px;
}

jQuery

$(document).ready(function(){
	//The functions will be executed, once the page is ready.
	$('#calendar').datepicker({
//Selects the the input's attribute, then triggers the datepicker in jquery-ui.  
		showOn: 'both',
//Allows users to click on either the form or the image to make the calendar appear.   
		buttonText: 'Choose a date',//Inserts the "alt" attribute. 
		buttonImage:'lib/img/tutorial/tutorial_6/calendar_icon.png',
//Inserts the image and turns it into a button.
		buttonImageOnly: true,
//This makes sure that the image is shown.
		numberOfMonths: 2,//Displays both the previous and current month.
		maxDate: '0d',//Sets the date to current.
		minDate: '-1m',
//This will display the dates of the previous and current month.
		showButtonPanel: true//This will highlight today's date.
	});
});//Close.

end