使用mydate97实现日期多选

先看下效果图

使用mydate97实现日期多选_第1张图片

html代码:

<!-- mydate97插件,显示选取月份,触发onpicked事件 -->
<input type="text" class="fieldInput datetimepicker" readonly="readonly" id='scheduleDates2'>
<img src="/pkcc/struts/base/s.gif" style="vertical-align: middle; cursor: pointer;margin-left:3px;" class="datetimepicker" onclick="WdatePicker({el:'scheduleDates2',dateFmt:'yyyy-MM',onpicked:showDays2})">
<div id="dates-div2">
	<!-- 定义一个table用于显示日期情况 -->
	<table id="dates-table2">
	</table>
</div>

js代码

function showDays1(){
		$j('#dates-div1 #dates-table1').empty();//将table标签中的内容清空
		var dateStr = $j('#scheduleDates1').val();// 获取时间
		var dateArr = dateStr.split("-"); // 将年份和月份分开
		var daysLen = new Date(dateArr[0],dateArr[1],0).getDate();// 获取该月的天数
		$j('<tr><th>周一</th><th>周二</th><th>周三</th><th>周四</th><th>周五</th><th>周六</th><th>周日</th></tr>').appendTo($j('#dates-div1 #dates-table1'));
		var html="<tr>";// 组装html
		for(var i=1;i<=daysLen;i++){// 循环日期
			var weekIndex = new Date(dateArr[0],dateArr[1]-1,i).getDay();// 获取该天使星期几
			//alert(weekIndex);
			if(weekIndex == 0){//如果是星期日
				if(i == 1){//并且是1号
					for(var j=0;j<6;j++){// 星期一到星期六显示空格
						html += "<td></td>";
					}
				}
				html += '<td><input type="checkbox" name="days" value="'+dateStr+'-'+i+'"><label>'+i+'号</label></td>';
				$j(html+"</tr>").appendTo($j('#dates-div1 #dates-table1'));
				html = "<tr>";
				continue;
			}else if(i == 1){// 如果是1号
				for(var j=1;j<weekIndex;j++){
					html += "<td></td>";
				}
				html += '<td><input type="checkbox" name="days" value="'+dateStr+'-'+i+'"><label>'+i+'号</label></td>';
			}else if(i == daysLen){//如果是该月最后一天
				html += '<td><input type="checkbox" name="days" value="'+dateStr+'-'+i+'"><label>'+i+'号</label></td>';
				$j(html+"</tr>").appendTo($j('#dates-div1 #dates-table1'));
				break;
			}else{
				html += '<td><input type="checkbox" name="days" value="'+dateStr+'-'+i+'"><label>'+i+'号</label></td>';
			}
		}
	}



你可能感兴趣的:(日期多选)