layui时间控件选择器

首先需要引入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);
	}
})