layui 实现日期按季度显示

效果：

                    <label class="layui-form-label">季度选择：</label>
                    <div class="layui-input-inline">
                        <input type="text" class="demo-input" readonly="readonly" placeholder="请选择季度" id="summary_quarter">
                    </div>

<script>
/**
     * 使用layui时间控件
     * */
    layui.use('laydate', function() {
        const now = new Date();
        const laydate = layui.laydate;
        // 季度
        laydate.render({
            elem: '#summary_quarter'
            ,type: 'month'
            ,format: 'yyyy年M季度'
            ,min: "1900-1-1"
            , max: now.getFullYear() - 1 + "-12-31"
           ,ready: function () {
                const hd = $("#layui-laydate" + $('#summary_quarter').attr("lay-key"));
                if (hd.length > 0) {
                    hd.click(function () {
                        ren($(this));
                    });
                }
                ren(hd);
            }
        });
        function  ren(thiz) {
            const mls = thiz.find(".laydate-month-list");
            mls.each(function () {
                $(this).find("li").each(function (inx, ele) {
                    const cx = ele.innerHTML;
                    if (inx < 4) {
                        ele.innerHTML = cx.replace(/月/g, "季度");
                    } else {
                        ele.style.display = "none";
                    }
                });
            });
        }
    });
</script>

 

layui官网：官网

layuiDatePro：Github