网站首页技术博客

因为工作业务需求，需要再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的内容