mirror of https://github.com/layui/layui
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
110 lines
3.6 KiB
110 lines
3.6 KiB
2 years ago
|
<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>
|
||
|
|
|
||
|
|
<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>
|