使用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>'; } } }
相关文章推荐
- 安卓AlertDialog进阶使用实现日期选择、单选、多选。
- 使用PHP实现计算两个日期间隔的年、月、周、日数
- QCalendar的使用:实现弹出日历选择日期的例子
- 使用select2实现多选select下拉框
- 使用javascript实现ListBox左右全选,单选,多选,全请
- 微信小程序使用picker实现时间和日期选择框功能【附源码下载】
- Android 使用DialogFragment 实现一个可以多选的Dialog
- Java中使用LocalDate根据日期来计算年龄的实现方法
- Flask学习笔记-使用bootstrap-datepicker实现页面日期选择
- 使用DatePickerDialog和TimePickerDialog实现日期和时间选择对话框
- 使用javascript实现ListBox左右全选,单选,多选,全请
- 使用 multiple 属性可以实现多选
- Android ListView 使用checkbox 实现 单选、多选操作
- Labview使用Xcontrol实现多选下拉列表
- python 使用datetime模块timedelta实现日期时间相加
- 实现 cxTreeList使用复选框实现多选 自动级联选择
- 代码实现日期选择器UIDatePicker使用
- 使用jquery-combobox实现select下拉框多选之后,如何将下拉框的值传给input隐藏域
- 使用JS,JQuery实现下拉框显示当前日期之前的年月
- 使用RichFaces的rich:calendar组件实现日期时间的选取