laydate日期选择器

此方法引用laydate.js layui.css 

具体文档请参考 layui官网

 

前端代码,新增输入框,id绑定为date

 

 

js中文件 准备初始化

//日期选择器
$(document).ready(function () {
init_date();
});
function init_date() {
layui.use(['form','layer','laydate'],function(){
var laydate = layui.laydate;
//执行一个laydate实例
laydate.render({
elem: '#date', //指定元素
format: 'yyyy年M月d日', //设置时间格式
value: new Date() ,//设置初始默认值
eventElem: '.layui-date'
,trigger: 'click'
});
})
}

 

 

其中elem 绑定id值

format自定义时间格式 yyyy-MM-dd HH:mm:ss 

value值为显示默认的值 这里以当前时间为例 new Date()

eventElem为输入框内日历图标显示 可自定义在style中 无需修改源代码

trigger为点击事件 与 点击输入框同样效果

 

eventElem: .layui-date  样式源码

.layui-date{
position: absolute;
right: 10px;
top: 40%;
margin-top: -10px;
cursor: pointer;
font-size: 30px;
color: #7B8994;
}