描述:日历插件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>');
}

jquery.jCal.js显示日历插件的更多相关文章

  1. 好用的jquery.animateNumber.js数字动画插件

    在做公司的运营报告页面时,有一个数字累计增加的动画效果,一开始,毫无头绪,不知如何下手,于是上网查资料,发现大多都是用的插件来实现的,那么今天,我也来用插件jquery.animateNumber.j ...

  2. jquery.form.js表单插件的使用

    jquery.form.js官网:http://malsup.com/jquery/form API文档:http://malsup.com/jquery/form/#api 下载地址:http:// ...

  3. 一款基于jQuery带事件记录的日历插件

    之前我们也已经分享过不少jQuery日历插件,有些应用了CSS3的特性,外观就特别漂亮.今天要分享的这款jQuery日历插件不仅有着绚丽的外观,而且带有日期事件记录功能,点击日期即可展开事件记录窗口, ...

  4. jQuery之jquery.lazyload.js插件用法

    研究背景:网站中如果图片过多,就会因为加载图片而等待很长时间,此时我们就用到图片延时加载插件jquery.lazyload.js,这个插件可以让我们在向下滚动的时候加载图片.让网页首屏尽可能快的加载进 ...

  5. jquery插件导出word:jquery.wordexport.js

    前言 今天项目中遇到一个需求把我们系统中的统计数据导出来(主要是表格).其实实现的的方法有很多,而此次针对我的系统第一获取数据有点慢,加上前不久写了一个在线阅读pdf,故此这次也想用前端的方式来导出. ...

  6. jQuery 自定义网页滚动条样式插件 mCustomScrollbar 的介绍和使用方法(转)

    系统默认的滚动条样式,真的已经看的够恶心了.试想一下,如果在一个很有特色和创意的网页中,出现了一根系统中默认的滚动条样式,会有多么的别扭. 为了自己定义网页中的滚动条的方法,我真的已经找了很久了,就目 ...

  7. jquery.ajaxfileupload.js

    jquery.ajaxfileupload.js上传插件,利用iframe提交不刷新页面功能完成. /* // jQuery Ajax File Uploader // // @author: Jor ...

  8. jquery.imagezoom.js制作鼠标悬停图片放大镜特效、参数和最简教程

    一.插件介绍 今天在用到放大镜效果的时候,突然发现网站里没有放大镜的插件.于是总结了一下,放到这里.为自己,也为他人提供方便.jquery.imagezoom.js这款插件用途很简单,就是鼠标移过去, ...

  9. 用这个插件jquery.raty.js————用于星星评价(这个案例用于后台传数据给我,前台显示星星个数)

    1.引入jquery.js文件 2.引入jquery.raty.js 3.页面中放在这个:<span class="readOnly" data-path="ima ...

随机推荐

  1. thymeleaf : EL1050E The arguments (...) for the constructor call are missing

    <a href="list.html" th:href="${#strings.replace(new.href,'{page}',1)}" >MO ...

  2. testng执行用例失败,再次执行

    我们通过重写testng的retry方法和transform方法来实现用例失败重跑的功能. 首先添加两个文件 TestngRetry.java public class TestngRetry imp ...

  3. easyui表格,单元格合并

    easyui的合并单元格比较麻烦,官网提供一下方法 $('#tt').datagrid({ onLoadSuccess:function(){ var merges = [{ index:2, row ...

  4. JS中的的"闭包"?深入Javascript之this

    看了知乎上的话题 如何才能通俗易懂的解释javascript里面的‘闭包’?,受到一些启发,因此结合实例将回答中几个精要的答案做一个简单的分析以便加深理解. 1. "闭包就是跨作用域访问变量 ...

  5. 【LOJ】#2511. 「BJOI2018」双人猜数游戏

    题解 设\(f[p][a][b]\)表示询问了\(p\)次,答案是\(a,b\)是否会被猜出来 然后判断如果\(p = 1\) 第一个问的\(Alice\),那么\([s,\sqrt{nm}]\)约数 ...

  6. jquery.validate.js自定义表单验证

    $(document).ready(function() { //在下列位置输入页面加载的逻辑代码 $("#inputForm").validate({ rules: { seq: ...

  7. Java 发送http post 请求

    package com.sm.utils; import java.io.BufferedReader; import java.io.InputStreamReader; import java.i ...

  8. Ubuntu服务器的anaconda环境修复办法(自动进入base环境怎么办?)

    某天在服务器上更新了conda的版本,不知怎么回事我的python3.6就变成python2.7了,而且一进入服务器就会自动进入base环境(我的conda只装了base环境) 仔细研究了半天,才发现 ...

  9. Java文件类

    在Java语言中,无论是目录还是文件,都抽象成java.io.File类 直接上示例吧 java,io,File的常用操作 删除.创建 因为我的e盘里面是没有这个文件的,所以不存在I哦 创建文件: 获 ...

  10. JDBC之 连接池

    JDBC之 连接池 有这样的一种现象: 用java代码操作数据库,需要数据库连接对象,一个用户至少要用到一个连接.现在假设有成千上百万个用户,就要创建十分巨大数量的连接对象,这会使数据库承受极大的压力 ...