layui时间控件天、周、月、季和年的实现

最新推荐文章于 2023-06-28 16:07:43 发布

萧瑟彡

最新推荐文章于 2023-06-28 16:07:43 发布

阅读量3.8k

点赞数 2

分类专栏： js 文章标签： layui jquery javascript

本文链接：https://blog.csdn.net/qq_45638714/article/details/121356922

版权

js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

实现选择框如下图所示：
在这里插入图片描述

实现html代码如下：

 <div class="datesel flex">
            <a s_href="week"  class="selbox flex">周</a>
            <a s_href="yue"  class="selbox flex">月</a>
            <a s_href="season"  class="selbox flex">季</a>
            <a s_href="yer" class="selbox flex">年</a>
            <label class="layui-inline-label" id="worldlable">
                <input id="worldId" type="text" class="layui-input laydate-test" data-type="date">
            </label>
            <button type="button" name="button" id="search" >查询</button>
        </div>

实现js代码如下：

 layui.use(['laydate', 'layer', 'jquery'], function() {
        var laydate = layui.laydate,
            layer = layui.layer,
            $ = layui.jquery
        //日选择器
        laydate.render({
            elem: '#worldId',
            max: genTime('d'),
            value: genTime('d'),
            type: 'date'
        });
        function genTime(opt) {
            var now = new Date();
            var year = now.getFullYear();
            var mth = now.getMonth();
            var day = now.getDate();
            var month = mth + 1;
            if (month < 10) {
                month = '0' + month
            }
            if (day < 10) {
                day = '0' + day
            }
            var str;
            if (opt == 'd') {
                str = year + '-' + month + '-' + day;
            } else if (opt == 'm') {
                str = year + '-' + month;
            }
            return str;
        }
        $('div .datesel a').on('click',function(){
            var hel= $(this).attr('s_href');
            $(this).addClass("active")
                .siblings().removeClass("active");
            $("#worldId").remove();
            $("#worldlable").html(
                '<input id="worldId" type="text" class="layui-input laydate-test" data-type="date">');
            if (hel =="week"){
                $('#dtl').val("week");
                    //周选择器
                getWeek("#worldId");
            }else if (hel =="yue"){
                //月选择器
                $('#dtl').val("yue");
                laydate.render({
                    elem: '#worldId',
                    type: 'month',
                    max: genTime('m'),
                    value: genTime('m'),
                    btns: ['clear', 'confirm']
              });
            }else if (hel == "season"){
                $('#dtl').val('season');
                //季选择器
                getSeason('#worldId');
            }else if(hel == "yer"){
                $('#dtl').val('yer');
                //年选择器
                laydate.render({
                    elem: '#worldId',
                    type: 'year',
                    btns: ['clear', 'confirm']
                });
            }
        });
        function getWeek(ohd){
            var ele = $(ohd);
            laydate.render({
                elem: ohd,
                format: "yyyy-MM-dd~yyyy-MM-dd",
                btns: ['clear', 'now'],
                trigger: 'click',
                done: function (value, date, endDate) {
                    if (value != "" && value.length > 0) {
                        var today = new Date(value.substring(0, 10));
                        var weekday = today.getDay();
                        var monday;
                        var sunday;
                        if (weekday == 0) {
                            monday = new Date(1000 * 60 * 60 * 24 * (weekday - 6) + today.getTime());
                        } else {
                            monday = new Date(1000 * 60 * 60 * 24 * (1 - weekday) + today.getTime());
                        }
                        if (weekday == 0) {
                            sunday = today;
                        } else {
                            sunday = new Date(1000 * 60 * 60 * 24 * (7 - weekday) + today.getTime());
                        }
                        var month = monday.getMonth() + 1;
                        if (month < 10) {
                            month = "0" + month;
                        }
                        var day1 = monday.getDate();
                        if (day1 < 10) {
                            day1 = "0" + day1;
                        }
                        var start = "" + monday.getFullYear() + "-" + month + "-" + day1;
                        var month2 = sunday.getMonth() + 1;
                        if (month2 < 10) {
                            month2 = "0" + month2;
                        }
                        var day2 = sunday.getDate();
                        if (day2 < 10) {
                            day2 = "0" + day2;
                        }
                        var end = "" + sunday.getFullYear() + "-" + month2 + "-" + day2;
                        ele.val(start + "~" + end);
                    } else {
                        ele.val('');
                    }
                }
            });
        }
        function getSeason(ohd) {
            var ele = $(ohd);
            laydate.render({
                elem: ohd,
                type: 'month',
                format: 'yyyy年M季度',
                //range: sgl?null:'~',
                //min:"1900-1-1",
                btns: ['clear', 'confirm'],
                ready: function (value, date, endDate) {
                    var hd = $("#layui-laydate" + ele.attr("lay-key"));
                    console.log("hd=" + hd);
                    if (hd.length > 0) {
                        hd.click(function () {
                            ren($(this));
                        });
                    }
                    ren(hd);
                },
                done: function (value, date, endDate) {
                    if (!isNull(date) && date.month > 0 && date.month < 5) {
                        ele.attr("startDate", date.year + "-" + date.month);
                    } else {
                        ele.attr("startDate", "");
                    }
                    if (!isNull(endDate) && endDate.month > 0 && endDate.month < 5) {
                        ele.attr("endDate", endDate.year + "-" + endDate.month)
                    } else {
                        ele.attr("endDate", "");
                    }
                }
            });
        }
        var ren = function(thiz) {
            var mls = thiz.find(".laydate-month-list");
            mls.each(function(i, e) {
                $(this).find("li").each(function(inx, ele) {
                    var cx = ele.innerHTML;
                    console.log('inx'+inx);
                    if (inx < 4) {
                        ele.innerHTML = cx.replace(/月/g, "季度");
                    } else {
                        ele.style.display = "none";
                    }
                });
            });
        };
    });

    function isNull(s) {
        if (s == null || typeof(s) == "undefined" || s == "") return true;
        return false;
    }