效果图:
代码:
js:直接写在里面即可
layui.use('laydate', function () {
var laydate = layui.laydate;
//月
lay('#thisMonth').on('click', function (e) { //假设 thisMonth 是一个按钮
laydate.render({
elem: '#haha'//随便建个标签,目的是为了不让按钮文字被改变
, type: 'month'
, show: true //直接显示
, closeStop: '#thisMonth' //这里代表的意思是:点击 thisMonth 所在元素阻止关闭事件冒泡。如果不设定,则无法弹出控件
, range: '~'//范围选择,~是格式
, theme: 'molv'//主题
, format: 'yyyy-MM'//格式
, done: function (value, date, endDate) {
$("#selectTime").val(value);
if (value != null && value != '') {
var split = value.split("~");
//调用数据接口
getDatas(split[0], split[1], "month", null);
}
}
});
});
});
我的html:样式不一样,大概率不能直接用,需要自行创建
<ul class="layui-tab-title">
<li id="thisWeek" >本周</li>
<li id="thisMonth">月</li>
<span id="haha"style=""></span>
<li id="thisYear">年</li>
<span id="hehe"style=""></span>
<li id="thisDIY">自定义</li>
<span id="oo"style=""></span>
<div style="display: inline;height: 40px">
<input type="text" id="selectTime" style="height: 31px;width: 300px;">
</div>
</ul>