精华内容
下载资源
问答
  • 选择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.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...

    直接上代码:

    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(monday,6);
    	laydate.render({
                elem: '#daterange'//绑定的html元素id
                ,type:'date'
                ,format: 'yyyy-MM-dd' //格式
                ,trigger : 'click'
                ,min:mm //最小可选择日期
                ,max:sunday //最大可选择日期
                ,range:true //设置启用日期范围
            });
     })
     //获取当前日期的周一日期
     function getMonday( date ) {
        		var day = date.getDay() || 7;  
        		if( day !== 1 ) 
            	date.setHours(-24 * (day - 1)); 
        		return date;
    		}
    //获取某日期的第n天后的日期
     function GetDateStr(date,n) {   
       			var dd = date;  
       			dd.setDate(dd.getDate()+n);  
       			var y = dd.getFullYear();   
       			var m = (dd.getMonth()+1)<10?"0"+(dd.getMonth()+1):(dd.getMonth()+1);
       			var d = dd.getDate()<10?"0"+dd.getDate():dd.getDate();
    			return y+"-"+m+"-"+d;   
    		};
    
    展开全文
  • 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;
            }
        }
    
    番外篇:

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

    展开全文
  • layui上的日期选择控件十分丰富,基本能满足我们的需要,也可以自定义制作,我因为要设计点击日期自动获取该日期的区间,所以需要自定义设计。 如图: 随机选择一个日期,点击确定 <!DOCTYPE html>...

    layui上的日期选择控件十分丰富,基本能满足我们的需要,也可以自定义制作,我因为要设计点击日期自动获取该日期的周区间,所以需要自定义设计。

    如图:

    随机选择一个日期,点击确定

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <link rel="stylesheet" href="layui/css/layui.css" media="all">
            <script type="text/javascript" src="layui/layui.js" ></script>
            <script src="js/jquery.min.js"></script>
        </head>
        <body>
            <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
        <div class="layui-fluid main">
            <div class="layui-row">
                <div class="layui-tab layui-tab-brief">
                    
                    <div class="layui-tab-content">
                        <div class="layui-tab-item layui-show layui-form">
                            <div class="product-list-filter">
                                <form action="" method="post">
                                    
                                    <div class="layui-inline">
                                        <div class="layui-input-inline">
                                            <select name="type" id="type" lay-filter="filter0">
                                                 <option value="week" selected="selected">按照周统计</option>
                                                 <option value="month" >按照月统计</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="layui-inline">
                                        <div class="layui-input-inline">
                                            <input type="text" id="date1" name="date1" lay-verify="date1" class="layui-input test-item" readonly="readonly" style="width:200px;" value=""/>
                                            <input type="text" id="date2" name="date2" lay-verify="date2" class="layui-input test-item" style="width:200px;" value=""/>
                                        </div>
                                    </div>
                                    <div class="layui-inline">
                                        <div class="layui-input-inline"><input type="button" class="layui-btn wy-btn" onclick="submit001()" value="搜索"/></div>
                                        <!--  <div class="layui-input-inline"><input type="button" class="layui-btn wy-btn" οnclick="tongji()" value="开发统计"/></div>  -->
                                    </div>
                                </form>
                            </div><!--product-list-filter-->
                            
                        </div>
                    </div>
                </div><!--layui-tab-->         
            </div><!--layui-row-->
        </div><!--main-->
        </body>
        <script>
            layui.use(['form','laydate'], function(){
            var form = layui.form,
                layer = layui.layer;
            var laydate = layui.laydate;
            
            //时间选择器
            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('');
                  }
                       
                }
            });
            //时间选择器
            laydate.render({
              elem: '#date2',
              type: 'month'
            });
                
            form.on('select(filter0)', function(data){
                $("#date1").val("");
                $("#date2").val("");
                var type = $("#type option:selected").val();
                if(type=="week")
                {
                    $("#date1").show();
                    $("#date2").hide();
                }
                else
                {
                    $("#date1").hide();
                    $("#date2").show();
                }
            });
            $(document).ready(function(){
            
                $("#date1").show();
                $("#date2").hide();
            
        });
        });
        //提交搜索的点击事件,将时间拼接一下
        function submit001()
        {
            
            var type = $("#type option:selected").val();
            var date = "";
            if(type=="week")
            {
                date = $("#date1").val();
                alert(date)
            }
            else
            {
                date = $("#date2").val();
                alert(date)
            }
            if(date=="")
            {
                errTips('请选择查询的日期!');
            }
        }    
        </script>
    </html>

     

    转载于:https://www.cnblogs.com/lxk233/p/10025244.html

    展开全文
  • 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>...
  • elem: '.layui-ldate' ,type: 'datetime' ,range: '~' ,format: 'yyyy-MM-dd' }); 样式如下图 开始自定义控件可选取的值 //定义接收本月的第一天和最后一天 var startDate1 = new Date(new Da...
  • 我离开jQuery(layui)选择vue

    万次阅读 2019-10-24 17:31:00
    layui采用的是jquery 做底层的支撑,熟悉jQuery的朋友使用自然觉得好用;...离开layui后我用了一学习了vue。 我离开layui的重点是layui的 【飞吻】获取麻烦,还收费;社区提问还有钱。。受不了。 ...
  • 年月日范围选择 年月日选择器 年月日时分秒选择器 日期有效范围只限定在:2017年 日期有效范围限定在:过去一到未来一 时间有效范围设定在: 上午九点半到下午五点半 日期时间有效范围的设定: layui.use(["jquery...
  • 给代码添加如下部分:layui.use('form', function()...实现效果:HTML代码:执行周期每星期每天N天每小时N小时N分钟每月四周五layui.use('form', function(){var form = layui.form;form.on('sel...
  • * 时间选择器 * **/ let data=new Date(); let monthCurr1=data.getMonth()+1; let yearCurr=data.getFullYear(); let day; //时间选择选择本周----周一 function getMonday() { let today=new Date(); let ...
  • 工作断断续续?注意力不集中?感觉自己被碎片化了?晓一推荐你一种非常有效的方法——番茄工作法...在进行时间管理和规划的时候,很多人习惯以一个月、一个或者一天为时间单位。实际上,我们在工作过程中,还可以...
  • <link rel="stylesheet" href="../layui/css/layui.css" media="all"> <!-- 注意:如果你直接复制所有代码到本地,上述css路径需要改成你本地的 --> .hide { display: none; } .layui-laydate-header { ...
  • 其中季度的选择是有点投机的,只显示前四个月的,将月改为季度。 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title...
  • 基于layui的日期控件进行拓展的控件。自定义layui日期控件,实现可以多选、禁止选择(例如某天不可选)。
  • Javascript+layui实现医生排班功能

    千次阅读 2020-05-21 16:05:35
    1.选择月份后,列表中日期更新为选中月份1号所在自然。 2.点击今天按钮,跳转至当前日期所在自然。 已上传到CSDN,如有需要可自取,希望能帮助到大家,传送门。 写在最后: 如有错误之处,望指正,大家可...
  • layui日期范围控件(支持周季)

    千次阅读 2018-08-21 10:08:06
    需求:需要日期范围控件支持日月季年,以及日期偏移,同时类型具体应支持到选择周几(如类型日期偏移为3,则只能选择周三) 季结果展示:   解决: /** * 初始化日期控件 * @param id 日期控件id #id ...
  • 自写选择时间页面.zip

    2020-06-22 15:41:46
    自己写的横向选择时间的功能,里面包含,日、、月、季、年,的选择,其中可以通过layui直接指定位置,也可以左右箭头点击,欢迎下载
  • jsp月份选择 &lt;input name="sdate" id="sdate" class="layui-input" lay-key="17" type="text" /&gt; 级联 &lt;select name="edate&...
  • 我这主要是为了应用在layui的日期时间范围选择控件的初始值 timeFrame(a, b, c) { var nowdate = new Date(); var oneweekdate = new Date(nowdate - c * 24 * 3600 * 1000); var time1 = nowdate.getFullYear...
  • 本周是Java学习的第十一,主要是对layui的学习,其中主要包括对页面元素和内置模块两个方面的学习,页面元素方面主要学习了栅格布局、图标。按钮、表单、导航栏、选项卡、卡片面板、表格、时间线等,内置模块主要...
  • 富文本编辑器数据提交到后台

    千次阅读 2020-05-28 16:31:18
    在开发在线测系统的时候写了一个发布公告的功能,这也是常见的功能,特此记录一下。 先看下成品。 这里使用的是layui的富文本编辑器与layDate控件。这里实现的功能是,管理员可以选择日期发布公告,通过提交按钮将...
  • 3.时间选择器全部用layui 4.公用的confirm弹框,需要再讨论 5.css、js脚本的v参数格式yyyymmddxx,其中xx是改的次数 6.获取学生、学期、信息公用的方法,存在异步进程 7.tool_enter_kw,kw参数有问题 8.需要加一个...
  • layui-inline nextWeek">下一<i class="iconfont icon-gengduo1"></i></div> <!-- /*排班区域*/ --> <div class="SchedulingHalf SchedulingBot">...

空空如也

空空如也

1 2
收藏数 28
精华内容 11
关键字:

layui周选择