旅游行业价格日历控件

Question

哪位大哥大姐做过价格日历，，急急急，有个旅游网站要用到日历控件做成这样子，小弟做咯很久做不出来，求大师们分享日历控件旅游日历

Answer 1

自己写吧，我也刚写过，先把模子写出来，就是html和css先写好，然后无非就是js去操纵这些字符串，动态循环生成。推荐一个Date.js，给原生的Date对象扩展了好多方法，用这个写，一点也不费劲。给个地址：http://www.ilvxing.com/Item/index/pro_id/100046 可以看看效果。我的js，可以参考参考，还有这个data是个大JSON，这个，和后端的协商好就是了，这js肯定和这个JSON数据的组织格式是密切相关的。写的不太好，呵呵，面向后台编辑给填写价格的还有一个类似的日历，那个更复杂，这个简单，只是展现给顾客。/**
 * Created with JetBrains PhpStorm.
 * User: [email protected]
 * Date: 13-5-9
 * Time: 下午5:27
 * BasedOn： date.js
 * To change this template use File | Settings | File Templates.
 */(function(window){
    /**
     *
     * @param {Object} data
     * @param {jQuery} container
     * @param {Object} handlers
     * @param {Date} initialDate
     * @constructor
     */
    function Calendar(data,container,handlers,initialDate){
        this.data = data.dates;
        this.container = container;
        this.handlers = handlers;
        this.serverTime = data.serverTime;
        //this.bookBefore = data.bookBefore;
        //this.thresholdDate = this.today().addDays(this.bookBefore);
        this._build(initialDate);
    }    Calendar.prototype = {
        constructor: Calendar,
        destructor:function(){
            this.container.remove();
            for(var i in this) {
                if(this.hasOwnProperty(i)) {
                    delete this[i];
                }
            }
        },
        HOLD:true,
        speed:800,
        _getTpl:function(){
            var tpl = this.tpl || {
                main: $.trim($('#template_calendar_main').html()),
                table: $.trim($('#template_calendar_table').html()),
                meta: $.trim($('#template_calendar_meta').html()),
                date: $.trim($('#template_date').html())
            };
            this.constructor.prototype.tpl = tpl;
            return tpl;
        },
        today: function(){
            return Date.parse(this.serverTime).clearTime();
        },
        _build: function(initialDate){
            this._getTpl();
            this.container.empty().html(this.tpl.main);
            this.render(initialDate || this.today());
            this._eventBind();
        },
        render: function(curDate,hold,prevNext){
            this.firstDate = curDate.moveToFirstDayOfMonth();
            this._renderMeta(hold,prevNext);
            this._renderTable(hold,prevNext);
            this._updateBtnState();
        },
        _renderMeta: function(hold,prevNext){
            var header;
            var wrapper =  this.container.find(".header_wrapper");
            if(hold) {
               if(prevNext > 0) {
                   wrapper.append(this.tpl.meta);
                   header = wrapper.find(".header_inner:last");
               } else {
                   wrapper.prepend(this.tpl.meta);
                   header = wrapper.find(".header_inner:first");
               }
            } else {
                this.container.find(".header_wrapper").html(this.tpl.meta);
                header = wrapper.find(".header_inner");
            }            header.find(".pre_month").html(this.firstDate.clone().addMonths(-1).toString("M月"));
            header.find(".cur_month").html(this.firstDate.toString("yyyy年MM月"));
            header.find(".next_month").html(this.firstDate.clone().addMonths(1).toString("M月"));        },
        _renderTable: function(hold,prevNext) {
            var tbody;
            var inner = this.container.find(".calendar_table_inner");
            if(hold) {
                if(prevNext > 0) {
                    inner.append(this.tpl.table);
                    tbody = inner.find("table:last").find("tbody");
                } else {
                    inner.prepend(this.tpl.table);
                    tbody = inner.find("table:first").find("tbody");
                }
            } else {
                inner.empty().html(this.tpl.table);
                tbody = inner.find("table").find("tbody");
            }            //本月1号所在周的周一
            var iterator = this.firstDate.clone();
            if(iterator.is().monday() === false) {
                iterator.moveToDayOfWeek(1,-1);
            }            //本月最后一天所在周的周日
            var lastDay = this.firstDate.clone().moveToLastDayOfMonth();
            if(lastDay.is().sunday() === false) {
                lastDay.moveToDayOfWeek(0);
            }            while(iterator.compareTo(lastDay) <= 0 ) {
                var tr = $(document.createElement('tr'));
                tbody.append(tr);
                for(var i=0; i<7; i++) {
                    this._renderDate(iterator,tr);
                    iterator.addDays(1);
                }
            }
        },
        _renderDate:function(date,row){
            var td = $(this.tpl.date).appendTo(row);
            var d = date.toString("yyyy-MM-dd");
            var disabled = false;
            td.attr("data-date",d);
            td.find(".date_num").html(date.toString("d"));            /*if(date.compareTo(this.thresholdDate) <= 0) {
                //过期了
                disabled = true;
            }*/            if(d in this.data) {
                if(this.data[d].pull_offed) {
                    disabled = true;
                } else {
                    var cell = this.data[d];
                    td.find(".price_adult").find("em").html('￥'+cell.trip_price);
                    if('kid_price' in cell) {
                        td.find(".price_child").find("em").html('￥'+cell.kid_price);
                    } else {
                        td.find(".price_child").hide();
                    }
                }
            } else {
                disabled = true;
            }            if(disabled) {
                td.find(".date").addClass("disabled");
                td.find(".price_info,.price_child").hide();
            }        },
        prevMonth: function(){
            this._monthBtn(-1);
        },
        nextMonth: function(){
            this._monthBtn(1);
        },
        _monthBtn: function(prevNext){
            if(this.holdTable) return;            var $inner = this.container.find(".calendar_table_inner");
            var $metaInner = this.container.find(".header_wrapper");
            var left, metaTop;            this.holdTable = $inner.find("table");
            this.holdMeta = $metaInner.find(".header_inner");            var width = $inner.width();
            var height = $inner.height();            this.render(this.firstDate.addMonths(prevNext),this.HOLD,prevNext);            if(prevNext > 0) {
                left = 0-width;
                metaTop = -30;
            } else {
                left = 0;
                $inner.css({left:0-width});
                metaTop = 0;
                $metaInner.css({top:"-30px"});
            }
            $inner.parent().css({height:height,overflow:"hidden"});
            $inner.addClass("animating").css({position:"absolute",width:width*2+2})
                .animate({left: left},this.speed, $.proxy(function(){
                var $inner = this.container.find(".calendar_table_inner");
                $inner.parent().css({height:"auto",overflow:"visible"});
                $inner.removeClass("animating").css({position:"static",width:"auto",left:"0"});
                this.holdTable.remove();
                this.holdMeta.remove();
                delete this.holdTable;
                delete this.holdMeta;
                this.triggerEvent("onAfterMonthChange");
            },this));            $metaInner.css({position:"absolute"}).animate({top:metaTop},this.speed,function(){
               this.style.position = "static";
               this.style.top = "0";
            });
        },
        _updateBtnState:function(){
            if(this.firstDate.compareTo(this.today().moveToFirstDayOfMonth()) <= 0) {
                this.container.find(".prev").addClass("disabled");
            } else {
                this.container.find(".prev").removeClass("disabled");
            }
        },
        _eventBind: function () {
            this.container.on("click",".month_btn",{calendar:this},function(ev){
                if($(this).hasClass("disabled")) return false;                if($(this).hasClass("prev")) {
                    ev.data.calendar.prevMonth();
                } else {
                    ev.data.calendar.nextMonth();
                }
                return false;
            });            this.container.on("click",".date",{calendar:this},function(ev){
                var date = $(this).parent().data("date");
                var calendar = ev.data.calendar;
                if(date in calendar.data) {
                    calendar.triggerEvent("onSelectDate",[date]);
                }
                return false;
            });
        },
        triggerEvent: function(type,args){
            var fn = this.handlers[type];
            if(fn !== undefined) {
                fn.apply(this,args || []);
            }
        }
    };
    window.ILV.Calendar = Calendar;
})(window);