html价格日历控件
一款实用于旅游网站的价格日历，学习使用都很不错，js没有封装，完全可以自己拿来修改使用，或者做学习之用。
主要功能：前端价格日历显示；后台价格设置和修改
接入说明：核心代码已分离出来，仅用jquery类库，没有其他依赖了，接入非常简单。
效果图：
GitHub地址：https://github.com/melodyne/DatePicker
想要完整源码请加入QQ群，群文件自行下载！
JS代码：
var obj = { date: new Date(), year: -1, month: -1, priceArr: [] };
var htmlObj = { header: "", left: "", right: "" };
var houseId = null;
var roomId = null;
var elemId = null;
var mType = 0;
function getAbsoluteLeft(objectId) {
var o = document.getElementById(objectId)
var oLeft = o.offsetLeft;
while (o.offsetParent != null) {
oParent = o.offsetParent
oLeft += oParent.offsetLeft
o = oParent
}
return oLeft
}
//获取控件上绝对位置
function getAbsoluteTop(objectId) {
var o = document.getElementById(objectId);
var oTop = o.offsetTop + o.offsetHeight + 10;
while (o.offsetParent != null) {
oParent = o.offsetParent
oTop += oParent.offsetTop
o = oParent
}
return oTop
}
//获取控件宽度
function getElementWidth(objectId) {
x = document.getElementById(objectId);
return x.clientHeight;
}
var pickerEvent = {
Init: function (houseid,roomid,elemid,mtype) {
if (obj.year == -1) {
dateUtil.getCurrent();
}
for (var item in pickerHtml) {
pickerHtml[item]();
}
var p = document.getElementById("calendar_choose");
if (p != null) {
document.body.removeChild(p);
}
var html = ''
html += htmlObj.header;
html += '';
html += htmlObj.left;
html += htmlObj.right;
html += '';
html += "";
houseId = houseid;
roomId = roomid;
elemId = elemid;
mType = mtype;
var elemObj = document.getElementById(elemid);
$(document.body).append(html);
document.getElementById("picker_last").onclick = pickerEvent.getLast;
document.getElementById("picker_next").onclick = pickerEvent.getNext;
document.getElementById("picker_today").onclick = pickerEvent.getToday;
document.getElementById("calendar_choose").style.left = getAbsoluteLeft(elemid)+"px";
document.getElementById("calendar_choose").style.top = getAbsoluteTop(elemid)+"px";
document.getElementById("calendar_choose").style.zIndex = 1000;
var tds = document.getElementById("calendar_tab").getElementsByTagName("td");
for (var i = 0; i < tds.length; i++) {
if (tds[i].getAttribute("date") != null && tds[i].getAttribute("date") != "") {
tds[i].onclick = function () {
commonUtil.chooseClick(this)
};
}
}
// return html;
//return elemObj;
},
getLast: function () {
dateUtil.getLastDate();
pickerEvent.Init(houseId,roomId,elemId,mType);
},
getNext: function () {
dateUtil.getNexDate();
pickerEvent.Init(houseId,roomId,elemId,mType);
},
getToday:function(){
dateUtil.getCurrent();
pickerEvent.Init(houseId,roomId,elemId,mType);
},
setPriceArr: function (arr) {
obj.priceArr = arr;
},
remove: function () {
var p = document.getElementById("calendar_choose");
if (p != null) {
document.body.removeChild(p);
}
},
isShow: function () {
var p = document.getElementById("calendar_choose");
if (p != null) {
return true;
}
else {
return false;
}
}
}
var pickerHtml = {
getHead: function () {
var head = '- 六
- 五
- 四
- 三
- 二
- 一
- 日
- 回到今天
';
htmlObj.header = head;
},
getLeft: function () {
var left = '';
htmlObj.left = left;
},
getRight: function () {
var days = dateUtil.getLastDay();
var week = dateUtil.getWeek();
var html = '';
var index = 0;
for (var i = 1; i <= 42; i++) {
if (index == 0) {
html += "";
}
var c = week > 0 ? week : 0;
if ((i - 1) >= week && (i - c) <= days) {
var price = commonUtil.getPrice((i - c));
var priceStr = "";
var classStyle = "";
if (price != -1) {
priceStr = "¥" + price;
classStyle = "class='on'";
}
if (price != -1&&obj.year==new Date().getFullYear()&&obj.month==new Date().getMonth()+1&&i-c==new Date().getDate()) {
classStyle = "class='on today'";
}
//判断今天
if(obj.year==new Date().getFullYear()&&obj.month==new Date().getMonth()+1&&i-c==new Date().getDate()){
html += '今天' + priceStr + ' ';
}
else{
html += '' + (i - c) + '' + priceStr + ' ';
}
if (index == 6) {
html += ' ';
index = -1;
}
}
else {
html += "
";
htmlObj.right = html;
}
}
var dateUtil = {
//根据日期得到星期
getWeek: function () {
var d = new Date(obj.year, obj.month - 1, 1);
return d.getDay();
},
//得到一个月的天数
getLastDay: function () {
var new_year = obj.year;//取当前的年份
var new_month = obj.month;//取下一个月的第一天，方便计算（最后一不固定）
var new_date = new Date(new_year, new_month, 1); //取当年当月中的第一天
return (new Date(new_date.getTime() - 1000 * 60 * 60 * 24)).getDate();//获取当月最后一天日期
},
getCurrent: function () {
var dt = obj.date;
obj.year = dt.getFullYear();
obj.month = dt.getMonth() + 1;
obj.day = dt.getDate();
},
getLastDate: function () {
if (obj.year == -1) {
var dt = new Date(obj.date);
obj.year = dt.getFullYear();
obj.month = dt.getMonth() + 1;
}
else {
var newMonth = obj.month - 1;
if (newMonth <= 0) {
obj.year -= 1;
obj.month = 12;
}
else {
obj.month -= 1;
}
}
},
getNexDate: function () {
if (obj.year == -1) {
var dt = new Date(obj.date);
obj.year = dt.getFullYear();
obj.month = dt.getMonth() + 1;
}
else {
var newMonth = obj.month + 1;
if (newMonth > 12) {
obj.year += 1;
obj.month = 1;
}
else {
obj.month += 1;
}
}
}
}
var commonUtil = {
getPrice: function (day) {
var dt = obj.year + "-";
dt+=obj.month;
dt += "-" + day;
for (var i = 0; i < obj.priceArr.length; i++) {
if (obj.priceArr[i].day == dt) {
return parseInt(obj.priceArr[i].price);
}
}
return -1;
},
chooseClick: function (sender) {
var date = sender.getAttribute("date");
var price = sender.getAttribute("price");
var el = document.getElementById(elemId);
if (el == null) {
return;
}
var input = $(sender).find('span.input');
var calendarPrice = $(sender).find('span.calendar_price01');
$(sender).removeClass();//移除on
calendarPrice.hide();
if(input.html()){
input.show();
}else {
$(sender).children().append("¥");
input = $(sender).find('span.input');
}
//给输入框写入初始值
if(price!=-1){
$(sender).find('input').val(price);
}
//先关闭防止重复绑定
$(sender).find('input').off('blur');
$(sender).find('input').blur(function () {
//获取输入框价格
var newPrice = $(sender).find('input').val();
if(newPrice==price){
$(sender).addClass("on");
calendarPrice.show();
input.hide();
return ;
}
if(newPrice){
var re = /^[0-9]+$/ ;
if(!re.test(newPrice)){
alert("请输入位正整数！");return;
}
}else {
$(sender).addClass("on");
calendarPrice.show();
input.hide();
return;
}
var params;
if(mType==1){//如果为整套
params = {
day:date,
house_id:houseId,
type:mType,
price:newPrice,
};
}else {
params = {
day:date,
house_id:houseId,
room_id:roomId,
price:newPrice,
};
}
$.post("/api/room_price_calendar",params,function(data,status){
if(data.code==100){
input.hide();
$(sender).attr("price",newPrice);
$(sender).toggleClass('on');
if(calendarPrice.html()){
calendarPrice.show();
}else {
calendarPrice.append("¥" +$(sender).attr("price")).show();
}
}
alert(data.msg);
});
})
}
}
$(document).bind("click", function (event) {
var e = event || window.event;
var elem = e.srcElement || e.target;
while (elem) {
if (elem.id == "calendar_choose") {
return;
}
elem = elem.parentNode;
}
pickerEvent.remove();
});
html代码
带价格的jQuery日期选择控件
数据格式：
[
{
"price": 500,
"day": "2017-6-14"
},
{
"price": 65,
"day": "2017-6-5"
},
{
"price": 6565,
"day": "2017-6-6"
},
{
"price": 0,
"day": "2017-6-7"
},
{
"price": 6565,
"day": "2017-6-8"
}
]