Kalendae：JavaScript日期选择和日历控件使用

末蓝、 2022-07-24 03:25 313阅读 0赞

源码：http://github.com/ChiperSoft/Kalendae

demo：http://www.html5tricks.com/demo/Kalendae/index.html

[Kalendae][]是一款完全基于JavaScript的日期选择控件和日历组件，值得一提的是，Kalendae并没有依赖任何第三方的JS脚本库，而是用原生的JavaScript实现了如此功能强大的日期选择控件。

## Kalendae有以下特点： ##

*  完全基于JavaScript，无依赖，无jQuery。
 *  可自定义皮肤，基本不用图片，完全靠CSS文件定制皮肤。
 *  日期选择支持单天，也支持多天区间范围。
 *  自定义展示的日期数字。
 *  可直接放在页面上用作日历控件。
 *  对于选中的日期，可以自定义日期格式。
 *  提供一些常用的日期转换函数。

## 如何使用 ##

导入对应的javascript和CSS：

针对不同的使用环境设置，如下：

### 单日期选择    ###

<span style="font-size:14px;">new Kalendae(document.body, {
        months:1,
        mode:'single',
        selected:Kalendae.moment().subtract({M:1})
    });
    
    new Kalendae({
        attachTo:document.body,
        months:2,
        mode:'single',
        selected:Kalendae.moment().subtract({M:1})
    });
    
    new Kalendae({
        attachTo:document.body,
        months:3,
        mode:'single',
        selected:Kalendae.moment().subtract({M:1})
    });</span>

### 日期范围选择 ###

<span style="font-size:14px;">new Kalendae(document.body, {
        months:1,
        mode:'range',
        selected:[Kalendae.moment().subtract({M:1}), Kalendae.moment().add({M:1})]
    });
    
    new Kalendae({
        attachTo:document.body,
        months:2,
        mode:'range',
        selected:[Kalendae.moment().subtract({M:1}), Kalendae.moment().add({M:1})]
    });
    
    new Kalendae({
        attachTo:document.body,
        months:3,
        mode:'range',
        selected:[Kalendae.moment().subtract({M:1}), Kalendae.moment().add({M:1})]
    });</span>

### 多日期选择 ###

<span style="font-size:14px;">new Kalendae(document.body, {
        months:1,
        mode:'multiple',
        selected:[Kalendae.moment().subtract({M:1}), Kalendae.moment().add({M:1})]
    });
    
    new Kalendae({
        attachTo:document.body,
        months:2,
        mode:'multiple',
        selected:[Kalendae.moment().subtract({M:1}), Kalendae.moment().add({M:1})]
    });
    
    new Kalendae({
        attachTo:document.body,
        months:3,
        mode:'multiple',
        selected:[Kalendae.moment().subtract({M:1}), Kalendae.moment().add({M:1})]
    });</span>

### 未来/过去日期显示，隔日选择/工作日选择  ###

<span style="font-size:14px;">//direction
    new Kalendae(document.body, {
        months:3,
        direction:'future'
    });
    
    //direction
    new Kalendae(document.body, {
        months:3,
        direction:'past'
    });
    
    //blackout
    new Kalendae(document.body, {
        blackout: function (date) {
            return Kalendae.moment(date).date() % 2; //blackout every other day
        }
    });
    
    //blackout AND direction
    new Kalendae(document.body, {
        direction:'future',
        blackout: function (date) {
            return [1,0,0,0,0,0,1][Kalendae.moment(date).day()]; //blackout weekends
        }
    });</span>

更多javascript请参考Demo。

指定HTML元素，只需要指定需要生成的元素的class为auto-kal即可。

或者使用input来生成弹出的日期选择

缺省不需要jQuery的支持，但是提供一个jQuery插件，如果你使用jQuery，可以使用如下方式来生成一个kalendae日期选择：

$(selector).kalendae(options);

### 主要选项 ###

*  attachTo：日期选择器绑定的元素
 *  format：处理如期字符串的格式
 *  mode：选择模式
 *  months：显示月份的个数
 *  weekStart：显示日期开始的周
 *  direction：过去(past)和未来(future)，任何(any)等
 *  directionScrolling：如果为true并且direction不是any，那么则不能查看direction以外的内容
 *  blackout：不允许查看的内容
 *  viewStartDate：定义第一个月的日期显示
 *  dateClassMap：由日期组织的key/value的css类

[Kalendae]: http://www.codeceo.com/article/kalendae-datepicker.html