jquery.jCal.js顯示日曆插件

描述：日曆插件jCal用於須要輸入日期的表單文本框。
兼容瀏覽器：IE瀏覽器/Firefox/Google Chrome
官方連接： http://www.overset.com/2008/05/1 … cker-jquery-plugin/
JS下載： http://www.ijquery.cn/js/jquery.jCal.min.js
預覽：  http://www.ijquery.cn/demo/jCal
打包下載： http://www.ijquery.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']//月份的簡寫
})

 

<script type="text/javascript" charset="utf-8" src="http://www.ijquery.cn/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" charset="utf-8" src="http://www.ijquery.cn/js/jquery.animate.clip.js"></script>
<script type="text/javascript" charset="utf-8" src="http://www.ijquery.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://www.ijquery.cn/js/jquery.jCal.css" media="all" />

 

這裏用到的圖片：
http://www.ijquery.cn/js/jquery.jCal.zip 點擊進行打包下載

 

/* 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;
}

 

function changeCalSize (daySize) {
    var daySize = (parseInt(daySize) || 30), 
        monthSize = ( daySize + 2 ) * 7,
        titleSize = monthSize - 16,
        titleMsgSize = ( titleSize / 2 ) - 4;
    $('head:first').append(
        '<style>' +
            '.jCalMo .day,.jCalMo .invday,.jCalMo .pday,.jCalMo .aday,.jCalMo .selectedDay,.jCalMo .dow { width:' + daySize + 'px !important; height:' + daySize + 'px !important; }' +
            '.jCalMo .dow { height:auto !important }' +
            '.jCalMo, .jCalMo .jCal { width:' + monthSize + 'px !important; }' +
            '.jCalMo .month { width:' + titleSize + 'px !important; }' +
            '.jCalMo .month span { width:' + titleMsgSize  + 'px !important; }' +
        '</style>');
}