1#@!#!123s

��JFIF�� 1#@!#!123s
: / home / gceburdwan / www / Online_Admission / studentpoint / jsdatepick-calendar /
Filename : example-jquery-full.html
back
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>jsDatePick Javascript example</title>

<!-- 



	Copyright 2010 Itamar Arjuan

	jsDatePick is distributed under the terms of the GNU General Public License.

	

	****************************************************************************************



	Copy paste these 2 lines of code to every page you want the calendar to be available at

-->

<link rel="stylesheet" type="text/css" media="all" href="jsDatePick_ltr.min.css" />

<!-- 

	OR if you want to use the calendar in a right-to-left website

	just use the other CSS file instead and don't forget to switch g_jsDatePickDirectionality variable to "rtl"!

	

	<link rel="stylesheet" type="text/css" media="all" href="jsDatePick_ltr.css" />

-->

<script type="text/javascript" src="jquery.1.4.2.js"></script>

<script type="text/javascript" src="jsDatePick.jquery.min.1.3.js"></script>

<!-- 

	After you copied those 2 lines of code , make sure you take also the files into the same folder :-)

    Next step will be to set the appropriate statement to "start-up" the calendar on the needed HTML element.

    

    This example is of the direct HTML appending calendar version which can be used

    in two ways. with a stripped mode or without.

    

    BUT - in both cases , it simply attaches to an HTML element and stays there.    

    

    When used in this way , you will have to make a javascript function that will be registered

    as an event handler of the clicking action on each day.

    

    This is done easily like shown in the example.

-->

<script type="text/javascript">

	window.onload = function(){		

		

		g_globalObject = new JsDatePick({

			useMode:1,

			isStripped:true,

			target:"div3_example"

			/*selectedDate:{				This is an example of what the full configuration offers.

				day:5,						For full documentation about these settings please see the full version of the code.

				month:9,

				year:2006

			},

			yearsRange:[1978,2020],

			limitToToday:false,

			cellColorScheme:"beige",

			dateFormat:"%m-%d-%Y",

			imgPath:"img/",

			weekStartDay:1*/

		});

		

		g_globalObject.setOnSelectedDelegate(function(){

			var obj = g_globalObject.getSelectedDay();

			alert("a date was just selected and the date is : " + obj.day + "/" + obj.month + "/" + obj.year);

			document.getElementById("div3_example_result").innerHTML = obj.day + "/" + obj.month + "/" + obj.year;

		});

		

		

		

		g_globalObject2 = new JsDatePick({

			useMode:1,

			isStripped:false,

			target:"div4_example",

			cellColorScheme:"beige"

			/*selectedDate:{				This is an example of what the full configuration offers.

				day:5,						For full documentation about these settings please see the full version of the code.

				month:9,

				year:2006

			},

			yearsRange:[1978,2020],

			limitToToday:false,

			dateFormat:"%m-%d-%Y",

			imgPath:"img/",

			weekStartDay:1*/

		});

		

		g_globalObject2.setOnSelectedDelegate(function(){

			var obj = g_globalObject2.getSelectedDay();

			alert("a date was just selected and the date is : " + obj.day + "/" + obj.month + "/" + obj.year);

			document.getElementById("div3_example_result").innerHTML = obj.day + "/" + obj.month + "/" + obj.year;

		});		

		

	};

</script>

</head>

<body>

	<h2>jsDatePick's Javascript Calendar usage example using jQuery - direct HTML appending</h2>

    

    This example will show the direct HTML appending version of the calendar

    <br />

    in two versions. one way is with the outside design and the other without.

    <br />

    This is done easily by using the <i>isStripped</i> property which you should supply in the Startup settings object.

    <br />

    Please take a look at the source of this file to fully understand how to use this calendar.

    <br />

    

    <div id="div3_example" style="margin:10px 0 30px 0; border:dashed 1px red; width:205px; height:230px;">

    	

    </div>

    

    

    <div id="div4_example" style="margin:10px 0 30px 0; border:dashed 1px blue; width:230px; height:250px;">

    	

    </div>

    

    

    <div id="div3_example_result" style="height:20px; line-height:20px; margin:10px 0 0 0; border:dashed 1px #666;"></div>

        

</body>

</html>