Using JQuery DatePicker UI Component

JQuery has become undoubtedly the most widely used JavaScript library. It does live up to the slogan - "write less, do more".

JQuery allows you to use make AJAX calls seamlessly. For more information on how to use AJAX with JQuery, click [here].

In this blog, I want to show how to use DatePicker to take date from user. DatePicker is part of UI components. UI Components script must be downloaded from [here] and must be referenced from your page in which you want to use DatePicker.

Of course do remember UI doesn’t work on its own. It is based on core JQuery ,so you must download JQuery from here.

Apart from UI library and core JQuery, we also need to download CSS to apply themes to DatePicker. So select the theme you want to use and download relevant CSS file. Go to jquery Ui download page and click on Download button after selecting the required theme in the dropdown list.

Make sure you copy all .js and .css files, related to JQuery, into the folder in which the web page that uses DatePicker is present.

Here is the sample html page which uses JQuery DatePicker components with Smoothness theme.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>Using JQuery DatePicker</title>
    <link rel="stylesheet" href="jquery-ui.css" />
    <script language="javascript" src="jquery-1.5.1.min.js"></script>
    <script language="javascript" src="jquery-ui-1.8.10.custom.min.js"></script>
    <script>
	$(function() {
	   $("#trandate" ).datepicker(
	                 { dateFormat: 'dd-M-yy', 
	                   showAnim: 'slide', 
	                   changeMonth: true, 
	                   changeYear: true, 
	                   yearRange: '1990:2020' 
	                }
	                );
	 });
	 
        function show() {
           alert( $("#trandate").val());
     }
    </script>
  </head>
  <body>
         <h2>Using JQuery DatePicker</h2>
         Enter Transaction Date :  <input type="text" id="trandate"/>
         <p/>
         <input type="button" value="Process" onclick="show()" />
  </body>
</html>

In the document ready event, represented by $(function() {} ), call datepicker method for textbox with id - trandate. This method allows you to customize the way datepicker works. In the example, we set date format, animation , year range and opted to have year and month dropdowns using changeYear and changeMonth options.

As and when you enter into textbox, date picker is displayed in the textbox. Once date is selected, it is formatted according to dateFormat option and placed in the textbox.

For more details regarding DatePicker, refer to http://jqueryui.com/demos/datepicker.