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.
104 lines
4.1 KiB
104 lines
4.1 KiB
<!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="../layui/css/layui.css" rel="stylesheet">
|
|
<link href="./style.css" rel="stylesheet">
|
|
</head>
|
|
|
|
<body>
|
|
<!--
|
|
以下示例仅用于演示 lay-skin="none" 用法，仅支持 webkit 系浏览器，任何样式或兼容性问题请自行解决
|
|
-->
|
|
<div class="layui-form" lay-filter="form-demo-skin">
|
|
<div style="display: flex;align-items:center">
|
|
<div class="radio-item">
|
|
<input type="radio" name="radio1" value="m15" lay-skin="none">
|
|
<div lay-radio class="lay-skin-checkcard lay-check-dot-2" style="height: 38px">
|
|
<div class="lay-skin-checkcard-avatar">
|
|
近15分钟
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="radio-item">
|
|
<input type="radio" name="radio1" value="h1" lay-skin="none" checked>
|
|
<div lay-radio class="lay-skin-checkcard lay-check-dot-2" style="height: 38px">
|
|
<div class="lay-skin-checkcard-avatar">
|
|
近1小时
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="radio-item">
|
|
<input type="radio" name="radio1" value="h12" lay-skin="none">
|
|
<div lay-radio class="lay-skin-checkcard lay-check-dot-2" style="height: 38px">
|
|
<div class="lay-skin-checkcard-avatar">
|
|
近12小时
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="radio-item">
|
|
<input type="radio" name="radio1" value="d1" lay-skin="none">
|
|
<div lay-radio class="lay-skin-checkcard lay-check-dot-2" style="height: 38px">
|
|
<div class="lay-skin-checkcard-avatar">
|
|
近1天
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="radio-item">
|
|
<input type="radio" name="radio1" value="d2" lay-skin="none">
|
|
<div lay-radio class="lay-skin-checkcard lay-check-dot-2" style="height: 38px">
|
|
<div class="lay-skin-checkcard-avatar">
|
|
近2天
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="radio-item">
|
|
<input type="radio" name="radio1" value="d7" lay-skin="none">
|
|
<div lay-radio class="lay-skin-checkcard lay-check-dot-2" style="height: 38px">
|
|
<div class="lay-skin-checkcard-avatar">
|
|
近7天
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div>
|
|
<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-inline">-</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>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<script src="../layui/layui.js"></script>
|
|
<script>
|
|
layui.use(function () {
|
|
var laydate = layui.laydate;
|
|
// 日期范围 - 左右面板联动选择模式
|
|
laydate.render({
|
|
elem: '#ID-laydate-rangeLinked',
|
|
type: 'datetime',
|
|
range: ['#ID-laydate-start-date-1', '#ID-laydate-end-date-1'],
|
|
rangeLinked: true // 开启日期范围选择时的区间联动标注模式 --- 2.8+ 新增
|
|
});
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html> |