master

分支 (1)

标签 (1)

管理

管理

master

v1.0.0

laydatePro
/
testLaydateSingle.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>laydatePro</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">
  <style>
    body {
      background-color: #f8f8f8;
    }

    .layui-form-label {
      width: 86px;
    }
  </style>
</head>
<body>
<div class="layui-container">
  <div class="layui-row layui-col-space10">
    <div class="layui-col-xs7" id="tools">
      <div>
        <button class="layui-btn layui-btn-primary" lay-even="resetValue"
                style="margin-left: 116px;margin-bottom: 20px;">清空时间
        </button>
        <a href="testLaydate.html" style="margin-left: 60px;color: deeppink;">跳转到使用layui的测试页面</a>
        <div class="layui-btn-container" style="margin-left: 116px;">
          <button class="layui-btn layui-btn-warm" lay-even="renderLaydate1">尝试通过class去render多个节点</button>
          <button class="layui-btn layui-btn-warm" lay-even="renderLaydate2">改变类型（month）</button>
          <br>
          <button class="layui-btn" lay-even="renderLaydate3">提供一些可选时间让用户可以快速选择（time）</button>
          <br>
          <button class="layui-btn" lay-even="renderLaydate4">点击月份之后快速确认</button>
          <button class="layui-btn" lay-even="renderLaydate5">不完整的time</button>
          <br>
          <button class="layui-btn" lay-even="renderLaydate7">季度</button>
          <br>
          <button class="layui-btn layui-btn-warm" lay-even="renderLaydate8">周一作为一周的第一天</button>
          <button class="layui-btn layui-btn-primary" lay-even="renderLaydate9">以今天的星期作为一周的第一天</button>
        </div>
        <div class="layui-form" style="margin-top: 10px;">
          <div class="layui-form-item">
            <label class="layui-form-label">选择时间1</label>
            <div class="layui-input-inline">
              <input type="text" class="layui-input laydate-test" data-type="date" lay-data="">
            </div>
            <label class="layui-form-label">选择时间2</label>
            <div class="layui-input-inline">
              <input type="text" class="layui-input laydate-test" data-type="date"
                     lay-data="{type: 'year', format: 'yyyy年'}">
            </div>

          </div>
          <div class="layui-form-item">
            <label class="layui-form-label">选择时间3</label>
            <div class="layui-input-inline">
              <input type="text" class="layui-input laydate-test" data-type="date" style="width: 240px"
                     lay-data="{range: true,type: 'datetime'}">
            </div>
          </div>
        </div>
      </div>
      <hr>
      <div>
        <div class="layui-btn-container" style="margin-left: 116px;">
          <button class="layui-btn" lay-even="renderLaydate10">多选(new)</span></button>
          <button class="layui-btn layui-btn-warm" lay-even="destroy10">laydate销毁(new)</button>
        </div>
        <div class="layui-form" style="margin-top: 10px;">
          <div class="layui-form-item">
            <div class="layui-block">
              <label class="layui-form-label">选择日期</label>
              <div class="layui-input-block">
                <textarea class="layui-textarea laydate-test-area" rows="5" readonly></textarea>
              </div>
            </div>
          </div>
          <div class="layui-form-item">
            <div class="layui-inline">
              <label class="layui-form-label">自动选中周（日-六）</label>
              <div class="layui-input-inline">
                <input type="text" class="layui-input" name="dateRange" style="width: 300px" lay-data="{autoWeek: true}"
                       placeholder="时间范围">
              </div>
            </div>
          </div>
          <div class="layui-form-item">
            <div class="layui-inline">
              <label class="layui-form-label">分裂时间范围</label>
              <div class="layui-input-inline">
                <input type="text" class="layui-input" name="myDateRange" style="width: 300px" placeholder="时间范围">
              </div>
            </div>
          </div>
          <div class="layui-form-item">
            <div class="layui-inline">
              <label class="layui-form-label">分裂时间范围</label>
              <div class="layui-input-inline">
                <input type="text" class="layui-input" name="myDateRange"
                       lay-data="{range: true, type: 'month', value: ''}" style="width: 300px" placeholder="时间范围">
              </div>
            </div>
          </div>
          <div class="layui-form-item">
            <div class="layui-inline">
              <label class="layui-form-label">分裂时间范围</label>
              <div class="layui-input-inline">
                <input type="text" class="layui-input" name="myDateRange"
                       lay-data="{range: true, type: 'time', value: ''}" value=" - 18:00:00" style="width: 300px"
                       placeholder="时间范围">
              </div>
            </div>
          </div>
        </div>
      </div>
      <hr>
      <div>
        <div class="layui-btn-container" style="margin-left: 116px;">
          <button class="layui-btn layui-btn-warm" lay-even="renderLaydate01">默认的range效果</button>
          <button class="layui-btn layui-btn-warm" lay-even="renderLaydate02">分裂式range</button>
        </div>
        <div class="layui-form" style="margin-top: 10px;">
          <div class="layui-form-item">
            <div class="layui-inline">
              <label class="layui-form-label">原始时间范围</label>
              <div class="layui-input-inline">
                <input type="text" class="layui-input" name="dateRange" style="width: 300px" placeholder="时间范围">
              </div>
            </div>
          </div>
          <div class="layui-form-item">
            <div class="layui-inline">
              <label class="layui-form-label">自动选中周（日-六）</label>
              <div class="layui-input-inline">
                <input type="text" class="layui-input" name="dateRange" style="width: 300px" lay-data="{autoWeek: true}"
                       placeholder="时间范围">
              </div>
            </div>
          </div>
          <div class="layui-form-item">
            <div class="layui-inline">
              <label class="layui-form-label">分裂时间范围</label>
              <div class="layui-input-inline">
                <input type="text" class="layui-input" name="myDateRange" style="width: 300px" placeholder="时间范围">
              </div>
            </div>
          </div>
          <div class="layui-form-item">
            <div class="layui-inline">
              <label class="layui-form-label">分裂时间范围</label>
              <div class="layui-input-inline">
                <input type="text" class="layui-input" name="myDateRange"
                       lay-data="{range: true, type: 'month', value: ''}" style="width: 300px" placeholder="时间范围">
              </div>
            </div>
          </div>
          <div class="layui-form-item">
            <div class="layui-inline">
              <label class="layui-form-label">分裂时间范围</label>
              <div class="layui-input-inline">
                <input type="text" class="layui-input" name="myDateRange"
                       lay-data="{range: true, type: 'time', value: ''}" value=" - 18:00:00" style="width: 300px"
                       placeholder="时间范围">
              </div>
            </div>
          </div>
        </div>
      </div>
      <hr>
      <div>
        <div class="layui-btn-container" style="margin-left: 116px;">
          <button class="layui-btn layui-btn-warm" lay-even="renderLaydate6">日期范围快速选择</button>
        </div>
        <div class="layui-form" style="margin-top: 10px;">
          <div class="layui-form-item">
            <div class="layui-inline">
              <label class="layui-form-label">日期范围</label>
              <div class="layui-input-inline">
                <input type="text" class="layui-input" name="dateRange2" style="width: 300px" placeholder="日期范围">
              </div>
            </div>
          </div>
        </div>
      </div>
      <hr>
      <div>
        <div class="layui-btn-container" style="margin-left: 116px;">
          <button class="layui-btn layui-btn-warm" lay-even="renderLaydateHao">若你安好的测试</button>
        </div>
        <div class="layui-form" style="margin-top: 10px;">
          <div class="layui-form-item">
            <label class="layui-form-label">请选择</label>
            <div class="layui-inline">
              <div class="layui-input-inline">
                <select lay-filter="renderLaydateHao">
                  <option value=""></option>
                  <option value="day">天对比</option>
                  <option value="week">周对比</option>
                  <option value="month">月对比</option>
                  <option value="year">年对比</option>
                </select>
              </div>
              <div class="layui-input-inline">
                <input type="text" class="layui-input timeFrame" id="startT">
              </div>
              <div class="layui-form-mid">-</div>
              <div class="layui-input-inline">
                <input type="text" class="layui-input timeFrame" id="endT">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="layui-col-xs5" style="height: 100%">
      <pre class="layui-code" id="test_code_view" lay-skin="notepad" lay-title="按钮触发的事件"></pre>
    </div>
  </div>
