描述：日曆插件jCal用於需要輸入日期的表單文本框。
兼容瀏覽器：IE瀏覽器/Firefox/Google
Chrome
官方鏈接： http://www.overset.com/2008/05/1
... cker-jquery-plugin/
JS下載： http://ijquery.360sites.cn/js/jquery.jCal.min.js
預覽： http://ijquery.360sites.cn/demo/jCal
打包下載： http://ijquery.360sites.cn/demo/jCal/jCal.zip
參數說明：
-
$('#calOne').jCal({
-
day: new Date(), // 初始日期設置，一般是當前的，所以填寫爲new Date
-
days:1, // 當你鼠標移動到日期控件上默認所選擇的日期數
-
showMonths: 1, // 日期控件的個數，如果你填寫2，那麼將會顯示相鄰二個月的日期
-
monthSelect:false, // 是否允許月份選擇
-
dCheck:function (day) { return true; }, // 你可以設置一些日期不可選（參考實例）
-
callback: function (day, days) { return true; }, // 點擊日期時候的回調函數（參考實例）
-
selectedBG: 'rgb(0, 143, 214)', // 日期被選擇後的背景顏色（貌似無效）
-
defaultBG:'rgb(255, 255, 255)', // 日期沒有被選擇時的背景顏色（貌似無效）
-
dayOffset:0, // 意味着日期排序從星期日開始，1意味着從星期一
-
forceWeek:false, // true=force selection at start of week, false=select days out from selected day
-
dow: ['S', 'M', 'T', 'W', 'T', 'F', 'S'], // 設置日期表格行頭，是轉化成中文的關鍵
-
ml: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],//月份的名稱，可以轉化爲中文
-
ms: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']//月份的簡寫
- })
JS引用代碼：
-
<script type="text/javascript" charset="utf-8" src="http://ijquery.360sites.cn/js/jquery-1.4.2.min.js"></script>
-
<script type="text/javascript" charset="utf-8" src="http://ijquery.360sites.cn/js/jquery.animate.clip.js"></script>
-
<script type="text/javascript" charset="utf-8" src="http://ijquery.360sites.cn/js/jquery.jCal.min.js"></script>
-
<script>
-
$(function () {
-
$('#calendar').jCal({
-
day: new Date(),
-
days: 1,
-
showMonths: 2,
-
monthSelect: true,
-
dow: ['日', '一', '二', '三', '四', '五', '六'],
-
ml: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
-
callback: function (day, days) {
-
$('#result').html(day.getFullYear() + '/' + (day.getMonth() + 1) +'/'+ day.getDate());
-
}
-
});
-
});
- </script>
-
<!--顯示日曆-->
-
<div id="calendar"></div>
-
<!--顯示選擇日曆的結果-->
- <div id="result"></div>
- <link rel="stylesheet" type="text/css" href="http://ijquery.360sites.cn/js/jquery.jCal.css" media="all" />
http://ijquery.360sites.cn/js/jquery.jCal.zip 點擊進行打包下載
CSS源代碼如下：
-
/* default dimensions and justification for each month including title */
-
.jCal {
-
/* each day width + border-left + border-right */
-
width:224px;
-
height:21px;
-
text-align:center;
-
vertical-align:top;
-
}
-
/* default dimensions and justification for each month not including title */
-
.jCalMo {
-
width:224px; /* each day width + border-left + border-right */
-
float:left;
-
overflow:visible;
-
height:100%;
-
padding-right:2px;
-
padding-left:2px;
-
white-space:nowrap;
-
}
-
/* top month display block - i.e. January */
-
.jCal .month, .jCal .monthSelect, .jCal .monthName, .jCal .monthYear {
-
line-height:16px;
-
height:16px;
-
text-align:center;
-
vertical-align:bottom;
-
font-family:Tahoma;
-
font-size:8pt;
-
color:#000000;
-
cursor:pointer;
-
float:left;
-
}
-
/* month name per calendar style - includes left/right padding and alignment */
-
.jCal .monthName {
-
padding-left:2px;
-
padding-right:2px;
-
text-align:right;
-
}
-
/* year per calendar style - includes left/right padding and alignment */
-
.jCal .monthYear {
-
float:right;
-
padding-left:2px;
-
padding-right:2px;
-
text-align:left;
-
}
-
/* hilight style for new month combobox pulldown for hover */
-
.jCal .monthSelect {
-
background:#EEE url(eeGrad2.gif) bottom repeat-x;
-
}
-
/* do not edit - this enables the new month combobox selector */
-
.jCal .monthSelector {
-
position:absolute;
-
}
-
/* do not edit - this enables the new month combobox selector "shadow" for capturing auto-hide */
-
.jCal .monthSelectorShadow {
-
position:absolute;
-
background:#808080;
-
padding:0px;
-
}
-
/* this is the hover for the month name */
-
.jCal .monthNameHover {
-
background:#EDEDED url(double-arrow-vert.gif) center left no-repeat;
-
color:#808080;
-
}
-
/* this is the hover for the year */
-
.jCal .monthYearHover {
-
background:#EDEDED url(double-arrow-vert.gif) center right no-repeat;
-
color:#808080;
-
}
-
/* this is the hover for the new month or year hover in the new combobox selection */
-
.jCal .monthSelectHover {
-
background:#069;
-
color:#FFF;
-
}
-
/* day block dimensions and style - for all day blocks */
-
.jCalMo .dow, .jCalMo .day, .jCalMo .pday, .jCalMo .aday, .jCalMo .overDay, .jCalMo .invday, .jCalMo .selectedDay {
-
width:30px;
-
font-family:Tahoma;
-
font-size:8pt;
-
color:#000000;
-
border-right:1px solid #CCC;
-
border-bottom:1px solid #CCC;
-
border-left:1px solid #EEE;
-
text-align:center;
-
cursor:default;
-
float:left;
-
}
-
/* day of week header specific style */
-
.jCalMo .dow {
-
background:#EEE url(eeGrad.gif) bottom repeat-x;
-
border-bottom:0px;
-
}
-
/* actual calendar day default style */
-
.jCalMo .day, .jCalMo .invday {
-
height:30px;
-
text-align:center;
-
}
-
/* selectable calendar day specific style */
-
.jCalMo .day {
-
cursor:pointer;
-
background:#FFF;
-
}
-
/* blacked-out calendar day specific style */
-
.jCalMo .invday {
-
color:#808080;
-
background:#eeeeee;
-
text-decoration:line-through;
-
}
-
/* previous and subsequent months calendar day specific style */
-
.jCalMo .pday, .jCalMo .aday {
-
height:30px;
-
background:#e3e3e3;
-
color:#CCC;
-
}
-
/* selected day */
-
.jCalMo .selectedDay {
-
color:#FFF;
-
/* must use rgb() syntax for jquery.color.js compliance */
-
background:rgb(0, 143, 214);
-
}
-
/* mouseover hilighted selectable day */
-
.jCalMo .overDay {
-
color:#FFF;
-
/* must use rgb() syntax for jquery.color.js compliance */
-
background:rgb(0, 102, 153);
-
}
-
/* left month navigation button - no need to change */
-
.jCal .left {
-
background:url(_left.gif) center center no-repeat;
-
width:16px;
-
height:16px;
-
vertical-align:middle;
-
cursor:pointer;
-
float:left;
-
}
-
/* right month navigation button - no need to change */
-
.jCal .right {
-
background:url(_right.gif) center center no-repeat;
-
width:16px;
-
height:16px;
-
vertical-align:middle;
-
cursor:pointer;
-
float:right;
-
}
-
/* no need to change - this is for carousel opacity */
-
.jCalMask, .jCalMove {
-
position:absolute;
-
overflow:hidden;
-
}
[轉] http://ijquery.360sites.cn/forum.php?mod=viewthread&tid=11