layui日期组件,并渲染其中部分日期

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="https://www.layuicdn.com/layui-v2.5.5/css/layui.css"
    />
  </head>
  <style>
    .laydate-day-mark {
      background: red;
    }

    .layui-laydate-footer {
      display: none;
    }

    .layui-laydate-header i.laydate-prev-y,
    .layui-laydate-header i.laydate-next-y {
      display: none;
    }

    .layui-laydate,
    .layui-laydate-hint {
      width: 100%;
    }

    .layui-laydate-main {
      width: 100% !important;
    }

    .layui-laydate-content table {
      margin: auto;
      width: 100%;
    }

    .laydate-day-mark::after {
      background-color: transparent !important;
    }
  </style>

  <body>
    <div id="test"></div>
  </body>
  <script src="https://www.layuicdn.com/layui-v2.5.5/layui.js"></script>
  <script>
    var list = ["2019-10-12", "2019-10-14", "2019-10-15"];

    var a = {};

    for (let i = 0; i < list.length; i++) {
      a[list[i]] = "";
      console.log(list[i]);
    }

    layui.use("laydate", function() {
      var laydate = layui.laydate;

      var ins1 = laydate.render({
        elem: "#test",
        type: "datetime",
        mark: a,
        elem: "#test",
        btns: [],
        position: "static",
        change: function(value, date) {
          //监听日期被切换
          lay("#testView").html(value);
        }
      });
    });
  </script>
</html>

发布了151 篇原创文章 · 获赞 1 · 访问量 2789

猜你喜欢

转载自blog.csdn.net/hql1024/article/details/103626813
今日推荐