</div>

<script src="jquery/jquery.min.js" charset="utf-8"></script>
<script src="release/laydate/laydate.js" charset="utf-8"></script>
<script src="release/laydatePro/laydatePro.min.js" charset="utf-8"></script>
<script>
  $(function () {
    var active = {
      resetValue: function () {
        $('[data-type="date"]').val('');
      },
      renderLaydate1: function () {
        laydate.render({
          elem: '.laydate-test'
        });
      },
      renderLaydate2: function () {
        laydate.render({
          elem: '.laydate-test',
          type: 'month'
        });
      },
      renderLaydate3: function () {
        $('.laydate-test').attr('lay-data', null);
        laydate.render({
          elem: '.laydate-test',
          type: 'time',
          quickSelect: ['00:00:00', '00:30:00', '01:30:00', '02:00:00', '02:30:00', '03:30:00', '23:30:00'],
          done: function (value, date) {
            console.log(value);
          }
        });
      },
      renderLaydate4: function () {
        // $('.laydate-test').attr('lay-data', null);
        laydate.render({
          elem: '.laydate-test',
          type: 'month',
          quickConfirm: true
        });
      },
      renderLaydate5: function () {
        laydate.render({
          elem: '.laydate-test',
          type: 'time',
          simpleModel: true,
          format: 'mm分ss秒'
          // format:'HH时mm分'
          // format:'H时'
        });
      },
      renderLaydate6: function () {
        var now = new Date();
        $('.laydate-test').attr('lay-data', null);
        laydate.render({
          elem: '[name="dateRange2"]',
          type: 'datetime', // 新增两个类型的支持 range的时候的date和datetime
          range: '~',
          quickConfirm: true, // 是否选择之后快速确定
          quickSelect: [
            'today',  // 这个是个内部的支持的，可以简化设置
            'lastDays-7', // 过去7天
            'lastDays-30', // 过去30天
            'yesterday', // 昨天
            'lastMonth', // 上个月
            'thisMonth', // 这个月
            {
              title: '昨、今、明', value: function () {
                var date1 = new Date();
                var date2 = new Date();
                date1.setDate(date1.getDate() - 1);
                date2.setDate(date2.getDate() + 1);
                return [date1, date2];
              }()
            } // value是一个区间的范围
          ],
          done: function (value, date) {
            console.log(value);
          }
        });
      },
      renderLaydate7: function () {
        // 季度
        laydate.render({
          elem: '.laydate-test',
          type: 'quarter',
          value: '',
          // type: 'month',
          // subType: 'quarter'
        });
      },
      renderLaydate8: function () {
        // 周一作为每周的第一天
        laydate.render({
          elem: '.laydate-test',
          value: '',
          circleMark: true,
          theme: '#ff00ff',
          // theme: 'grid',
          weekStart: 1
          // weekStart 的可选配置的值，设置成其他的都会强制转化成默认周日开始
          // weekStart: [0-6]
          // weekStart: ['日', '一', '二', '三', '四', '五', '六']
          // weekStart: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
        });
      },
      renderLaydate9: function () {
        // 以今天的星期作为一周的第一天
        laydate.render({
          elem: '.laydate-test',
          value: '',
          circleMark: true,
          theme: '#ff00ff',
          weekStart: new Date().getDay()
        });
      },
      renderLaydate10: function () {
        // 多选
        laydate.render({
          elem: '.laydate-test-area',
          // 测试的value故意弄了一些错误的格式的，插件会将他们消除，只保留符合格式的，实际使用见谅注意不要胡来
          value: '2019-11-11, 2019-11-08,2019-11-22,   ,2019-02-01,2019-02-02,2019-02-08, 2019/12/12,',
          multiple: ',',
          circleMark: true
        });
      },
      destroy10: function () {
        // 销毁一个laydate
        laydatePro.destroy('.laydate-test-area');
      },
      renderLaydateHao: function () {
        form.on('select(renderLaydateHao)', function (obj) {
          $(".timeFrame").attr("lay-data", "{}");
          switch (obj.value) {
            case 'day':
              $('#startT').val("2018-12-16");
              $('#endT').val("2018-12-22");
              laydate.render({
                elem: '.timeFrame'
                // range: '~',
              });
              break;
            case 'week':
              $(".timeFrame").attr("lay-data", "{autoWeek: true}");
              $('#startT').val("2018-12-16 ~ 2018-12-22");
              $('#endT').val("2018-11-04 ~ 2018-11-10");
              laydate.render({
                elem: '.timeFrame',
                range: '~',
                ready: function () {
                  var key = $(this.elem[0]).attr('lay-key');
                  var insTemp = laydatePro.getInstance(key);
                  if (insTemp.config.autoWeek) {
                    $('#layui-laydate' + key).on('click', '.layui-laydate-content td:not(.laydate-disabled)', function () {
                      var tds = $(this).parent().find('td:not(.laydate-disabled)');
                      insTemp.choose($(this));
                      insTemp.choose(tds.first());
                      insTemp.choose(tds.last());
                    });
                  }
                }
              });
              break;
            case 'month':
              layer.msg('todo');
              break;
            case 'year':
              layer.msg('todo');
              break;
          }
        });

      },
      renderLaydate01: function () {
        laydate.render({
          elem: '[name="dateRange"]',
          // type: 'datetime',
          range: '~',
          // range: '到',
          // value: '2018-11-05 到 2018-11-28',
          // min: 0,
          ready: function () {
            var key = $(this.elem[0]).attr('lay-key');
            var insTemp = laydatePro.getInstance(key);
            if (insTemp.config.autoWeek) {
              $('#layui-laydate' + key).on('click', '.layui-laydate-content td:not(.laydate-disabled)', function () {
                var tds = $(this).parent().find('td:not(.laydate-disabled)');
                insTemp.choose($(this));
                insTemp.choose(tds.first());
                insTemp.choose(tds.last());
              });
            }
          }
        });
      },
      renderLaydate02: function () {
        laydate.render({
          elem: '[name="myDateRange"]',
          // type: 'month',
          type: 'datetime',
          range: '~',
          quickConfirm: true,
          // max: 20, // 最大限制在未来20天内
          value: '2018-09-01 00:00:00 ~ 2018-10-10 12:30:00',
          rangeType: 'divide' // 分裂式的时间范围选择
        });
      }
    };

    $('#tools .layui-btn').click(function () {
      var btnElem = $(this),
        even = btnElem.attr('lay-even');
      even !== 'resetValue' && btnElem.addClass('layui-btn-danger').siblings('.layui-btn').removeClass('layui-btn-danger');
      if (even && typeof active[even] === 'function') {
        active[even].call(this);
      }
    });
  });
</script>
</body>
</html>