日历 / Calendar

普通使用

<div class="content line">
  预约时间：<input type="text" id="calendar1" value="2014-08-08"/>
</div>

require(['moye/Calendar'], function (Calendar) {

    var calendar = $('#calendar1');
        
    new Calendar({
        main: calendar[0]
    }).render();
    
    // 触发日历展现
    calendar.trigger('click');

});

在浮层中展现多个月份

预约时间：<input type="text" id="calendar2" value="2014-08-08"/>

require(['moye/Calendar'], function (Calendar) {

    var calendar = $('#calendar2');
    
    new Calendar({
        main: calendar[0],
        months: 3
    }).render();
    
    // 触发日历展现
    calendar.trigger('click');

});

可选范围

可以通过配置 Calendar 的 range 属性来设定日历的可选范围，或者可以通过 setRange 方法可动态设定。示例：

此处请注意，如果设定的值不在可选的范围内，值被会被清空。

预约时间：<input type="text" id="calendar3" value="2014-08-08"/>

require(['moye/Calendar'], function (Calendar) {

    var calendar = $('#calendar3');
    
    new Calendar({
        main: calendar[0],
        months: 2,
        range: {
            begin: '2015-06-01',
            end: new Date()
        }
    }).render();
    
    // 触发日历展现
    calendar.trigger('click');

});

特殊日期

可以通过 process 参数来处理任意特殊日期的显示值或样式。可用于处理节日特殊样式等等情况：

预约时间：<input type="text" id="price-calendar" value="2014-08-08"/>

require(['moye/Calendar'], function (Calendar) {

    var calendar = $('#price-calendar');
    
    new Calendar({
        main: calendar[0],
        months: 3,
        range: {
            begin: '2015-01-01',
            end: '2015-03-31'
        },
        process: function (data) {
            if (data.value === '2015-02-19') {
                data.content = '春节';
                data.classList.push('spring');
            }
            return data;
        }
    }).render();
    
    // 触发日历展现
    calendar.trigger('click');

});