xm-select实现日期多选组件
基于layui和xm-select实现的一个日期多选小demo
效果如下：
代码如下：
<html>
<head>
<title>日期多选组件demo</title>
<script src="./layui.js"></script>
<script src="./xm-select.js"></script>
<script src="./laydate.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="xm-data-select" style="width: 400px;"></div>
<button onclick="getValue()">获取值</button>
</body>
<script>
var demo1 = xmSelect.render({
el:#xm-data-select,
content: <div id="laydate" />,
height: auto,
autoRow: true,
on: function(data){
if(!data.isAdd){
dateSelect(demo1.getValue(value));
}
}
})
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,
})
function removeAll(){
document.querySelectorAll(#laydate td[lay-ymd].layui-this).forEach(function(dom){
dom.classList.remove(layui-this);
});
}
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);
});
}
function getValue(){
let data = demo1.getValue("value")
alert("value:"+data)
}
</script>
<style>
xm-select .scroll-body{
margin-top: -5px;
}
xm-select .xm-body{
padding: 0;
border: none;
background-color: usnet;
box-shadow: none;
}
</style>
</html>
下一篇：
shell 上传与下载文件 SZ、RZ