jQuery web 组件 后台日历价格、库存设置的代码


Posted in Javascript onOctober 14, 2016

jQuery web 组件 后台日历价格、库存设置的代码

jQuery web 组件 后台日历价格、库存设置的代码

/* 
* 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", 
// stockDay: "9000", 
// buyNumMax: "50", 
// buyNumMin: "1", 
// priceNormal: "12.00", 
// priceMarket: "100.00", 
// priceSettlement: "90.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 += ' <h2>'+ y +'年'+ this.ddf(m) +'月</h2>'; 
if((y+''+this.ddf(m)) > (sy+''+this.ddf(parseInt(sm)+1))) { 
html += ' <a class="prev" id="yagizaPrevMonth" title="上一月"><i></i></a>'; 
} 
html += ' <a class="next" id="yagizaNextMonth" title="下一月"><i></i></a>'; 
html += ' </div>'; 
html += ' <div class="date-table">'; 
html += ' <table cellpadding="0" cellspacing="0">'; 
html += ' <thead><tr class="week"><th class="weekend">日</th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th class="weekend">六</th></tr></thead>'; 
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 +'"><b>'+showDay+'</b></td>'; 
} else { 
html+='<td><b>'+showDay+'</b></td>'; 
} 
} else { 
html+='<td> </td>'; 
} 
} // for k End 
html+='</tr>'; 
} // for j End 
html += ' </tbody>'; 
html += ' </table>'; 
html += ' </div>'; 
html += ' <div class="footer"><button type="reset" class="btn bg-green">重置</button><button type="submit" class="btn bg-orange">确定</button><button type="cancel" class="btn bg-gray">取消</button></div>'; 
html += '</div>'; 
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='<div><p>分:¥<span>'+_this_.nf(priceData.priceNormal)+'</span></p><p>采:¥<span>'+_this_.nf(priceData.priceSettlement)+'</span></p><p>库:<span>'+_this_.nf(priceData.stock)+'</span></p></div>'; 
// 独立设置价格、日期 
$.each(arr, function(i, item2){ 
if(item.id===item2.date){ 
list='<div data-buyNumMax="'+item2.buyNumMax+'" data-buyNumMin="'+item2.buyNumMin+'" data-priceMarket="'+item2.priceMarket+'" data-priceRetail="'+item2.priceRetail+'"><p>分:¥<span>'+_this_.nf(item2.priceNormal)+'</span></p><p>采:¥<span>'+_this_.nf(item2.priceSettlement)+'</span></p><p>库:<span>'+_this_.nf(item2.stockDay)+'</span></p></div>'; 
} 
}); 
// 将价格、库存写入对应日期 
$('#'+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 + 86400000*n)); 
} 
// 删除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, function(i, 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, function(i,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,m,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 setBox = ''; 
// console.log(obj) 
setBox += '<div class="date-set-box"><div class="header"><h2>'+obj.date+' 价格详细</h2><a href="javascript:void(0)" class="close"><i></i></a></div>'; 
setBox += ' <dl class="yagiza-form clearfix">'; 
setBox += ' <dd>最多购买数:<input class="input-text" id="buyNumMax" type="text" value="'+ this.nf(obj.buyNumMax) +'"></dd>'; 
setBox += ' <dd>最少购买数:<input class="input-text" id="buyNumMin" type="text" value="'+ this.nf(obj.buyNumMin) +'"></dd>'; 
setBox += ' <dd>分 销 售 价:<input class="input-text" id="priceNormal" type="text" value="'+ this.nf(obj.priceNormal) +'"></dd>'; 
setBox += ' <dd>景区挂牌价:<input class="input-text" id="priceMarket" type="text" value="'+ this.nf(obj.priceMarket) +'"></dd>'; 
setBox += ' <dd>分销结算价:<input class="input-text" id="priceSettlement" type="text" value="'+ this.nf(obj.priceSettlement) +'"></dd>'; 
setBox += ' <dd>建议零售价:<input class="input-text" id="priceRetail" type="text" value="'+ this.nf(obj.priceRetail) +'"></dd>'; 
setBox += ' <dd>当 天 库 存:<input class="input-text" id="stockDay" type="text" value="'+ this.nf(obj.stockDay) +'"></dd>'; 
setBox += ' </dl><hr><dl class="yagiza-form clearfix">'; 
setBox += ' <dt><b>批量设置</b></dt>'; 
setBox += ' <dd>开 始 时 间:<input class="input-text" id="startDay" type="date" value="'+ this.nf(obj.date) +'"></dd>'; 
setBox += ' <dd>结 束 时 间:<input class="input-text" id="endDay" type="date" value="'+ this.nf(obj.date) +'"></dd>'; 
setBox += ' </dl>'; 
setBox += ' <dl class="yagiza-form clearfix">'; 
setBox += ' <dt>'; 
setBox += ' 设 置 星 期:'; 
setBox += ' <label><input name="setWeek" type="checkbox" value="1"> 周一</label>'; 
setBox += ' <label><input name="setWeek" type="checkbox" value="2"> 周二</label>'; 
setBox += ' <label><input name="setWeek" type="checkbox" value="3"> 周三</label>'; 
setBox += ' <label><input name="setWeek" type="checkbox" value="4"> 周四</label>'; 
setBox += ' <label><input name="setWeek" type="checkbox" value="5"> 周五</label>'; 
setBox += ' <label><input name="setWeek" type="checkbox" value="6"> 周六</label>'; 
setBox += ' <label><input name="setWeek" type="checkbox" value="0"> 周日</label>'; 
setBox += ' </dt>'; 
setBox += ' </dl>'; 
setBox += ' <div class="footer">'; 
setBox += ' <button rel="enable" class="btn bg-orange" data-date="'+obj.date+'">启用本设置</button>'; 
setBox += ' <button rel="cancel" class="btn bg-gray close">取消</button>'; 
setBox += ' </div>'; 
setBox += '</div>'; 
this.mask.append(setBox); 
} 
} 
// window.yagizaDate = yagizaDate; 
$.yagizaDate = function(month, priceData){ 
return new yagizaDate(month, priceData); 
} 
})(jQuery);

html:

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>YageizaDate Demo</title> 
<script src="jquery-1.12.1.min.js"></script> 
<link href="date-selector/style.css" rel="stylesheet" type="text/css"> 
<script src="date-selector/yagiza-date-selector.min.js"></script> 
<!--[if lte IE 9]> 
<link href="date-selector/style-ie.css" rel="stylesheet" type="text/css"> 
<![endif]--> 
<style> 
.container { 
width: 800px; 
margin: 20px auto; 
} 
</style> 
</head> 
<body> 
<div class="container"> 
<table> 
<tr> 
<td> 
<b>结算价</b> 
<input data-id="priceSettlement" type="text" size="10"> 
<b> 售价</b> 
<input data-id="priceNormal" type="text" size="10"> 
<b> 返点</b> 
<input data-id="cashback" type="text" size="10"> 
<b> 总库存</b> 
<input data-id="stock" type="text" size="10"> 
<button type="button">设置日期价格</button> 
</td> 
</tr> 
</table> 
<textarea id="mydemo" style="width:100%;height:300px;margin-top:20px;">接收回调数据</textarea> 
</div> 
<script> 
$(function(){ 
$('button').on('click', function(){ 
var priceData = { 
callbackId:'#mydemo', 
priceSettlement: $(this).siblings('[data-id="priceSettlement"]').val(), 
priceNormal: $(this).siblings('[data-id="priceNormal"]').val(), 
cashback: $(this).siblings('[data-id="cashback"]').val(), 
stock: $(this).siblings('[data-id="stock"]').val(), 
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", 
// stockDay: "9000", 
// buyNumMax: "50", 
// buyNumMin: "1", 
// priceNormal: "12.00", 
// priceMarket: "100.00", 
// priceSettlement: "90.00", 
// priceRetail: "99.00" 
// } 
] 
} 
$.yagizaDate('2016-10-08',priceData); 
}); 
}); 
</script> 
</body> 
</html>

style.css

*{padding:0;margin:0}.clearfix:after{content:'';display:block;overflow:hidden;visibility:hidden;font-size:0;line-height:0;width:0;height:0;clear:both}.yagiza-date-selector{font-size:12px !important;background:rgba(0,0,0,0.5);position:fixed;z-index:100000;top:0;left:0;width:100%;height:100%;display:-webkit-flex;-webkit-justify-content:center;-webkit-align-items:center}.yagiza-date-selector .date-selector-box{position:relative;background-color:#FFF;width:640px}.yagiza-date-selector .date-selector-box .header{height:40px;line-height:40px;text-align:center;position:relative;background:#383435}.yagiza-date-selector .date-selector-box .header h2{font-size:1.5em;color:#CCC}.yagiza-date-selector .date-selector-box .header a{display:block;position:absolute;top:0;z-index:1;height:40px;width:40px;text-align:center;cursor:pointer}.yagiza-date-selector .date-selector-box .header a i{display:inline-block;margin-top:6px;width:28px;height:28px;background:url("img/prev-next.png") no-repeat 0 0}.yagiza-date-selector .date-selector-box .header .prev{left:0}.yagiza-date-selector .date-selector-box .header .prev i{background-position:0 -28px}.yagiza-date-selector .date-selector-box .header .next{right:0}.yagiza-date-selector .date-selector-box .date-table table{width:100%}.yagiza-date-selector .date-selector-box .date-table table .week th{color:#999;text-align:center !important;height:24px;font-weight:100;background:#383435}.yagiza-date-selector .date-selector-box .date-table table .week .weekend{color:#F60}.yagiza-date-selector .date-selector-box .date-table table td{border-right:1px solid #DDD;border-bottom:1px solid #DDD;line-height:1.2;height:76px;vertical-align:top;width:14.2%}.yagiza-date-selector .date-selector-box .date-table table td>b{display:block;font-size:1.4em;text-align:right;color:#DDD;font-family:'Arial Regular';margin:4px 4px 4px 0}.yagiza-date-selector .date-selector-box .date-table table td>div{margin-left:4px}.yagiza-date-selector .date-selector-box .date-table table td>div p{color:#F60}.yagiza-date-selector .date-selector-box .date-table table td.active{cursor:pointer}.yagiza-date-selector .date-selector-box .date-table table td.active b{color:#999}.yagiza-date-selector .date-selector-box .date-table table td.active:hover{background:#F60}.yagiza-date-selector .date-selector-box .date-table table td.active:hover b,.yagiza-date-selector .date-selector-box .date-table table td.active:hover div p{color:#FFF}.yagiza-date-selector .date-selector-box .date-table table td.last-child{border-right:0}.yagiza-date-selector .footer{background-color:#383435;padding:10px;text-align:right}.yagiza-date-selector .footer .btn{text-align:center;border-radius:2px;border:0 !important;cursor:pointer;color:#FFF;height:26px;line-height:26px !important;display:inline-block;padding:0 15px;position:relative}.yagiza-date-selector .footer .bg-orange{background:#F60}.yagiza-date-selector .footer .bg-orange:hover{background:#c44e00}.yagiza-date-selector .footer .bg-green{background:#55b526}.yagiza-date-selector .footer .bg-green:hover{background:#408f1a}.yagiza-date-selector .footer .bg-gray{background:#777}.yagiza-date-selector .footer .bg-gray:hover{background:#555}.yagiza-date-selector .footer .bg-cyan{background:#31b0d5}.yagiza-date-selector .footer .bg-cyan:hover{background:#269abc}.yagiza-date-selector .footer button{margin-left:5px}.yagiza-date-selector .date-set-box{position:relative;background-color:#FFF;width:640px}.yagiza-date-selector .date-set-box .header{height:46px;line-height:46px;position:relative;background:#383435}.yagiza-date-selector .date-set-box .header h2{color:#CCC;font-size:1.2em;margin-left:20px;font-weight:500}.yagiza-date-selector .date-set-box .header .close{display:block;position:absolute;z-index:1;right:0;top:0;width:40px;height:46px;text-align:right}.yagiza-date-selector .date-set-box .header .close i{width:24px;height:24px;margin:11px 11px 0 0;background:url("img/close-x-gray.png") no-repeat 0 0;display:inline-block}.yagiza-date-selector .date-set-box .header .close:hover i{background-position:0 -24px}.yagiza-date-selector .date-set-box .yagiza-form{margin:8px 20px;display:block;width:100%}.yagiza-date-selector .date-set-box .yagiza-form dd{position:relative;height:30px;line-height:30px;width:49%;float:left}.yagiza-date-selector .date-set-box .yagiza-form dd .input-text{display:block;position:absolute;z-index:1;height:22px;line-height:22px;vertical-align:middle;padding:0 4px;border:1px solid #CCC;background:#FFF;left:80px;top:3px}.yagiza-date-selector .date-set-box .yagiza-form dt{position:relative;height:30px;line-height:30px;display:block}.yagiza-date-selector .date-set-box .yagiza-form dt label{margin-left:15px;cursor:pointer}.yagiza-date-selector .date-set-box .yagiza-form dt label:first-child{margin-left:4px}.yagiza-date-selector hr{border:0;border-top:1px solid #CCC;border-bottom:1px solid #FFF;margin:0 20px}

style-ie.css

.yagiza-date-selector{background:url("img/bg-black-opacity.png")}.yagiza-date-selector .date-selector-box,.yagiza-date-selector .date-set-box{position:absolute;z-index:1;top:10%;left:50%;margin:0 0 0 -320px}
Javascript 相关文章推荐
js获取本机的外网/广域网ip地址完整源码
Aug 12 Javascript
JS小功能(checkbox实现全选和全取消)实例代码
Nov 28 Javascript
JavaScript利用append添加元素报错的解决方法
Jul 01 Javascript
js css 实现遮罩层覆盖其他页面元素附图
Sep 22 Javascript
Ionic实现页面下拉刷新(ion-refresher)功能代码
Jun 03 Javascript
ionic选择多张图片上传的示例代码
Oct 10 Javascript
微信小程序之裁剪图片成圆形的实现代码
Oct 11 Javascript
如何实现双向绑定mvvm的原理实现
May 28 Javascript
JS实现简单省市二级联动
Nov 27 Javascript
JavaScript进阶(二)词法作用域与作用域链实例分析
May 09 Javascript
浅谈鸿蒙 JavaScript GUI 技术栈
Sep 17 Javascript
解决vant框架做H5时踩过的坑(下拉刷新、上拉加载等)
Nov 11 Javascript
第一次接触神奇的Bootstrap
Oct 14 #Javascript
js仿手机页面文件下拉刷新效果
Oct 14 #Javascript
前端js实现文件的断点续传 后端PHP文件接收
Oct 14 #Javascript
js关于getImageData跨域问题的解决方法
Oct 14 #Javascript
AngularJS 与Bootstrap实现表格分页实例代码
Oct 14 #Javascript
深入学习js瀑布流布局
Oct 14 #Javascript
微信小程序 地图定位简单实例
Oct 14 #Javascript
You might like
S900/ ETON E1-XM 收音机
2021/03/02 无线电
用PHP和ACCESS写聊天室(一)
2006/10/09 PHP
php多层数组与对象的转换实例代码
2013/08/05 PHP
PHP限制页面只能在微信自带浏览器访问的代码
2014/01/15 PHP
PHP Curl出现403错误的解决办法
2014/05/29 PHP
php开发工具有哪五款
2015/11/09 PHP
php版微信发红包接口用法示例
2016/09/23 PHP
从新浪弄下来的全屏广告代码 与使用说明
2007/03/15 Javascript
JS对外部文件的加载及对IFRMAME的加载的实现,当加载完成后,指定指向方法(方法回调)
2011/07/04 Javascript
innerHTML中标签可以换行的方法汇总
2015/08/14 Javascript
AngularJs动态加载模块和依赖注入详解
2016/01/11 Javascript
Vue组件BootPage实现简单的分页功能
2016/09/12 Javascript
老生常谈Javascript中的原型和this指针
2016/10/09 Javascript
Bootstrap 3.x打印预览背景色与文字显示异常的解决
2016/11/06 Javascript
基于ExtJs在页面上window再调用Window的事件处理方法
2017/07/26 Javascript
vue插件vue-resource的使用笔记(小结)
2017/08/04 Javascript
js正则取值的结果数组调试方法
2018/10/10 Javascript
ES6的异步终极解决方案分享
2019/07/11 Javascript
微信小程序左右滚动公告栏效果代码实例
2019/09/16 Javascript
Python中还原JavaScript的escape函数编码后字符串的方法
2014/08/22 Python
Python异常学习笔记
2015/02/03 Python
Python简明入门教程
2015/08/04 Python
pygame游戏之旅 python和pygame安装教程
2018/11/20 Python
Python批量删除只保留最近几天table的代码实例
2019/04/01 Python
tensorflow 实现自定义layer并添加到计算图中
2020/02/04 Python
PyCharm 2020 激活到 2100 年的教程
2020/03/25 Python
TensorFlow使用Graph的基本操作的实现
2020/04/22 Python
python爬虫智能翻页批量下载文件的实例详解
2021/02/02 Python
Omio西班牙:全欧洲低价大巴、火车和航班搜索和比价
2017/02/11 全球购物
Farnell德国:电子元器件供应商
2018/07/10 全球购物
第二层交换机和路由器的区别?第三层交换机和路由器的区别?
2013/05/23 面试题
servlet面试题
2012/08/20 面试题
施工安全生产承诺书
2014/05/23 职场文书
学前班幼儿评语大全
2014/12/29 职场文书
研究生毕业登记表的自我鉴定范文
2019/07/15 职场文书
详解SQL的窗口函数
2022/04/21 Oracle