master

分支 (1)

标签 (1)

管理

管理

master

v1.0.0

laydatePro
/
testLaydate.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">
  <link rel="stylesheet" href="layui-master/src/css/layui.css" media="all">
  <!--  <link rel="stylesheet" href="laydatePro.css" media="all">-->
  <style>
    body {
      background-color: #f8f8f8;
    }

    .layui-form-label {
      width: 86px;
    }

    .layui-input-block {
      margin-left: 116px;
    }

    .laydate-theme-calendar .layui-laydate-main {
      width: 472px;
    }

    .laydate-theme-calendar .layui-laydate-content th,
    .laydate-theme-calendar .layui-laydate-content td {
      width: 65px;
      height: 38px;
    }

    .laydate-theme-calendar .layui-laydate-content td:hover {
      /*border: 1px solid #ffb27a;*/
    }

    .laydate-theme-calendar .laydate-day-mark::after {
      display: none;
    }

    .laydate-theme-calendar .laydate-day-mark {
      line-height: 38px;
    }

    .laydate-theme-calendar .laydate-day-mark .layui-icon {
      position: absolute;
      top: 8px;
      right: 3px;
      line-height: 0;
      font-size: 12px;
      color: #FFB800;
      /*left: auto;*/
    }

    .layui-laydate-footer span[laydate-calendar-time] {
      font-size: 14px;
    }

    .laydate-theme-range_single.layui-laydate-range {
      width: 274px
    }

    .laydate-theme-range_single.layui-laydate-range .layui-laydate-main.laydate-main-list-1 {
      display: none;
    }

    .laydate-theme-range_single.layui-laydate-range .layui-laydate-main.laydate-main-list-0 .layui-laydate-header i {
      display: inline-block;
    }
  </style>
</head>
<body>
<div class="layui-container">
  <div class="layui-row layui-col-space10">
    <div class="layui-col-lg7 layui-col-md12" id="tools">
      <div>
        <button class="layui-btn layui-btn-primary" lay-even="resetValue"
                style="margin-left: 116px;margin-bottom: 20px;">清空时间
        </button>
        <a href="testLaydateSingle.html" style="margin-left: 60px;color: deeppink;">跳转到独立laydate测试页面</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>
          <br>
          <button class="layui-btn layui-btn-primary" lay-even="renderLaydate11">全面版的日期(new)</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" autocomplete="off" 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" autocomplete="off"
                     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" autocomplete="off" 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-block">
              <label class="layui-form-label">日历(todo)</label>
              <div class="layui-input-block">
                <div id="calendar_laydate" lay-data="{value: ''}"></div>
              </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-lg5 layui-col-md12 layui-hide-xs" style="height: 100%">
      <pre class="layui-code" id="test_code_view" lay-skin="notepad" lay-title="按钮触发的事件"></pre>
    </div>
  </div>
  <table id="table1"></table>
