javascript calendar万年历使用实例

jquery calendar是一个很酷的日历效果，在多个浏览器测试过，都比较正常。下面来介绍一下如何使用这个日历到具体的web页面中。

head设置，将日历运行的js脚本以及css样式表装载

<script type="text/javascript" src="script/jquery-latest.pack.js"></script>
<script type="text/javascript" src="script/jquery-calendar.pack.js"></script>
<script type="text/javascript" src="script/calendar-demo.js"></script>
<style type="text/css">
   @import url(css/jquery-calendar.css);

</style>

如果要对日历进行特殊设置，jquery-calendar.css可以修改成你自己喜欢的样式，这对css的代码要有一定的基础才行。

如要修改日历的基本配置，可以修改calendar-demo.js中的代码，如下代码，及对应于页面展示的脚本

1. $(document).ready(function () {  
2.   popUpCal.hideCalendar();  
3.         
4.   // default setting  
5.   popUpCal.closeText = 'Close';  
6.   popUpCal.prevText = '&lt;Prev';  
7.   popUpCal.nextText = 'Next&gt;';  
8.   popUpCal.currentText = 'Today';  
9.   popUpCal.dayNames = new Array('Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday');  
10.   popUpCal.monthNames = new Array('January','February','March','April','May','June','July','August','September','October','November','December');  
11.   popUpCal.dateFormat = 'DMY/';  
12.   popUpCal.minDate = new Date(2005, 4 - 1, 1);  
13.   popUpCal.maxDate = new Date(2008, 4 - 1, 30);                      
14.                       
15.   $('#more div').hide();  
16.   $('#more0').show();  
17.   popUpCal.autoPopUp = false;  
18.   $('.calendarButton').calendar();  
19.   popUpCal.autoPopUp = true;  
20.   $('.calendarFocus').calendar();  
21.   
22. }); 
    

配置好后，只要在页面body中，写下如下代码，即可看到日历的效果
<div class="container">
<p>Calendar appears on focus: <input type="text" size="10" class="calendarFocus"/></p>
<p>Calendar appears via button: <input type="text" size="10" class="calendarButton"/></p>
</div>