191 lines
7.4 KiB
HTML
Executable File
191 lines
7.4 KiB
HTML
Executable File
|
||
|
||
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>layDate 日期组件功能演示</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.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
|
||
<link rel="stylesheet" href="../../../layuiadmin/layui/css/layui.css" media="all">
|
||
<link rel="stylesheet" href="../../../layuiadmin/style/admin.css" media="all">
|
||
</head>
|
||
<body>
|
||
|
||
<style>
|
||
.test-laydate-theme-box .layui-inline{margin: 0 20px 20px 0;}
|
||
|
||
/* 定制 laydate 皮肤：gbw（由社区提供） */
|
||
.layui-laydate-hint.laydate-theme-gbw,.layui-laydate.laydate-theme-gbw{border:1px solid #FFF;-webkit-box-shadow:0 2px 8px rgba(0,0,0,.15);-moz-box-shadow:0 2px 8px rgba(0,0,0,.15);box-shadow:0 2px 8px rgba(0,0,0,.15)}
|
||
.layui-laydate.laydate-theme-gbw{border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;font-family:"Helvetica Neue For Number",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;line-height:1.5;color:rgba(0,0,0,.65);-webkit-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;list-style:none;position:absolute;z-index:19850126}
|
||
.laydate-theme-gbw .layui-laydate-header{border-bottom:1px solid #e8e8e8;padding-top:5px}
|
||
.laydate-theme-gbw .layui-laydate-header i{font-size:12px;color:rgba(0,0,0,.45)}
|
||
.laydate-theme-gbw .layui-laydate-header span{color:rgba(0,0,0,.85);font-weight:500}
|
||
.laydate-theme-gbw .layui-laydate-header i:hover,.laydate-theme-gbw .layui-laydate-header span:hover{color:#40a9ff}
|
||
.laydate-theme-gbw .layui-laydate-footer{border-top:0;padding-top:0;height:36px}
|
||
.laydate-theme-gbw .layui-laydate-footer span:hover{color:#40a9ff}
|
||
.laydate-theme-gbw .laydate-footer-btns{top:0}
|
||
.laydate-theme-gbw .layui-laydate-content th{color:rgba(0,0,0,.65)}
|
||
.laydate-theme-gbw .layui-laydate-content td{color:rgba(0,0,0,.65);border-radius:2px;-webkit-transition:background .3s ease;-o-transition:background .3s ease;transition:background .3s ease}
|
||
.laydate-theme-gbw .layui-laydate-content .laydate-day-next,.laydate-theme-gbw .layui-laydate-content .laydate-day-prev{color:rgba(0,0,0,.25)}
|
||
.layui-laydate.laydate-theme-gbw td.layui-this{background-color:transparent!important;border:1px solid #1890ff;border-radius:3px;font-weight:700;color:#1890ff!important}
|
||
.layui-laydate.laydate-theme-gbw li.layui-this{background-color:#1890ff!important;color:#fff!important;border-radius:0;border:0}
|
||
</style>
|
||
|
||
<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-theme-molv" placeholder="yyyy-MM-dd">
|
||
</div>
|
||
</div>
|
||
<div class="layui-inline">
|
||
<label class="layui-form-label">格子主题</label>
|
||
<div class="layui-input-inline">
|
||
<input type="text" class="layui-input" id="test-laydate-theme-grid" placeholder="yyyy-MM-dd">
|
||
</div>
|
||
</div>
|
||
<div class="layui-inline">
|
||
<label class="layui-form-label">蓝色主题</label>
|
||
<div class="layui-input-inline">
|
||
<input type="text" class="layui-input" id="test-laydate-theme-blue" placeholder="yyyy-MM-dd">
|
||
</div>
|
||
</div>
|
||
<div class="layui-inline">
|
||
<label class="layui-form-label">大红主题</label>
|
||
<div class="layui-input-inline">
|
||
<input type="text" class="layui-input" id="test-laydate-theme-red" placeholder="yyyy-MM-dd">
|
||
</div>
|
||
</div>
|
||
<div class="layui-inline">
|
||
<label class="layui-form-label">自定义其它颜色</label>
|
||
<div class="layui-input-inline">
|
||
<input type="text" class="layui-input" id="test-laydate-theme-other" placeholder="yyyy-MM-dd">
|
||
</div>
|
||
</div>
|
||
<div class="layui-inline">
|
||
<label class="layui-form-label">定制主题</label>
|
||
<div class="layui-input-inline">
|
||
<input type="text" class="layui-input" id="test-laydate-theme-custom" placeholder="yyyy-MM-dd">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layui-col-md12">
|
||
<div class="layui-card">
|
||
<div class="layui-card-header">直接嵌套显示</div>
|
||
<div class="layui-card-body" pad15>
|
||
<div class="test-laydate-theme-box">
|
||
<div class="layui-inline" id="test-laydate-static-n1"></div>
|
||
<div class="layui-inline" id="test-laydate-static-n2"></div>
|
||
<div class="layui-inline" id="test-laydate-static-n3"></div>
|
||
<div class="layui-inline" id="test-laydate-static-n4"></div>
|
||
<div class="layui-inline" id="test-laydate-static-n5"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<script src="../../../layuiadmin/layui/layui.js"></script>
|
||
<script>
|
||
layui.config({
|
||
base: '../../../layuiadmin/' //静态资源所在路径
|
||
}).extend({
|
||
index: 'lib/index' //主入口模块
|
||
}).use(['index', 'laydate'], function(){
|
||
var laydate = layui.laydate;
|
||
|
||
//示例代码
|
||
|
||
//墨绿主题
|
||
laydate.render({
|
||
elem: '#test-laydate-theme-molv'
|
||
,theme: 'molv'
|
||
});
|
||
|
||
//格子主题
|
||
laydate.render({
|
||
elem: '#test-laydate-theme-grid'
|
||
,theme: 'grid'
|
||
});
|
||
|
||
//蓝色主题
|
||
laydate.render({
|
||
elem: '#test-laydate-theme-blue'
|
||
,theme: '#1E9FFF'
|
||
});
|
||
|
||
//大红主题
|
||
laydate.render({
|
||
elem: '#test-laydate-theme-red'
|
||
,theme: '#c00'
|
||
});
|
||
|
||
//自定义其它颜色
|
||
laydate.render({
|
||
elem: '#test-laydate-theme-other'
|
||
,theme: '#393D49'
|
||
});
|
||
|
||
//定制主题
|
||
laydate.render({
|
||
elem: '#test-laydate-theme-custom'
|
||
,theme: 'gbw'
|
||
});
|
||
|
||
//直接嵌套显示
|
||
laydate.render({
|
||
elem: '#test-laydate-static-n1'
|
||
,position: 'static'
|
||
});
|
||
laydate.render({
|
||
elem: '#test-laydate-static-n2'
|
||
,position: 'static'
|
||
,lang: 'en'
|
||
});
|
||
laydate.render({
|
||
elem: '#test-laydate-static-n3'
|
||
,type: 'year'
|
||
,position: 'static'
|
||
});
|
||
laydate.render({
|
||
elem: '#test-laydate-static-n4'
|
||
,type: 'month'
|
||
,position: 'static'
|
||
});
|
||
laydate.render({
|
||
elem: '#test-laydate-static-n4'
|
||
,type: 'time'
|
||
,position: 'static'
|
||
});
|
||
|
||
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |