此方法引用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;
}
