The Demo

Date: -

Date range:

Click the icon next to the input field to show the datepicker. Set the datepicker to open on focus (default behavior), on icon click, or both. The complete API

Other References:

  • http://woork.blogspot.com/2009/01/beautiful-datepickers-and-calendars-for.html
  • http://jqueryui.com/demos/datepicker/#multiple-calendarsD

    How to set this up

    Green bold text indicates that this is user defined

    1. I downloaded the jquery library put it in the folder scripts at:
      /scripts/jq

    2. I grabbed and added this image to my images folder here: /images/calendar/calendar.gif

    3. Created a javascript file (/scripts/cal_jq.js) which will load all of my necessary libraries to make this magical calendar thing happen. it looks like this 
      //file: /scripts/cal_jq.js

function set_up_calendar ()
{
	//convention:       <script type="text/javascript">set_up_calendar()</script>

	document.write ('',
	
	'<link type="text/css" href="/scripts/jq/themes/base/ui.all.css" rel="stylesheet" />',
	'<script type="text/javascript" src="/scripts/jq/js/jquery.js"></script>',
	'<script type="text/javascript" src="/scripts/jq/ui/ui.core.js"></script>',
	'<script type="text/javascript" src="/scripts/jq/ui/ui.datepicker.js"></script>',
	'<link type="text/css" href="/scripts/jq/demos/demos.css" rel="stylesheet" />',

	''
	);
}

    4. This code goes in the header of your html file that contains the date fields. It will load the javascript file and call the function that loads all the other resources you will need. 
       <script type="text/javascript" src="/scripts/cal_jq.js"></script>
 <script type="text/javascript">set_up_calendar()</script>

    5. Setting up the date fields note one is given an id of datepicker and the other datepicker_2. You can use any ID you want just make sure you use it in the code bit that follows in the next step 
      <p>Date: <input type="text" id="datepicker" size="12"> -  <input type="text" id="datepicker2"  size="12"></p>

    6. Here is the jquery code it goes just above your date fields note the correlation between the id's (in bold) with the previous example code chunk. 
      
	<script type="text/javascript">
	$(function() {
		$("#datepicker").datepicker({showOn: 'button', buttonImage: '/images/calendar/calendar.gif', buttonImageOnly: true});

		$("#datepicker2").datepicker({showOn: 'button', buttonImage: '/images/calendar/calendar.gif', buttonImageOnly: true});

	});
	</script>

      * Special Note: If you are having other languages write this out such as perl remember to escape the dollar signs. Example: \$ or it will break

    • Thank you jquery