baoying/www/static/layuiAdmin/dist/views/component/laydate/special-demo.html

<title>layDate 日期组件功能演示</title>

  <div class="layui-card layadmin-header">
    <div class="layui-breadcrumb" lay-filter="breadcrumb">
      <a lay-href="">主页</a>
      <a><cite>组件</cite></a>
      <a><cite>日期时间</cite></a>
    </div>
  </div>
  
  <div class="layui-fluid">
    <div class="layui-row layui-col-space15">
      <div class="layui-col-md12">
        <div class="layui-card">
          <div class="layui-card-header">联动范围选择</div>
          <div class="layui-card-body" pad15>
            <div class="layui-form" wid100>
              <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" id="test-laydate-start" placeholder="开始日期">
                  </div>
                  <div class="layui-form-mid">
                    -
                  </div>
                  <div class="layui-input-inline">
                    <input type="text" class="layui-input" id="test-laydate-end" placeholder="结束日期">
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <script>
  layui.use(['admin', 'laydate'], function(){
    var laydate = layui.laydate;
    
    //示例代码
    
    //开始日期
    var insStart = laydate.render({
      elem: '#test-laydate-start'
      ,min: 0
      ,done: function(value, date){
        //更新结束日期的最小日期
        insEnd.config.min = lay.extend({}, date, {
          month: date.month - 1
        });
        
        //自动弹出结束日期的选择器
       insEnd.config.elem[0].focus();
      }
    });
    
    //结束日期
    var insEnd = laydate.render({
      elem: '#test-laydate-end'
      ,min: 0
      ,done: function(value, date){
        //更新开始日期的最大日期
        insStart.config.max = lay.extend({}, date, {
          month: date.month - 1
        });
      }
    });
  });
  </script>