Yagiza 通过本文主要向大家介绍了jquery,web,组件,jquery,日历等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com
/*
* 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-sel