87,991
社区成员
发帖
与我相关
我的任务
分享旅游行业价格日历控件
哪位大哥大姐做过价格日历，，急急急，有个旅游网站要用到日历控件做成这样子，
小弟做咯很久做不出来，求大师们分享。。。
小弟做咯很久做不出来，求大师们分享。。。
...全文
请发表友善的回复…
发表回复
l676331991 2013-06-02
- 打赏
- 举报
自己写吧，我也刚写过，先把模子写出来，就是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: liuxiaole_abc@163.com
* 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);
adsl12075370 2013-05-30
- 打赏
- 举报
关注中。。。求实例
xianglinxiaogang 2013-03-04
- 打赏
- 举报
跪求实例。。
xianglinxiaogang 2013-03-04
- 打赏
- 举报
这个怎么存储值。。
mjhwy 2013-03-04
- 打赏
- 举报
度一下 fullcalendar