</div>
<script src="layui-master/src/layui.js" charset="utf-8"></script>
<script>
  // layui.config({base: 'release/laydatePro/', cache: true})
  layui.config({base: 'layui-master/src/lay/plug/', cache: true})
    .use(['laydatePro', 'code', 'util', 'form', 'table'], function () {
      var $ = layui.$,
        laydate = layui.laydate,
        util = layui.util,
        form = layui.form,
        table = layui.table,
        laydatePro = layui.laydatePro,
        active = {
          resetValue: function () {
            $('[data-type="date"]').val('');
          },
          renderLaydate1: function () {
            laydate.render({
              elem: '.laydate-test',
              // ready: function (date) {
              //   // debugger;
              //   var key = this.elem.attr('lay-key');
              //   var elem = $('#layui-laydate' + key);
              //   var dateFirstThisMonth = new Date(date.year, date.month - 1, 1, 0, 0, 0, 0);
              //   var dateFirstNextMonth = new Date(date.year, date.month, 1, 0, 0, 0, 0);
              //   elem.find('.layui-laydate-content table td[lay-ymd="'+date.year+'-'+(date.month-1)+'-'+new Date(dateFirstThisMonth.getTime()-1).getDate()+'"]' +
              //     ', .layui-laydate-content table td[lay-ymd="'+date.year+'-'+(date.month)+'-'+new Date(dateFirstNextMonth.getTime()-1).getDate()+'"]').addClass('laydate-disabled');
              // },
              // change: function (value, date) {
              //   // debugger;
              //   var key = this.elem.attr('lay-key');
              //   var elem = $('#layui-laydate' + key);
              //   var dateFirstThisMonth = new Date(date.year, date.month - 1, 1, 0, 0, 0, 0);
              //   var dateFirstNextMonth = new Date(date.year, date.month, 1, 0, 0, 0, 0);
              //   elem.find('.layui-laydate-content table td[lay-ymd="'+date.year+'-'+(date.month-1)+'-'+new Date(dateFirstThisMonth.getTime()-1).getDate()+'"]' +
              //     ', .layui-laydate-content table td[lay-ymd="'+date.year+'-'+(date.month)+'-'+new Date(dateFirstNextMonth.getTime()-1).getDate()+'"]').addClass('laydate-disabled');
              // }
            });
          },
          renderLaydate2: function () {
            laydate.render({
              elem: '.laydate-test',
              type: 'month',
              isInitValue: false,
              value: '2016-03'
            });
          },
          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',
              max: 0,
              quickConfirm: true
            });
          },
          renderLaydate5: function () {
            laydate.render({
              elem: '.laydate-test',
              // type: 'datetime',
              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];
                  }()
                }, {
                  title: '当班',
                  value: function () {
                    var date1 = new Date();
                    var date2 = new Date();
                    date1.setDate(date1.getDate() - 1);
                    date1.setHours(12, 30, 0, 0);
                    // date2.setDate(date2.getDate() + 1);
                    date2.setHours(12, 30, 0, 0);
                    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,
              // trigger: 'click',
              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',
              // trigger: 'dblclick',
              trigger: 'click',
              // 测试的value故意弄了一些错误的格式的，插件会将他们消除，只保留符合格式的，实际使用见谅注意不要胡来
              value: '2019-11-11, 2019-11-08,2019-11-22,   ,2019-02-01,2019-02-02,2019-02-08, 2019/12/12,',
              multiple: ',',
              min: 1,
              circleMark: true
            });
          },
          renderLaydate11: function() {
            laydate.render({
              elem: '.laydate-test',
              type: 'datetime',
              fullPanel: true,
              value: '2019-08-23 12:08:59',
              max: new Date().getTime()
            });
          },
          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());
                  });
                }
              }
            });
          },
          // renderLaydate01: function () {
          //   laydate.render({
          //     elem: '[name="dateRange"]',
          //     range: '~',
          //     change: function (value, date, endDate) {
          //       var key = this.elem.attr('lay-key');
          //       var confirmBtn = $('#layui-laydate' + key).find('.laydate-btns-confirm');
          //       setTimeout(function () {
          //         confirmBtn[(date.year === endDate.year && date.month === endDate.month)?'removeClass':'addClass']('laydate-disabled');
          //
          //         if (confirmBtn.hasClass('laydate-disabled')) {
          //           // layer.tips('', confirmBtn.get(0), {offset: 'r'});
          //           confirmBtn.off('mousedown').on('mousedown', function () {
          //             alert('只能选择同一个月份的范围');
          //             // 用layer弹出的话有可能会被laydate盖住，解决这个问题的话就可以用layer去弹出
          //             // layer.msg('只能选择同一个月份的范围', {anim: 6});
          //           })
          //         }
          //       }, 0)
          //     }
          //   });
          // },
          renderLaydate02: function () {
            debugger;
            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' // 分裂式的时间范围选择
            });
          }
        };
      layui.code();

      $('#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);
          if (even !== 'resetValue') {
            $('#test_code_view').html(active[even].toString().replace(/          /g, ''));
            layui.code();
          }
        }
      });

      laydate.set({
        trigger: 'click'
      });

      // 日历
      laydate.calendar = function (options) {
        var ready = options.ready;
        delete options.ready;
        laydate.render($.extend(true, {
          mark: function () {
            var mark = {};
            mark[util.toDateString(null, 'yyyy-MM-dd')] = '今天<i class="layui-icon layui-icon-star-fill" title="你好！"></i>';
            return mark;
          }()
        }, options, {
          position: 'static',
          calendar: true,
          weekStart: 1,
          // theme: 'calendar',
          // showBottom : false,
          btns: [],
          ready: function (date) {
            var that = this;
            var index = $(this.elem[0]).attr('lay-key');
            var elem = $('#layui-laydate' + index);
            elem.addClass('laydate-theme-calendar');
            var dateNow = new Date();
            var dateToday = [dateNow.getFullYear(), dateNow.getMonth() + 1, dateNow.getDate()].join('-');
            var tdElem = elem.find('td[lay-ymd="' + dateToday + '"]');
            if (tdElem.length && !tdElem.hasClass('.layui-this')) {
              tdElem.get(0).click();
            }
            var footerElem = elem.find('.layui-laydate-footer');
            footerElem.append('<span laydate-calendar-time></span>');
            elem.find('[laydate-calendar-time]').html(util.toDateString(null, 'HH : mm : ss'));
            var time = setInterval(function () {
              if (!$(document).find(elem).length) {
                clearInterval(time);
              } else {
                elem.find('[laydate-calendar-time]').html(util.toDateString(null, 'HH : mm : ss'));
              }
            }, 1000);

            typeof ready === 'function' && ready.call(that, date);
          }
        }));
      };

      // 渲染一个日历
      laydate.calendar({
        elem: '#calendar_laydate',
        // multiple: true,
        ready: function (date) {
          // alert(JSON.stringify(date));
        },
        change: function (value, date, endDate) {
        }
      });

      $(document).on('click', 'form', function (event) {
        console.log('click!!');
        layui.stope(event);
      });

      /*table.render({
        elem: '#table1',
        data: [{name: 'sun', endTime: '2019-08-11'}, {name: 'li'}],
        cols: [
          [
            {field: 'name'},
            {field: 'startTime', title: '开始时间'},
            {field: 'endTime', title: '结束时间'}
          ]
        ],
        done: function () {
          var tableView = this.elem.next();
          var tableData = table.cache.table1;
          // 渲染开始时间
          layui.each(tableView.find('td[data-field="startTime"]>div'), function (index, item) {
            var $item = $(item);
            var trElem = $item.closest('tr');
            var dataTemp = tableData[trElem.data('index')];
            laydate.render({
              elem: item,
              min: '2019-07-26',
              max: dataTemp.endTime || '2019-08-25', // || 后面可以设置一个最大的范围，如果当前数据已经有结束时间了，必须在结束时间以内
              done: function (value, date, endTime) {
                var targetElem = $(this.elem[0]).closest('tr').find('td[data-field="endTime"]>div');
                var dateIns = laydatePro.getInstance(targetElem.attr('lay-key'));
                if (dateIns && dateIns.config) {
                  dateIns.config.min = $.extend(true, {}, date, {month: date.month - 1});
                }
              }
            });
          });

          // 渲染结束时间
          layui.each(tableView.find('td[data-field="endTime"]>div'), function (index, item) {
            var $item = $(item);
            var trElem = $item.closest('tr');
            var dataTemp = tableData[trElem.data('index')];
            laydate.render({
              elem: item,
              min: dataTemp.startTime || '2019-07-26', // || 后面可以设置一个最大的范围，如果当前数据已经有结束时间了，必须在结束时间以内
              max: '2019-08-25',
              done: function (value, date, endTime) {
                var targetElem = $(this.elem[0]).closest('tr').find('td[data-field="startTime"]>div');
                var dateIns = laydatePro.getInstance(targetElem.attr('lay-key'));
                if (dateIns && dateIns.config) {
                  dateIns.config.max = $.extend(true, {}, date, {month: date.month - 1});
                }
              }
            });
          });

        }
      })*/

    });
</script>
</body>
</html>