淘宝旅行YUI通用日期日历控件237
引用js文件
<script src="yui-min.js"></script>
调用方法
YUI({
    modules: {
        'trip-calendar': {
            fullpath: 'trip-calendar.js',
            type    : 'js',
            requires: ['trip-calendar-css']
        },
        'trip-calendar-css': {
            fullpath: 'trip-calendar.css',
            type    : 'css'
        }
    }
}).use('trip-calendar', function(Y) {

    /**
     * 非弹出式日历实例
     * 直接将日历插入到页面指定容器内
     */
    var oCal = new Y.TripCalendar({
        container   : '#J_Calendar', //非弹出式日历时指定的容器(必选)
        selectedDate: new Date       //指定日历选择的日期
    });
    
    //日期点击事件
    oCal.on('dateclick', function() {
        var selectedDate = this.get('selectedDate');
        alert(selectedDate + '\u3010' + this.getDateInfo(selectedDate) + '\u3011');
    });
    
    Y.one('#J_Example').delegate('click', function(e) {
        var oTarget = e.currentTarget;
            value   = oTarget.getAttribute('data-value');
        switch(true) {
            //日历个数
            case oTarget.hasClass('J_Count'):
                this.set('count', value).render();
                break;
            //显示节假日
            case oTarget.hasClass('J_showHoliday'):
                this.set('isHoliday', true).render();
                break;
            //隐藏节假日
            case oTarget.hasClass('J_hideHoliday'):
                this.set('isHoliday', false).render();
                break;
            //时间范围限定
            case oTarget.hasClass('J_Limit'):
                this.set('minDate', new Date)
                    .set('maxDate', '')
                    .set('afterDays', value)
                    .set('date', new Date());
                break;
            //指定初始日期
            case oTarget.hasClass('J_InitDate'):
                this.set('minDate', value)
                    .set('maxDate', '2012-12-21')
                    .set('date', value);
                break;
            //下拉表单选择时间
            case oTarget.hasClass('J_Select'):
                this.set('isSelect', true).render();
                Y.all('.J_Count').slice(1).set('disabled', true);
                break;
            //取消下拉表单选择
            case oTarget.hasClass('J_SelectOff'):
                this.set('isSelect', false).render();
                Y.all('.J_Count').slice(1).set('disabled', false);
                break;
        }
    }, 'button', oCal);
});

技术讨论区(1 个讨论)

  1. 情绪红了-眼睛 1

    情绪红了-眼睛

    不错,挺好的日历控件。

    2015-3-16 17:16:50 | 回复

  2. 请先登录

      发 布