建站资源下载详情
为您免费提供多种建站资源下载,包括网站模板下载、前端插件下载和字体下载!您只需注册为会员即可任意下载!

JQuery日历显示插件jquery.jCal.js

来源:易助科技网浏览量:11收藏

简介


jquery.jCal.js是一款JQuery日历显示插件,用于需要输入日期的表单文本框。

(下载的附件中包含DEMO)


JQuery日历显示插件jquery.jCal.js-示例图


参数说明:


$('#calOne').jCal({
  day: new Date(),
  // 初始日期设置,一般是当前的,所以填写为
  
  new Datedays: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
  
  daydow: ['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']
  //月份的简写
  
})



使用


1.  引入 jquery.js 、jquery.jCal.css 和 jquery.jCal.js 文件


2.  HTML


<!--显示日历-->
<div id="calendar"></div>

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


3.  调用


<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>



相关链接


官网地址 :http://www.overset.com/2008/05/12/multiday-calendar-datepicker-jquery-plugin/

GitHub 地址:https://github.com/ashkang/jcal