| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122 |
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>Demo</title>
- <!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
- <link href="//unpkg.com/layui@2.8.11/dist/css/layui.css" rel="stylesheet">
- </head>
- <body>
- <div class="layui-form">
- <h5 style="margin-bottom: 16px;">
- 左右面板<strong class="layui-font-red">独立</strong>选择模式(默认) :
- </h5>
- <div class="layui-form-item">
- <div class="layui-inline">
- <label class="layui-form-label">日期范围</label>
- <div class="layui-inline" id="ID-laydate-range">
- <div class="layui-input-inline">
- <input type="text" autocomplete="off" id="ID-laydate-start-date" class="layui-input" placeholder="开始日期">
- </div>
- <div class="layui-form-mid">-</div>
- <div class="layui-input-inline">
- <input type="text" autocomplete="off" id="ID-laydate-end-date" class="layui-input" placeholder="结束日期">
- </div>
- </div>
- </div>
- </div>
- <h5 style="margin-bottom: 16px;">
- 左右面板<strong class="layui-font-red">联动</strong>选择模式 <sup>2.8+</sup> :
- </h5>
- <div class="layui-form-item">
- <div class="layui-inline">
- <label class="layui-form-label">日期范围</label>
- <div class="layui-inline" id="ID-laydate-rangeLinked">
- <div class="layui-input-inline">
- <input type="text" autocomplete="off" id="ID-laydate-start-date-1" class="layui-input" placeholder="开始日期">
- </div>
- <div class="layui-form-mid">-</div>
- <div class="layui-input-inline">
- <input type="text" autocomplete="off" id="ID-laydate-end-date-1" class="layui-input" placeholder="结束日期">
- </div>
- </div>
- </div>
- </div>
- <h5 style="margin-bottom: 16px;">其他类型的范围选择 :</h5>
- <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="ID-laydate-range-year" placeholder=" - ">
- </div>
- </div>
- <div class="layui-inline">
- <label class="layui-form-label">年月范围</label>
- <div class="layui-input-inline">
- <input type="text" class="layui-input" id="ID-laydate-range-month" placeholder=" - ">
- </div>
- </div>
- <div class="layui-inline">
- <label class="layui-form-label">时间范围</label>
- <div class="layui-input-inline">
- <input type="text" class="layui-input" id="ID-laydate-range-time" placeholder=" - ">
- </div>
- </div>
- <div class="layui-inline">
- <label class="layui-form-label">日期时间范围</label>
- <div class="layui-input-inline">
- <input type="text" class="layui-input" id="ID-laydate-range-datetime" placeholder=" - ">
- </div>
- </div>
- </div>
- </div>
-
- <!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
- <script src="//unpkg.com/layui@2.8.11/dist/layui.js"></script>
- <script>
- layui.use(function(){
- var laydate = layui.laydate;
- // 日期范围 - 左右面板独立选择模式
- laydate.render({
- elem: '#ID-laydate-range',
- range: ['#ID-laydate-start-date', '#ID-laydate-end-date']
- });
- // 日期范围 - 左右面板联动选择模式
- laydate.render({
- elem: '#ID-laydate-rangeLinked',
- range: ['#ID-laydate-start-date-1', '#ID-laydate-end-date-1'],
- rangeLinked: true // 开启日期范围选择时的区间联动标注模式 --- 2.8+ 新增
- });
-
- // 年范围
- laydate.render({
- elem: '#ID-laydate-range-year',
- type: 'year',
- range: true
- });
-
- // 年月范围
- laydate.render({
- elem: '#ID-laydate-range-month',
- type: 'month',
- range: true
- });
-
- // 时间范围
- laydate.render({
- elem: '#ID-laydate-range-time',
- type: 'time',
- range: true
- });
-
- // 日期时间范围
- laydate.render({
- elem: '#ID-laydate-range-datetime',
- type: 'datetime',
- range: true
- });
- });
- </script>
- </body>
- </html>
|