最新消息:

第11款插件:jquery.jCal.js显示日历插件

日历插件 杨红伟 9262浏览 0评论

描述:日历插件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
参数说明:

[code]

$('#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']//月份的简写
})

[/code]

 

 

图片展示:

44

JS引用代码:

[js]<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>[/js]

 

 

HTML代码:

[html]

<!--显示日历-->
<div id="calendar"></div>
<!--显示选择日历的结果-->
<div id="result"></div>

[/html]

 

 

CSS代码:

[css]<link rel="stylesheet" type="text/css" href="http://www.ijquery.cn/js/jquery.jCal.css" media="all" />[/css]

这里用到的图片:
http://www.ijquery.cn/js/jquery.jCal.zip 点击进行打包下载

CSS源代码如下:

[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;
}

[/css]

发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址