| Server IP : 104.21.80.248 / Your IP : 172.71.28.156 Web Server : Apache/2.4.25 (Win32) OpenSSL/1.0.2j PHP/5.6.30 System : Windows NT WIN-ECQAAA40806 6.2 build 9200 (Windows Server 2012 Standard Edition) i586 User : SYSTEM ( 0) PHP Version : 5.6.30 Disable Function : NONE MySQL : ON | cURL : ON | WGET : OFF | Perl : OFF | Python : OFF | Sudo : OFF | Pkexec : OFF Directory : E:/Inetpub/www/news/elearning/admin/js/datepicker/ |
Upload File : |
<!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="jsDatePick.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 - 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>