1.2/demo/demo1.html

<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>弹出式日历</title>
    <script src="http://g.tbcdn.cn/kissy/k/1.3.0/kissy-min.js" charset="utf-8"></script>
    <link rel="stylesheet" href="tmp/style.css" />
</head>
<body>
<div id="search">
    <form id="J_Search">
        <ul>
            <li>
                <strong>酒店入住/离店日期选择</strong>
            </li>
            <li>
                <label class="tit" for="J_CheckIn">入住时间：</label>
                <input id="J_CheckIn" type="text" class="J_S1 f-text" value="" />
            </li>
            <li>
                <label class="tit" for="J_CheckOut">离店时间：</label>
                <input id="J_CheckOut" type="text" class="J_S2 f-text" value="" />
            </li>
            <li>
                <strong>机票出发/返程日期选择</strong>
            </li>
            <li>
                <label class="tit" for="J_DepDate">出发时间：</label>
                <input id="J_DepDate" type="text" class="J_S1 f-text" value="" />
            </li>
            <li>
                <label class="tit" for="J_RetDate">返程时间：</label>
                <input id="J_RetDate" type="text" class="J_S2 f-text" value="" />
            </li>
        </ul>
    </form>
</div>
<script>
var S = KISSY;

if (S.Config.debug) {
    var srcPath = "../../../";
    S.config({
        packages:[
            {
                name:"gallery",
                path:srcPath,
                charset:"utf-8",
                ignorePackageNameInUri:true
            }
        ]
    });
}

S.use('gallery/calendar/1.2/index', function(S, Calendar) {
    var $ = S.all;

    /**
     * 酒店日历实例
     *
     * 入住可选时段：今天起90天
     * 离店可选时段：入住时间+28天
     */
    var maxCheckOut = 90;
    var maxInterval = 28;

    var calendar = new Calendar({
        afterDays       : maxCheckOut,
        triggerNode     : '#J_CheckIn',
        finalTriggerNode: '#J_CheckOut'
    });

    var maxCheckoutDate = calendar.get('maxDate');
    var limit;

    calendar.on('show', function(e) {
        switch(e.node.attr('id')) {
            case 'J_CheckIn':
                this.set('minDate', new Date);
                this.set('afterDays', maxCheckOut);
                this.render();
                break;
            case 'J_CheckOut':
                this.set('minDate', this.get('startDate') || new Date);
                this.set('afterDays', Math.min(maxInterval, Calendar.DATE.differ(this.get('minDate'), maxCheckoutDate) + 1));
                this.render();
                break;
        }
    });

    /* ------------------------------------------------------------- */

    /**
     * 机票日历实例
     *
     * 可选时间段：今天起
     */
    new Calendar({
        minDate         : new Date,
        triggerNode     : '#J_DepDate',
        finalTriggerNode: '#J_RetDate'
    });

});
</script>
</body>
</html>