How to use jQuery UI datepicker in webpage

I was developing a simple java web application where I needed a datepicker. So here is how I used the jQuery UI datepicker in my application.

First you need to include jQuery UI javascript and css in head of your html page.

<head>
<script type="text/javascript"
	src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<link
	href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"
	rel="stylesheet" type="text/css" />

<script
	src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
</head>

Then add following html code in body section of your page where you want datepicker.

<input id="datepicker" />

after that add following javascript to your head section.

<script type="text/javascript">
	$(document).ready(function() {
		$("#datepicker").datepicker({
			changeMonth : true,
			changeYear : true,
			dateFormat : "yy-mm-dd",
			altField : "#alternate",
			altFormat : "DD, d MM, yy",
			showButtonPanel : true,
			showOtherMonths : true,
			selectOtherMonths : true,
			showOn : "button",
			buttonImage : "calendar.gif",
			buttonImageOnly : true,
			showAnim : "slide"
		});
	});
</script>

Above javaScript code runs as soon as the full html page is ready. The various options are for different variation available with the datepicker ui. You can remove and add any option as per the requirements.

Suppose you don’t want the animation while calendar loads, then remove the last option ‘showAnim : “slide”.

You can find different variations at jQuery UI datepicker.

I’ll soon upload zip of html file with working the Datepicker.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s