2019-11-19 20:13:50 +08:00
|
|
|
## 下拉日期多选
|
|
|
|
|
|
|
|
### laydate
|
2019-11-11 11:54:51 +08:00
|
|
|
|
2019-11-19 20:13:50 +08:00
|
|
|
```
|
|
|
|
//css调整部分
|
|
|
|
xm-select .scroll-body{
|
2019-11-21 13:19:41 +08:00
|
|
|
margin-top: -5px;
|
|
|
|
}
|
|
|
|
xm-select .xm-body{
|
|
|
|
padding: 0;
|
|
|
|
border: none;
|
|
|
|
background-color: usnet;
|
|
|
|
box-shadow: none;
|
2019-11-19 20:13:50 +08:00
|
|
|
}
|
|
|
|
```
|
|
|
|
|
|
|
|
:::demo
|
|
|
|
```html
|
|
|
|
|
2019-11-21 13:19:41 +08:00
|
|
|
<div id="demo1" style="width: 274px;"></div>
|
2019-11-19 20:13:50 +08:00
|
|
|
|
|
|
|
<script>
|
|
|
|
var demo1 = xmSelect.render({
|
|
|
|
el: '#demo1',
|
|
|
|
content: '<div id="laydate" />',
|
|
|
|
height: 'auto',
|
|
|
|
autoRow: true,
|
|
|
|
on: function(data){
|
|
|
|
if(!data.isAdd){
|
|
|
|
dateSelect(demo1.getValue('value'));
|
|
|
|
}
|
|
|
|
}
|
|
|
|
})
|
2019-11-11 11:54:51 +08:00
|
|
|
|
2019-11-19 20:13:50 +08:00
|
|
|
layui.laydate.render({
|
|
|
|
elem: '#laydate',
|
|
|
|
position: 'static',
|
|
|
|
showBottom: false,
|
|
|
|
format: 'yyyy-M-dd',
|
|
|
|
change: function(){
|
|
|
|
dateSelect(demo1.getValue('value'));
|
|
|
|
},
|
|
|
|
done: function(value){
|
|
|
|
console.log(value)
|
|
|
|
var values = demo1.getValue('value');
|
|
|
|
var index = values.findIndex(function(val){
|
|
|
|
return val === value
|
|
|
|
});
|
|
|
|
|
|
|
|
if(index != -1){
|
|
|
|
values.splice(index, 1);
|
|
|
|
}else{
|
|
|
|
values.push(value);
|
|
|
|
}
|
|
|
|
|
|
|
|
dateSelect(values);
|
|
|
|
|
|
|
|
demo1.update({
|
|
|
|
data: values.map(function(val){
|
|
|
|
return {
|
|
|
|
name: val,
|
|
|
|
value: val,
|
|
|
|
selected: true,
|
|
|
|
}
|
|
|
|
})
|
|
|
|
})
|
|
|
|
},
|
|
|
|
ready: removeAll,
|
2019-11-11 11:54:51 +08:00
|
|
|
})
|
|
|
|
|
2019-11-19 20:13:50 +08:00
|
|
|
function removeAll(){
|
|
|
|
document.querySelectorAll('#laydate td[lay-ymd].layui-this').forEach(function(dom){
|
|
|
|
dom.classList.remove('layui-this');
|
|
|
|
});
|
|
|
|
}
|
2019-11-11 11:54:51 +08:00
|
|
|
|
2019-11-19 20:13:50 +08:00
|
|
|
function dateSelect(values){
|
|
|
|
removeAll();
|
|
|
|
values.forEach(function(val){
|
|
|
|
var dom = document.querySelector('#laydate td[lay-ymd="'+val.replace(/-0([1-9])/g, '-$1')+'"]');
|
|
|
|
dom && dom.classList.add('layui-this');
|
|
|
|
});
|
|
|
|
}
|
2019-11-11 11:54:51 +08:00
|
|
|
|
2019-11-19 20:13:50 +08:00
|
|
|
//这里仅仅提供一个演示, 更多的想法由你自己来创造
|
|
|
|
|
|
|
|
</script>
|
|
|
|
```
|
|
|
|
:::
|