首页 | API文档 | 基础示例 | 更新记录
 

日历组件调用方式

  1. jQuery方式调用

    $(function(){
        $('#demo_inp1').calendar();
    });
    

  2. 普通函数方式调用

    $.calendar();
    

下拉,输入,导航选择日期(年月输入框都具备以下三种特性)

  1. 通过导航图标选择

  2. 直接从弹出的下拉框中选择

  3. 直接使用键盘输入数字

常规功能使用演示

  1. id参数(注意这里的id参数的值是左边输入框的id),图标触发

    $.calendar({ id:'#cal3' });
    

     

  2. 是否显示按钮栏

    $.calendar({ btnBar:false });
    

  3. 自动选择显示位置

    当控件处在页面边界时,它会自动选择显示的位置,所以没有必要担心弹出框会被页面边界遮住的问题了。
    
  4. 自定义格式(其它各种自定义格式请参阅 API参数控制接口)

    $.calendar({ format:'yyyy年MM月dd日 HH时mm分ss秒' });
    

  5. 取得系统可识别的日期值(重要)

    /* 类似于 1999年7月5日 这样的日期是不能够被系统识别的,他必须转换为能够识别的类型如 1999-07-05 */
    $.calendar({ format:'yyyy年MM月dd日', real:'#realInp' });
    
    /* input文本框的代码是:
    <input class="runcode" id="inp6"/><input class="runcode" id="realInp" type="text"/>
    
     注意:在实际应用中,一般会把real指定为一个hidden控件,这里是为了把真实值展示出来,所以使用文本框
     关键属性: real 指定一个控件或控件的ID,必须具有value属性(如input),用于存储真实值
    */
    

    真实的日期值是:

  6. 自动纠错功能

    当日期框中的值不符合格式时,系统会尝试自动修复,显示当前日期。
    

日期范围限制

  1. 静态限制

    /*限制日期的范围是 2012-03-08到2012-05-27 (注意minDate和maxDate的格式一定要是yyyy-MM-dd)*/
    $.calendar({ minDate:'2012-03-08', maxDate:'2012-05-27' });
    

  2. 动态限制(请参阅 API参数控制接口 里的动态变量表)

    /*只能选择今天以后的日期,包括今天*/
    $.calendar({ maxDate:'%y-%M-%d' });
    

  3. 只能选择今天以后的日期(不包括今天)

    /*参数noToday为true时指不包括今天,为false或不写此参数为包括今天*/
    $.calendar({ minDate:'%y-%M-%d', noToday:true });
    

  4. 只能选择当前年当前月3号到2014年12前月的当前天之间的日期

    $.calendar({ minDate:'%y-%M-03', maxDate:'2014-12-%d' });
    

  5. 前面的日期不能大于后面的日期

    $.calendar({ maxDate:'#inp12' });
    
    $.calendar({ minDate:'#inp11' });
    

    有效期从

  6. 前面的日期不能大于后面的日期(targetFormat参数示例)

    $.calendar({ maxDate:'#inp14', format:'yyyyMMdd', targetFormat:'yyyy年MM月dd日' });
    
    $.calendar({ minDate:'#inp13', format:'yyyy年MM月dd日', targetFormat:'yyyyMMdd' });
    

    有效期从

  7. 无效周(可以使用此功能禁用周日至周六所对应的日期,相关属性:disWeek (0至6 分别代表 周日至周六))

    备注:回调函数中this指向窗口实例对象本身

    $.calendar({ disWeek:'6' });
    
    $.calendar({ disWeek:'0,4' });
    

      

无效日期(可以使用此功能禁用,所指定的一个或多个日期,只要你熟悉正则表达式,你可以尽情发挥)

  1. 禁用 每个月份的 5日 15日 25日

    /*'5$' 表示以 5 结尾 注意 $ 的用法*/
    $.calendar({ disDate:['5$'] });
    

  2. 禁用 所有早于2000-01-01的日期

    $.calendar({ disDate:['^19'] });
    

  3. 禁用 2012-05-05 和 2012-05-24

    $.calendar({ disDate:['2012-05-05','2012-05-24'] });
    

  4. 禁用 2012-所有月份-04 和 2012-05-29

    $.calendar({ disDate:['2012-..-04','2012-05-29'] });
    

  5. 禁用 [2000至2008]-05-01 和 2012-03-29

    $.calendar({ disDate:['200[0-8]-05-01','2012-03-29'] });
    

  6. 禁用 所有年份和所有月份的第7天和今天

    $.calendar({ disDate:['....-..-07','%y-%M-%d'] });
    

有效日期

使用无效日期可以很方便的禁用不可用的日期,但是在只需要启用少部分日期的情况下,有效日期的功能就非常适合了
关键属性: enDate 默认为false, 为true时,无效日期变成有效日期

  1. 启用 每个月份的 5日 15日 25日

    $.calendar({ disDate:['5$'], enDate:true });
    

自定义事件

  1. 自定义事件

    如果你需要做一些附加的操作,你也不必担心,日期控件自带的自定义事件可以满足你的需求.此外,你还可以在自定义事件中调用提供的API库来做更多的运算和扩展,绝对可以通过很少的代码满足你及其个性化的需求.
    注意下面几个重要的指针,将对你的编程带来很多便利
    this: 指向日历对象实例,也就是$.calendar对象
    this.inpE: 指向文本框
    this.DOM: 指向日历控件的DOM对象
    注意:函数原型必须使用类似 function(dp){} 的模式,这样子,在函数内部才可以使用this
    

  2. onSetDate事件

    $.calendar({ onSetDate:function(){alert(this.inpE.value);} });
    

  3. getDate()用法

    $.calendar({ onSetDate:function(){alert('日期框原来的值为:'+this.inpE.value+',要用新选择的值:'+this.getDate('date')+'覆盖吗?');} });
    

示例中各API接口的详细说明请参阅 API参数控制接口