首先需要引入layui的两个文件layui.css和layui.js
在线配置
<link rel="stylesheet" href="//res.layui.com/layui/build/css/layui.css" media="all">
<script src="//res.layui.com/layui/build/layui.js"></script>
声明的div标签
<div class="col-sm-10">
<input id="beginDatetime" class="form-control" v-model="actDetail.beginDatetime" placeholder="开始时间"/>
<span style="color: red">格式示例:2017-06-15 10:00:00</span>
</div>
<div class="col-sm-10">
<input id="endDatetime" class="form-control" v-model="actDetail.endDatetime" placeholder="结束时间" />
<span style="color: red">格式示例:2017-06-17 10:00:00</span>
</div>
调用layui方法
layui.use('laydate',function(){
var laydate = layui.laydate;
var start = {
istime: true,//是否开启时间选择
min: laydate.now(-1),//最小日期:昨天
format: 'YYYY-MM-DD hh:mm:ss', //格式化时间
choose:function(dates){
vm.actDetail.beginDatetime = dates; //函数回调,把选中的时间赋值给实体(基于vue)
end.min = dates; //最小结束时间
}
};
var end = {
istime: true,
min:laydate.now(),
format:'YYYY-MM-DD hh:mm:ss',
choose:function(dates){
vm.actDetail.endDatetime = dates;
}
};
document.getElementById('beginDatetime').onclick = function(){
start.elem = this;
laydate(start);
}
document.getElementById('endDatetime').onclick = function(){
end.elem = this;
laydate(end);
}
})