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><
  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 9
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值