wyh_www
2019-05-30 13:12前端使用的layui的laydate插件,要实现选择一个时间范围,下边以表格的形式显示出对应的数据
日历插件使用的是layui的laydate插件,一个开始时间,一个结束时间,当选择完开始时间和结束时间之后,(在同一个月份中),下边以表格的形式动态显示数据。
<input type="text" class="layui-input" id="startTime" name="text1" value="">
至
<input type="text" class="layui-input" id="endTime" name="text2" value="">
//要显示的表格,里边的tr,td需要动态插入
```<div class="div_content">
<table id="table">
<thead>
<tr>
<th>姓名</th>
<th>正常</th>
<th>迟到</th>
<th>早退</th>
<th>请假</th>
</tr>
</thead>
</table>
</div>
//时间控件
// function changeDate(){
var date = new Date();
var y = date.getFullYear();
var m = date.getMonth()+1;
m = m<10 ? ('0'+ m) :m;
var d = date.getDate();
d = d<10 ? ('0'+ d) :d;
return y+'-'+m+'-'+d;
}
var now = changeDate();
// console.log(now);
layui.use('laydate', function(){
var laydate = layui.laydate;
/*时间插件*/
var startTime =laydate.render({
elem: '#startTime',
type: 'date',
showBottom: false,
max:now,
done:function(value,date){
if(value!=""){
date.month=date.month-1;
endLayDate.config.min=date;
//选择开始日期后,结束日期自动清空
$("#endTime").val("");
}else{
endLayDate.config.min=startTime.config.min;
}
console.log(value);
},
});
/*时间插件*/
var endLayDate = laydate.render({
elem: '#endTime',
type: 'date',
showBottom: false,
max:now,
done:function(value,date){
if(value!=""){
date.month=date.month-1;
startTime=date;
}else{
startTime.config.max=endLayDate.config.max;
}
console.log(value);
}
});
});
- 点赞
- 回答
- 收藏
- 复制链接分享
1条回答
为你推荐
- 传入一个时间串mybatis怎样查询当月的数据?xml里怎样写?
- java
- mysql
- 2个回答
- 前端大佬........我这个表格点击此处单元格,怎么获取 父级行的数据
- html5
- javascript
- css3
- css
- 1个回答
- 当点击提交的时候怎么用post请求出以一个数组的形式提交
- vue.js
- 2个回答
- layui动态生成多个相同select框,如何使之间赋值互不影响?
- select
- 前端
- layui
- 2个回答
- 我想实现一个时间下拉框,就是在这个下拉框里时间格式为2018-09-01~2018-09-30
- 前端
- 3个回答
换一换