jQuery web 组件 后台日历价格、库存设置的代码
前端之家收集整理的这篇文章主要介绍了
jQuery web 组件 后台日历价格、库存设置的代码，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
<p style="text-align: center">
<p style="text-align: center">
<div class="jb51code">
<pre class="brush:js;">
/*
- yagizaDate 1.0
-
- Yagiza
- Copyright 2016,MIT License
-
- IE 8+,Chrome,fireFox
/
// 字段说明 ****
// buyNumMax 最多购买数
// buyNumMin 最少购买数
// cashback 返现
// price 售价、分销价、分销售价
// priceSettlement 结算价、采购价、分销结算价
// priceMarket 景区挂牌价
// priceRetail 建议零售价
// stock 总库存
// stockDay 当天库存
// * END 字段说明 ****
// // 初始化数据
// var priceData = {
// callbackId:'#mydemo',// 用于接收回调JSON数据
// // startDay: null,// // endDay: null,// priceSettlement: "结算价",// priceNormal: "售价",// cashback: "返现",// stock: "9999",// // week: [],// dayData: [
// {
// date: "2016-10-21",// stockDay: "9000",// buyNumMax: "50",// buyNumMin: "1",// priceNormal: "0.12",// priceMarket: "100.00",// priceSettlement: "90.00",// priceRetail: "99.00"
// },{
// date: "2016-11-12",// priceNormal: "12.00",// priceRetail: "99.00"
// }
// ]
// }
//
// 调用方法
// $.yagizaDate('2016-10-08',priceData);
// 日期格式不合法，自动获取系统时间0000-00-00
;(function($){
var yagizaDate = function(setDay,priceData){
var this = this,// 数据接收#id
callbackId = priceData.callbackId,priceData = priceData;
// 系统日期 年月
var todayDate = new Date(),sy = todayDate.getFullYear(),sm = todayDate.getMonth(),// 今天几号
d = todayDate.getDate(),// 今天 y-m-d
today = sy + '-'+this.ddf(sm+1)+'-'+this.ddf(d);
// Datedata 日期价格库存json
// setDay 设置日期 2016-10-10
var reg = /^\d{4}-\d{2}-\d{2}$/;
if(!reg.test(setDay)){
console.log('日期格式有误！');
// return false;
setDay = sy + '-' + this.ddf(sm+1) + '-' + this.ddf(d);
}
// 默认参数配置
// 设置年月
// replace(/-/,'/') 解决IE98及以下版本输出NaN问题
var setMsec = new Date(setDay.replace(/-/g,'/')),y = setMsec.getFullYear(),m = setMsec.getMonth()+1,// 当月天数
maxdays = (new Date(Date.parse(new Date(y,m,1)) - 86400000)).getDate(),//获取当月（日期对象）
thisMonthDate = new Date(y,m-1);
firstDayWeek = thisMonthDate.getDay(); //这个月的第一天是星期几
// HTML结构
// td id="2016-10-10"
var td_id;
// 传入对象中日期数据设置
var arr = priceData.dayData,arrLen = arr.length;
// 遮罩
this.mask = $('<div class="yagiza-date-selector">');
// 创建html DOM结构
var html = '';
html += ' <div class="date-selector-Box">';
html += ' <div class="header">';
html += ' '+ y +'年'+ this.ddf(m) +'月
';
if((y+''+this.ddf(m)) > (sy+''+this.ddf(parseInt(sm)+1))) {
html += ' <a class="prev" id="yagizaPrevMonth" title="上一月">';
}
html += ' <a class="next" id="yagizaNextMonth" title="下一月">';
html += '
';
html += ' <div class="date-table">';
html += ' <table cellpadding="0" cellspacing="0">';
html += '
<tr class="week"><th class="weekend">日一 | 二 | 三 | 四 | 五 | <th class="weekend">六</tr>';
html += ' <tbody id="yagizaDateTd">';
var i = 0,j = 0,k = 0,showDay,// tr 行数
row = Math.ceil((maxdays + firstDayWeek)/7);
// 创建日期表格
for(j=0;j<row;j++){
html+='<tr>';
for(k=1;k<=7;k++){
showDay = j*7 + k - firstDayWeek;
if(showDay>0&&showDay<=maxdays){
td_id = y +'-'+ this.ddf(m) +'-'+ this.ddf(showDay);
// 今天及之后的日期，显示价格、库存
if(td_id>=today){
html+='<td data-week="'+ (k - 1) +'" id="'+ td_id +'">
'+showDay+'</td>';
} else {
html+='<td>
'+showDay+'</td>';
}
} else {
html+='<td> </td>';
}
} // for k End
html+='</tr>';
} // for j End
html += ' ';
html += ' </table>';
html += '
';
html += ' <div class="footer"><button type="reset" class="btn bg-green">重置<button type="submit" class="btn bg-orange">确定<button type="cancel" class="btn bg-gray">取消
';
html += '
';
this.mask.append(html);
$('body').append(this.mask);
// 上一月
$('.yagiza-date-selector #yagizaPrevMonth').click(function(){
var newMonth='';
if(parseInt(m)==1){
newMonth = (y - 1)+'-12-01';
} else {
newMonth = y + '-' +
this.ddf(m - 1)+'-01';
}
this.close();
$.yagizaDate(newMonth,priceData);
});
// 下一月
$('.yagiza-date-selector #yagizaNextMonth').click(function(){
var newMonth='';
if(parseInt(m)==12){
newMonth = (y + 1)+'-01-01';
} else {
newMonth = y + '-' +
this.ddf(m + 1)+'-01';
}
this.close();
$.yagizaDate(newMonth,priceData);
});
// 取消
$('.yagiza-date-selector button[type="cancel"]').click(function(){
this.close();
});
// 确定
$('.yagiza-date-selector button[type="submit"]').click(function(){
var callbackData = JSON.stringify(priceData);
$(callbackId).text(callbackData);
this.close();
});
// 重置 保留基本信息
$('.yagiza-date-selector button[type="reset"]').click(function(){
priceData = {
startDay: null,endDay: null,priceSettlement: priceData.priceSettlement,priceNormal: priceData.priceNormal,cashback: priceData.cashback,stock: priceData.stock,week: null,dayData: []
}
this.close();
$.yagizaDate(setDay,priceData);
});
// 加载库存、售价等数据
$(function(){
// 今天及之后的日期，
显示价格、库存
// 含有ID的td
标签
var td = $('.yagiza-date-selector #yagizaDateTd td[id]');
// console.log(td)
$.each(td,function(i,item){
var list='
分：￥'+this.nf(priceData.priceNormal)+'
采：￥'+this.nf(priceData.priceSettlement)+'
库：'+this.nf(priceData.stock)+'
';
// 独立设置价格、日期
$.each(arr,item2){
if(item.id===item2.date){
list='<div data-buyNumMax="'+item2.buyNumMax+'" data-buyNumMin="'+item2.buyNumMin+'" data-priceMarket="'+item2.priceMarket+'" data-priceRetail="'+item2.priceRetail+'">
分：￥'+this.nf(item2.priceNormal)+'
采：￥'+this.nf(item2.priceSettlement)+'
库：'+this.nf(item2.stockDay)+'
';
}
});
// 将价格、库存写入对应日期
$('#'+item.id).addClass('active').find('b').after(list);
list = '';
})
// 点击
显示单日信息设置窗口
td.click(function(){
var id = $(this).attr('id');
var obj = {
date: id,stockDay: $(this).find('div p:nth-child(3) span').text(),buyNumMax: $(this).find('div').attr('data-buyNumMax'),buyNumMin: $(this).find('div').attr('data-buyNumMin'),priceNormal: $(this).find('div p:nth-child(1) span').text(),priceMarket: $(this).find('div').attr('data-priceMarket'),priceSettlement: $(this).find('div p:nth-child(2) span').text(),priceRetail: $(this).find('div').attr('data-priceRetail'),startDay: id,endDay: id
}
// console.log('obj:'+obj)
// 创建单日设置项
this.dateSet(obj);
$('#'+id).closest('.date-selector-
Box').css('display','none');
});
// 取消 单日信息设置
$('.yagiza-date-selector').on('click','.close',function(){
$('.yagiza-date-selector .date-set-
Box').remove();
$('.yagiza-date-selector .date-selector-
Box').css('display','block');
});
// 设置 日期相关信息
*
$('.yagiza-date-selector').on('click','[rel="enable"]',function(){
var thisDate = $(this).attr('data-date'),stockDay = this.nf($('#stockDay').val()),buyNumMax = this.nf($('#buyNumMax').val()),buyNumMin = this.nf($('#buyNumMin').val()),priceNormal = this.nf($('#priceNormal').val()),priceMarket = this.nf($('#priceMarket').val()),priceSettlement = this.nf($('#priceSettlement').val()),priceRetail = this.nf($('#priceRetail').val());
// 判断日期格式是否合法
var startDay = $('#startDay').val(),endDay = $('#endDay').val();
// var reg = /^\d{4}-\d{2}-\d{2}$/;
if(!reg.test(startDay)){
alert('开始时间格式错误，请使用0000-00-00格式！');
$('#startDay').val(thisDate).focus();
return false;
}
if( startDay<today){
alert('开始时间不能小于今天（'+today+'）！');
$('#startDay').val(thisDate).focus();
return false;
}
if(!reg.test(endDay)){
alert('结束时间格式错误，请使用0000-00-00格式！');
$('#endDay').val(thisDate).focus();
return false;
}
if( endDay<today){
alert('结束时间不能小于今天（'+today+'）！');
$('#startDay').val(thisDate).focus();
return false;
}
if( endDay<startDay){
alert('结束时间（'+endDay+'）不能小于开始时间（'+startDay+'）！');
$('#endDay').val(thisDate).focus();
return false;
}
// 批量设置 ***
// 设置周一 至 周日
var weekArr = [],setWeek = $('input[name=setWeek]:checked');
setWeek.each(function(i,item){
// ！parseInt 周几转换为数字，字符串后面不能匹配
weekArr[i] = parseInt(item.value);
})
//
获取选择周日的长度
var wlen = weekArr.length;
// 特殊设置日期
var spDayArr = [],// 只设置了日期范围的
spDayArr1 = [],// 设置了周几的
spDayArr2 = [];
// 如果
用户设置了日期
if(startDay!=thisDate || endDay!=thisDate){
var sd = new Date(startDay),ed = new Date(endDay),sdMsec = Date.parse(startDay),edMsec = Date.parse(endDay),// 相差天数
dayLen = parseInt((edMsec - sdMsec)/(1000
60 60
24)) + 1;
for(var n=0;n<dayLen;n++){
spDayArr1[n] = this.msecToYmd((sdMsec + 86400000n));
}
// 删除priceData.dayData中，与设置日期重复的数据
$.each(spDayArr1,function(index,item){
// 判断priceData.dayData是否存在相应日期
if(arrLen>0){
for(var k=(arrLen-1);k>=0;k--){
// 当日数据已存在-》
删除
if(arr[k] && arr[k].date === item){
arr.splice(k,1);
}
}
}
}); // each END
} else {
spDayArr = [thisDate];
}
// 如果
用户设置了周几
if(wlen){
// 如果
用户设置了日期范围
if(spDayArr1.length>0){
var w,wd;
$.each(spDayArr1,item){
w = new Date(item);
wd = w.getDay();
if($.inArray(wd,weekArr)>-1 && item){
spDayArr2.push(item);
}
})
} else {
// 设置了周几
//
获取一年的时间设置
var todayMsec = Date.parse(todayDate),newDate;
for(var k=0;k<365;k++){
newDate = new Date(todayMsec+k*86400000);
if($.inArray(newDate.getDay(),weekArr)>-1){
spDayArr2.push(
this.dateFYmd(newDate));
}
}
}
} // end 周几设置
// 重组 priceData.dayData
// 存在设置日期
if(spDayArr2.length>0){
spDayArr = spDayArr2;
} else if(spDayArr1.length>0){
spDayArr = spDayArr1;
}
if(spDayArr.length>0){
var o;
$.each(spDayArr,item){
var o = {
date: item,stockDay: stockDay,buyNumMax: buyNumMax,buyNumMin: buyNumMin,priceNormal: priceNormal,priceMarket: priceMarket,priceSettlement: priceSettlement,priceRetail: priceRetail
}
// 将新数据写入 priceData.dayData
arr.push(o);
// delete o;
});
// 更新priceData.dayData
priceData.dayData = arr;
}
this.close();
$.yagizaDate(setDay,priceData);
});
}); // $(function) END
}
yagizaDate.prototype = {
// 毫秒转yyyy-MM-dd
msecToYmd: function(item){
var y,d,item = new Date(item);
y = item.getFullYear();
m = item.getMonth()+1
m = m < 10 ? '0'+ m : m;
d = item.getDate();
d = d < 10 ? '0'+ d : d;
return y+'-'+m+'-'+d;
},// // yyyy-MM-dd转毫秒
// ymdToMsec: function(item){
// var itemDate = new Date(item);
// return itemDate.getTime();
// },// Date对象格式话 yyyy-mm-dd
dateFYmd: function(d){
var y = d.getFullYear(),m = d.getMonth(),d = d.getDate(),ymd = y + '-'+this.ddf(m+1)+'-'+this.ddf(d);
return ymd;
},// 两位数格式化，不足两位首位补0
// double-digit fomart
ddf: function(n){
n = parseInt(n);
return n < 10 ? '0'+n : n;
},// 移除日期设置窗口
close: function(){
this.mask.remove();
},// 为空或undefined = ''
// null fomart
nf: function(str){
return str ? str : '';
},// 创建单日/批量设置窗口DOM
dateSet: function(obj){
var _this = this;
var set
Box = '';
// console.log(obj)
set
Box += '<div class="date-set-
Box"><div class="header">
'+obj.date+' 价格详细
<a href="javascript:void(0)" class="close">
+= ' <button rel="enable" class="btn bg-orange" data-date="'+obj.date+'">启用本设置';
