您的位置:首页 > 其它

使用mydate97实现日期多选

2012-11-05 17:54 337 查看

先看下效果图



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>';
}
}
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: