多功能炫彩日历Hcalendar.js

一般单日历

示例：
参数配置
无须任何参数

单选双日历

示例：
参数配置
{
    isSin : false
}

显示头尾单选双日历

示例：
参数配置
{
    isSin : false,
    isHeader : true,
    isFooter : true
}

周选择日历

示例：
参数配置
{
    isHeader : true,
    isFooter : true,
    isWeek : true,
    isSin : false,
    ta : right
}

显示头尾区间双日历

示例：
参数配置
{
    isHeader : true,
    isFooter : true,
    isSin : false,
    isSection : true
}

一般区间日历

示例：
参数配置
{
    isSection : true
}

月显示日历

示例：
参数配置
{
    isMonth : true
}

时间显示日历

示例：
参数配置
{
    isTime : true,
    ta : 'right'
}

未来不可选日历

示例：
参数配置
{
    isFuture : false
}

今天+未来均不可选

示例：
参数配置
{
    isToday : false,
    isFuture : false
}

周末不可选

示例：
参数配置
{
disFormat : function(y,m,d,w,time){
    if(w == 6 || w ==7){
        return false;
    }
}
}

任意指定日期不可选,(如2015-02-19,2015-02-21不可选)

示例：
参数配置
{
    disFormat : function(y,m,d,w,time){
    var date = y + '-' + m + '-' + d;
    if(date == '2015-2-19' || date == '2015-2-21'){
        return false;
    }
    }
}

月份日历-指定日期不可选(如 :6月份以后不可选)

示例：
参数配置
{
    isMonth : true,
    disFormat : function(y,m){
        if(m > 6){
            return false;
        }
    }
}

时间日历-指定时间不可选(如：0点-8点不可选)

示例：
参数配置
{
    isTime : true,
    disFormat : function(t){
        if(t <= 8){
            return false;
        }
    }
}

从任意周开始显示(如：从周三开始显示)

示例：
参数配置
{
    startWeek : 3
}

右对齐日历(与输入框右对齐)

示例：
参数配置
{
    isSin : false,
    ta : 'right'
}

改变日历显示内容-周末标红

示例：
参数配置
{
    format : function(y,m,d,w,time){
        if(w == 6 || w == 7){
            return '<font color="red">周末</font>';
        }
    }
}

改变日历显示内容-2015春节放假安排

示例：
参数配置
{
    format : function(y,m,d,w,time){
        if(y == 2015 && m == 2 && d>17 && d<25){
            return '<font color="green">假</font>';
        }
        if(y == 2015 && m == 2 && d == 28){
            return '<font color="red">班</font>';
        }
    }
}

改变时间显示内容

示例：
参数配置
{
    isTime : true,
    format : function(t, type){
        if(t < 8 && type == 'h'){
            return '凌晨' + t + '点';
        }
    }
}

改变月份显示内容

示例：
参数配置
{
    isMonth : true,
    format : function(y,m,s){
        if(m > 6){
        return m + '月份';
        }else{
        return m + '月份';
        }
    }
}

X,Y轴显示位置添加修正值

示例：
参数配置
{
    left : 50,
    top : 50
}

只读日历(不允许选择)

示例：
参数配置
{
    readonly : true
}

国际化-显示英文

示例：
参数配置
{
    isHeader : true,
    isFooter : true,
    isSin : false,
    headerSin : 'Today|Yesterday|7 days ago|14 days ago|30 days ago',
    weeks : ["Mon","Tue","Wed","Thu","Fri","Sat","Sun"],
    ymd : ["-","","Day","时","分"],
    btTrue : 'OK',
    btFalse : 'CANCEL'
}

选择日历之后触发回调函数

示例：
参数配置
{
    selectCb : function(date){
        alert('您选择的日期是' + date.sdate);
    }
}

日历显示完毕之后触发回调函数

示例：
参数配置
{
    cb : function(){
        alert('日历显示完毕');
    }
}

设置日历年月日分隔符

示例：
参数配置
{
    gap : ' -_-! '
}

设置区间日历的开始结束分隔符

示例：
参数配置
{
    isSection : true,
    splitTex : '~~~'
}

设置日历默认显示时间(如1983-12-14)

示例：
参数配置
{
    cName : 'date28',
    sdate : '1983-12-14'
}

接口说明：

  cName : '', //类名，多个以空格隔开
  headerSin : '今天|昨天|7天前|14天前|30天前',
  headerMul : '今天|近3天|近7天|近14天|近30天',
  splitTex : ' 至 ', //开始结束日期分隔符
  ymd : ["年","月","日","时","分"], //年月日小时分钟的汉字显示
  weeks : ["一","二","三","四","五","六","日"], //周一到周日的显示
  months : ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"], //一月到十二月的显示
  btTrue : '确定', //确定按钮显示字体
  btFalse : '取消', //取消按钮显示字体
  gap : '-', //日期分隔符
  ta : 'left', //对齐方式，默认左对齐，right为右对齐
  left : 0, //位置left修正值
  top : 0, //位置top修正值
  startWeek : 1, //开始显示的周，默认从周一开始显示
  readonly : false, //是否为只读
  sdate : '', //设置默认显示开始时间(一般不用设置)
  edate : '', //设置默认显示结束时间(一般不用设置)
  isTodaySelect : true, //值为空的时候是否显示今天，默认是
  isSin : true, //是否是单日历，默认是
  isSection : false, //是否是区间选择
  isWeek : false, //是否周显示，默认否
  isMonth : false, //是否按月显示
  isTime : false, //是否按时间显示(如12:00)
  isHeader : false, //是否显示头部，默认否
  isFooter : false, //是否显示尾部按钮区，默认否
  disFormat : null, //当日是否可选的format函数，返回false不可选，参数：年，月，日，周，时间撮
  isFuture : true, //未来是否可选，默认是，disFormat激活时失效（仅选择日期时有效）
  isToday : true, //今天是否可选，默认是，disFormat激活时失效（仅选择日期时有效）
  format : null, //日历显示的format函数，参数：年，月，日，周，时间撮
  cb : null, //回调函数
  selectCb : null //选择日期之后触发的函数

使用说明

方式一(配置方式)：
var datePicker = $.hcalendar([
  {
    cName : 'date1', //作用对象为类名为date1的输入框
    isWeek : true //激活周日历
    ... //其它参数
  },
  {
    cName : 'date2', //作用对象为类名为date2的输入框
    isSin : false //显示双日历格式
    ... //其它参数
  }
]);
方式二(程序主动触发)：
  var datePicker = $.hcalendar();
  datePicker.show(
     $("#id"), //日历要作用的DOM对象
     {
    //日历参数写此处
     }
  );
hcalendar.js有如下特点：
超轻量级，压缩后仅11K
超强功能集合，日月小时分钟随便选
高性能，事件委托机制，日历公用，尤其适合前端逻辑复杂的系统类页面
下载简易版demo
如有改进意见，请发邮件至haiyume@163.com