第11款插件:jCal显示日历插件

最新推荐文章于 2024-03-14 11:31:41 发布

skAce

最新推荐文章于 2024-03-14 11:31:41 发布

阅读量898

点赞数

jQuery plug-in 专栏收录该内容

33 篇文章

订阅专栏

日历插件jCal提供了一个简单易用的方法来实现表单中日期的输入和选择功能，适用于多种浏览器。本文详细介绍了如何引用、配置插件，并通过实例展示了其使用方法及效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

描述：日历插件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>

复制代码

HTML代码：

<div id="calendar"></div>
<div id="result"></div>

复制代码

CSS代码：

<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