网站首页技术博客
laydate组件增加自定义按钮
摘要因为工作业务需求,需要再laydate的日期范围选择组件中增加一些自定义按钮,而laydate默认支持的按钮只有三个,clear、now、confirm。
要实现这样的需求只能自己去追加自定义的按钮。
先看一下最终的效果:
这里追加了,本月、本季度、本年度三个按钮,可以快速选择范围日期。
具体实现是利用laydate控件初始打开的回调,在回调中进行按钮的追加和事件的绑定。
实现代码如
因为工作业务需求,需要再laydate的日期范围选择组件中增加一些自定义按钮,而laydate默认支持的按钮只有三个,clear、now、confirm。
要实现这样的需求只能自己去追加自定义的按钮。
先看一下最终的效果:
这里追加了,本月、本季度、本年度三个按钮,可以快速选择范围日期。
具体实现是利用laydate控件初始打开的回调,在回调中进行按钮的追加和事件的绑定。
实现代码如下:
laydate.render({
elem: '#create_time'
, range: true
, ready: function (date) {
var btns = $("#btns").html;
$("#layui-laydate1 .layui-laydate-footer").append(btns);
//本月
$("#currentMonth").click(function () {
var currentDate = new Date();
month = (currentDate.getMonth() + 1) < 10 ? '0' + (currentDate.getMonth() + 1)
: (currentDate.getMonth() + 1);
value = date.year + '-' + month + '-01' + ' - ' + date.year + '-'
+ month + '-' + laydate.getEndDate();
laydate.render({
elem: '#create_time',
value: value
});
$("#layui-laydate1").hide();
});
//本季度
$("#currentQuarter").click(function () {
var currentDate = new Date();
month = currentDate.getMonth() + 1;
quarterEnd = (Math.ceil(month / 3) * 3);
quarterEnd = quarterEnd < 10 ? '0' + quarterEnd : quarterEnd;
quarterStart = (quarterEnd - 2) < 10 ? '0' + (quarterEnd - 2) : (quarterEnd - 2);
value = date.year + '-' + quarterStart + '-01' + ' - ' + date.year + '-'
+ quarterEnd + '-' + laydate.getEndDate(Math.ceil(date.month / 3) * 3);
laydate.render({
elem: '#create_time',
value: value
});
$("#layui-laydate1").hide();
});
//本年
$("#currentYear").click(function () {
value = date.year + '-' + '01' + '-01' + ' - ' + date.year + '-' + '12'
+ '-' + '31';
laydate.render({
elem: '#create_time',
value: value
});
$("#layui-laydate1").hide();
});
console.log(date);
}
});
btns的内容