layui时间组件周和季度切换渲染

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <title>layui时间组件周和季度切换渲染</title>

  <meta name="renderer" content="webkit">

  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

  <link rel="stylesheet" href="layui/css/layui.css" media="all">

  <!-- 注意:如果你直接复制所有代码到本地,上述css路径需要改成你本地的 -->

</head>

<body>

  <div class="layui-form-item" style="margin-left: 10px">

    <div class="layui-inline layui-form">

      <label class="layui-inline" id="layDateBox" style="width:400px; height:30px">

        <input id="myDateBox" type="text" class="layui-input laydate-test" data-type="date" autocomplete="off">

      </label>

      <div class="layui-input-inline" style="width: 100px; height:30px">

        <select name="type" id="selectedOption" lay-filter="college">

          <option value="week" selected="selected">按周</option>

          <option value="quarter">按季度</option>

        </select>

      </div>

    </div>

  </div>

  <script src="layui/layui.js" charset="utf-8"></script>

  <script src="/js/jquery-2.1.4.min.js" charset="utf-8"></script>

  <script>

    $(document).ready(function () {

      layui.use(['form', 'upload', 'layer', 'laydate', 'jquery'], function () {

        let form = layui.form;

        let layer = layui.layer;

        let laydate = layui.laydate;

        laydate.render({

          elem: '#myDateBox',

          max: genTime('day'),

          value: genTime('day'),

          type: 'date'

        });

        form.on('select(college)', function (data) {

          let opt = $("#selectedOption").val();

          let ele = $("#selectedOption");

          $("#myDateBox").remove();

          $("#layDateBox").html('<input id="myDateBox" type="text" class="layui-input laydate-test" data-type="date" autocomplete="off">');

          // 周

          if (opt == "week") {

            renderWeekDate('#myDateBox', '');

          }// 季度

          else if (opt == "quarter") {

            renderSeasonDate('#myDateBox', '');

          }

        });

        // 周

        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;

        }

      }

    })

  </script>

</body>

</html>

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容