网站首页技术博客

laydate组件增加自定义按钮

洞天水月2021-04-26 10:49:48265人次阅读
摘要因为工作业务需求,需要再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的内容

文章评论