精华内容
下载资源
问答
  • 选择20号后,会自动选择本号的 js代码: // 控件 laydate.render({ elem: '#date1', format: "yyyy-MM-dd~yyyy-MM-dd", btns: ['clear', 'now'], trigger: 'click', done: function(value, date, ...

    如图:

    选择20号后,会自动选择本号的周

    js代码:

    // 周控件
            laydate.render({
                elem: '#date1',
                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;
                        $("#date1").val(start+"~"+end);
                    }else{
                        $("#date1").val('');
                    }
                }
            });

    html代码:

    <div class="layui-form-item">
            <label class="layui-form-label">上周</label>
            <div>
                <input type="text" id="date1" class="layui-input" name="time" autocomplete="off" style="width: 35%">
            </div>
        </div>

     

    展开全文
  • layui时间选择选择周和季度

    千次阅读 2020-08-12 17:41:31
    layui时间选择选择周和季度 最近一个后台管理页面数据查询时间间隔要有:日,,月,季度,年;UI组件我们用的layui,官方dome只有日月年(直接去ctrl+c ctrl+v就好了,在这就不多说了);So我们要自定义周和...

    layui时间选择器选择周和季度

    在这里插入图片描述
    最近一个后台管理页面数据查询时间间隔要有:日,周,月,季度,年;UI组件我们用的layui,官方dome只有日月年(直接去ctrl+c ctrl+v就好了,在这就不多说了);So我们要自定义周和季度,直接上代码:

    组件引用:(记得换成你的地址)
    	<!-- layui框架样式 -->
        <link type="text/css" href="/static/plugins/layui/css/layui.css" rel="stylesheet" />
        <!-- layui框架js -->
        <script type="text/javascript" src="/static/plugins/layui/layui.js"></script>
    
    html:
    	<div class=" layui-form-item">
            <div class="layui-inline layui-form">
                <div class="layui-input-inline">
                    <select name="type" id="selectedOption" lay-filter="college">
                        <option value="day" selected="selected">按日统计</option>
                        <option value="week">按周统计</option>
                        <option value="month">按月统计</option>
                        <option value="quarter">按季度统计</option>
                        <option value="year">按年统计</option>
                    </select>
                </div>
                <label class="layui-inline" id="worldlable" style="width: 190px;">
                    <input id="worldId" type="text" class="layui-input laydate-test" data-type="date" autocomplete="off">
                </label>
            </div>
        </div>
    
    js:

    周:用的时间区间的,选择任意日期,显示选择日期的周,例:选择 2020-08-05 显示 2020-08-03~2020-08-09;因为我们这边后台定的请求数据格式是:xxxx-xx (2020年-18周)就去网上荡了个日期转为周的;
    季度:这个有点取巧的,用的是月份的取前面4个月份改了下文字;

        layui.use(['form', 'upload', 'layer', 'laydate', 'jquery'], function () {
            let form = layui.form;
            let layer = layui.layer;
            let laydate = layui.laydate;
            laydate.render({
                elem: '#worldId',
                max: genTime('day'),
                value: genTime('day'),
                type: 'date'
            });
            form.on('select(college)', function (data) {
                let opt = $("#selectedOption").val();
                let ele = $("#selectedOption");
                $("#worldId").remove();
                $("#worldlable").html('<input id="worldId" type="text" class="layui-input laydate-test" data-type="date" autocomplete="off">');
                // 月
                if (opt == "month") {
                    laydate.render({
                        elem: '#worldId',
                        type: 'month',
                        max: genTime('month'),
                        value: genTime('month'),
                        btns: ['clear', 'confirm']
                    });
                    // 日
                } else if (opt == "day") {  
                    laydate.render({
                        elem: '#worldId',
                        type: 'date',
                        max: genTime('day'),
                        value: genTime('day'),
                        btns: ['clear', 'confirm']
                    });
                    // 周
                } else if (opt == "week") {
                    renderWeekDate('#worldId', '');
                    // 季度
                } else if (opt == "quarter") {
                    renderSeasonDate('#worldId', '');
                    // 年
                } else if (opt == "year") {
                    laydate.render({
                        elem: '#worldId',
                        type: 'year',
                        max: genTime('day'),
                        value: genTime('year'),
                        btns: ['clear', 'confirm']
                    });
                }
            });
            // 周
            function renderWeekDate(ohd, sgl) {
                let ele = $(ohd);
                laydate.render({
                    elem: ohd,
                    type: 'date',
                    max: genTime('day'),
                    format: "yyyy-MM-dd~yyyy-MM-dd",
                    btns: ['clear', 'confirm'],
                    done: function (value, date, endDate) {
                        if (value != "" && value.length > 0) {
                            let today = new Date(value.substring(0, 10));
                            let weekday = today.getDay();
                            let monday;
                            let 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());
                            }
                            let month = monday.getMonth() + 1;
                            if (month < 10) {
                                month = "0" + month;
                            }
                            let day1 = monday.getDate();
                            if (day1 < 10) {
                                day1 = "0" + day1;
                            }
                            let start = "" + monday.getFullYear() + "-" + month + "-" + day1;
                            let month2 = sunday.getMonth() + 1;
                            if (month2 < 10) {
                                month2 = "0" + month2;
                            }
                            let day2 = sunday.getDate();
                            if (day2 < 10) {
                                day2 = "0" + day2;
                            }
                            let end = "" + sunday.getFullYear() + "-" + month2 + "-" + day2;
                            ele.val(start + "~" + end);
                        } else {
                            ele.val('');
                        }
                    }
                });
            }
            // 季度
            function renderSeasonDate(ohd, sgl) {
                let ele = $(ohd);
                laydate.render({
                    elem: ohd,
                    type: 'month',
                    format: 'yyyy-M',
                    btns: ['clear', 'confirm'],
                    ready: function (value, date, endDate) {
                        let hd = $("#layui-laydate" + ele.attr("lay-key"));
                        if (hd.length > 0) {
                            hd.click(function () {
                                quarter($(this));
                            });
                        }
                        quarter(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", "");
                        }
                    }
                });
            }
        });
        function genTime(opt) {
            let now = new Date();
            let year = now.getFullYear();
            let mth = now.getMonth();
            let day = now.getDate();
            let month = mth + 1;
            if (month < 10) {
                month = '0' + month
            }
            if (day < 10) {
                day = '0' + day
            }
            let str;
            if (opt == 'day') {
                str = year + '-' + month + '-' + day;
            } else if (opt == 'month') {
                str = year + '-' + month;
            }
            return str;
        }
        function quarter(thiz) {
            let mls = thiz.find(".laydate-month-list");
            mls.each(function (i, e) {
                $(this).find("li").each(function (inx, ele) {
                    let cx = ele.innerHTML;
                    if (inx < 4) {
                        ele.innerHTML = cx.replace(/月/g, "季度");
                    } else {
                        ele.style.display = "none";
                    }
                });
            });
        }
        function isNull(quarter) {
            if (quarter == null || typeof (quarter) == "undefined" || quarter == "") return true;
            return false;
        }
        /**
         * 日期转为周 格式2020-07-14
         * @param {String} dateString 日期
        */
        function getYearWeek(dateString) {
            let da = dateString;//日期格式2015-12-30
            //当前日期
            let date1 = new Date(da.substring(0, 4), parseInt(da.substring(5, 7)) - 1, da.substring(8, 10));
            //1月1号
            let date2 = new Date(da.substring(0, 4), 0, 1);
            //获取1月1号星期(以周一为第一天,0周一~6周日)
            let dateWeekNum = date2.getDay() - 1;
            if (dateWeekNum < 0) { dateWeekNum = 6; }
            if (dateWeekNum < 4) {
                //前移日期
                date2.setDate(date2.getDate() - dateWeekNum);
            } else {
                //后移日期
                date2.setDate(date2.getDate() + 7 - dateWeekNum);
            }
            let d = Math.round((date1.valueOf() - date2.valueOf()) / 86400000);
            if (d < 0) {
                let date3 = (date1.getFullYear() - 1) + "-12-31";
                return getYearWeek(date3);
            } else {
                //得到年数周数
                let year = date1.getFullYear();
                let week = Math.ceil((d + 1) / 7);
                return year + "-" + week;
            }
        }
    
    番外篇:

    还是那句话万一一不小心对你有点用,点个赞!谢谢了!~

    展开全文
  • laydate.render({elem: '#date1',format: "yyyy-MM-dd~yyyy-MM-dd",btns: ['clear', 'now'],trigger: 'click',done: function(value, date, endDate){if(value!="" && value.length>...

    laydate.render({

    elem: '#date1',

    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;

    $("#date1").val(start+"~"+end);

    }else{

    $("#date1").val('');

    }

    }

    });

    展开全文
  • 周选择下拉控件

    2018-03-27 16:56:16
    周选择下拉控件 取值、赋值 显示内容2016年第11周(3.6-3.12)
  • 事件统计 事件统计 月 季 年 查询 事件类型统计 ...

    实现选择框如下图所示:
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    实现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;
        }
    
    展开全文
  • layui自定义时间框之选取区间

    千次阅读 2018-11-29 17:45:36
    &lt;input type="text" id="date1" name="date1"...layui-input test-item" style="width:200px;" value=""/&gt; js: var max;
  • layui.use(['laydate'], function() { var laydate = layui.laydate; var monday = getMonday(new Date()); var mm = layui.util.toDateString(monday,'yyyy-MM-dd') var sunday = GetDateStr(mond...
  • * 时间选择器 * **/ let data=new Date(); let monthCurr1=data.getMonth()+1; let yearCurr=data.getFullYear(); let day; //时间选择选择本周----周一 function getMonday() { let today=new Date(); let ...
  • 年月日范围选择 年月日选择器 年月日时分秒选择器 日期有效范围只限定在:2017年 日期有效范围限定在:过去一到未来一 时间有效范围设定在: 上午九点半到下午五点半 日期时间有效范围的设定: layui.use(["jquery...
  • laydate实现季度选择

    2018-12-18 10:26:52
    实现季度选择,时间段选择, 亲测有效,还算好用。适用于大多数前端框架
  • elem: '.layui-ldate' ,type: 'datetime' ,range: '~' ,format: 'yyyy-MM-dd' }); 样式如下图 开始自定义控件可选取的值 //定义接收本月的第一天和最后一天 var startDate1 = new Date(new Da...
  • layui上的日期选择控件十分丰富,基本能满足我们的需要,也可以自定义制作,我因为要设计点击日期自动获取该日期的区间,所以需要自定义设计。 如图: 随机选择一个日期,点击确定 <!DOCTYPE html>...
  • 模块加载名称:laydatelayDate快速使用layui.use('laydate', function(){var laydate = layui.laydate;//执行一个laydate实例laydate.render({elem: '#test1' //指定元素});});1. 基础参数选项通过核心方法:laydate...
  • 其中季度的选择是有点投机的,只显示前四个月的,将月改为季度。 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title...
  • <link rel="stylesheet" href="../layui/css/layui.css" media="all"> <!-- 注意:如果你直接复制所有代码到本地,上述css路径需要改成你本地的 --> .hide { display: none; } .layui-laydate-header { ...
  • 和 layer 一样,你可以在 layui 中使用 layDate,也可直接使用 layDate 独立版,请按照你的实际需求来选择。场景用前准备调用方式1. 在 layui 模块中使用下载 layui 后,引入layui.css和layui.js即可通过layui.use('...
  • 首先引入layui.js和jquery.js以及layui的样式文件layui.css HTML代码如下: <div class="layui-form-item" style="margin-left: 10px"> <div class="layui-inline layui-form"> <label class=...
  • script type="text/javascript" th:src="@{/static/layui/layui.all.js}"></script> 对js进行修改 原代码 tools:{confirm:"确定",clear:"清空",now:"现在"}} 修改后的代码 tools:{confirm:"确定",clear:...
  • 给代码添加如下部分:layui.use('form', function()...实现效果:HTML代码:执行周期每星期每天N天每小时N小时N分钟每月四周五layui.use('form', function(){var form = layui.form;form.on('sel...
  • <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta ...meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">...li..
  • 基于layui的日期控件进行拓展的控件。自定义layui日期控件,实现可以多选、禁止选择(例如某天不可选)。
  • layui日期控件

    2021-12-12 09:11:16
    layui的date日期选择控件相关属性
  • 我离开jQuery(layui)选择vue

    万次阅读 2019-10-24 17:31:00
    layui采用的是jquery 做底层的支撑,熟悉jQuery的朋友使用自然觉得好用;...离开layui后我用了一学习了vue。 我离开layui的重点是layui的 【飞吻】获取麻烦,还收费;社区提问还有钱。。受不了。 ...
  • layui日期范围控件(支持周季)

    千次阅读 2018-08-21 10:08:06
    需求:需要日期范围控件支持日月季年,以及日期偏移,同时类型具体应支持到选择周几(如类型日期偏移为3,则只能选择周三) 季结果展示:   解决: /** * 初始化日期控件 * @param id 日期控件id #id ...
  • 主题代码:只需要引入layui.css和layui.js即可看到效果 注意一点,两个laydate中的format属性里的格式写法,必须不能出现重名的,否则会前者的值会覆盖后者,比如:type为date:yyyy-mm-dd和type为time:HH:mm,就会...
  • $(".layui-laydate-content td:not(.laydate-day-prev):eq(0)").click(); $(".layui-laydate-content td:not(.laydate-day-prev):eq(9)").click(); }) $("#zhongxun").click(function () { $(".layui-laydate-...

空空如也

空空如也

1 2 3 4 5 ... 16
收藏数 317
精华内容 126
关键字:

layui周选择