这是一个关于自定义时间范围选择插件的示例，包含HTML和CSS代码，展示了如何创建一个易于使用的时间范围选择组件。插件提供多种预设选项（如今日、昨日、最近7日等），并支持自定义日期选择。点击自定义按钮后，会弹出自定义日期范围的输入框，用户可以选择起始和结束日期。选择完成后，插件将显示所选的日期范围。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>自定义时间范围选择插件</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
.drop-Wrap{
width: 230px;
height: 38px;
background: #FFFFFF;
border: 1px solid #CCD1DD;
font-size: 14px;
color: #252A37;
letter-spacing: 0.25px;
position: relative;
vertical-align: middle;
display: inline-block;
margin-right:36px;
float: left;
}
.selectConBox{
height: 38px;
line-height: 38px;
}
.newAddTit{
display: inline-block;
width: 192px;
height: 38px;
text-align: left;
text-indent: 12px;
}
.clickQue {
display: inline-block;
width: 38px;
height:38px;
line-height: 38px;
float: right;
text-align: center;
cursor: pointer;
}
.clickQue i {
width:14px;
height:9px;
background-image: url(../img/drop-arrow1.png);
margin-top:15px;
}
.selectConBox:hover i{
background-image: url(../img/drop-arrow2.png);
transform:rotate(180deg);
}
.select-box{
width:142px;
box-sizing: border-box;
border: 1px solid #E2DCDC;
border-top:none;
position: absolute;
left: -1px;
top:39px;
background: #FFFFFF;
z-index: 999;
display: none;
max-height:216px;
overflow-y: auto;
}
.select-box li {
height:38px;
box-sizing: border-box;
border-bottom: 1px solid #E2DCDC;
text-align: center;
line-height:38px;
color: #4A4A4A;
cursor: pointer;
}
.select-box li:hover{
background:#EDEDED;
}
.select-box li:last-child {
border: none;
}
.sureBtn em{
display: inline-block;
width: 220px;
height: 38px;
line-height: 38px;
background: #41B6EF;
border-radius: 2px;
}
.sureBtn em:hover{
background: #54C7FF;
}
.diff-selectBox{
width:232px;
box-sizing: border-box;
background: #FFFFFF;
border: 1px solid #E0E5F0;
box-shadow: 0 3px 6px 0 rgba(44,89,195,0.20);
position: absolute;
left: -1px;
top:43px;
z-index: 999;
padding: 12px;
display: none;
border-right: none;
}
.diff-selectBox li{
height: 32px;
line-height: 32px;
font-size: 14px;
color: #616C84;
box-sizing: border-box;
padding-left: 12px;
background: #F5F7FA;
margin-top: 6px;
cursor: pointer;
border-radius: 4px;
}
.diff-selectBox>div{
text-align: center;
margin-top: 12px;
}
.diff-selectBox em{
display: inline-block;
width: 60px;
height: 32px;
line-height: 32px;
text-align: center;
border-radius: 4px;
cursor: pointer;
}
.cancle-btn{
color:#2C59C3;
border: 1px solid #2C59C3;
background: #ffffff;
margin-right: 24px;
}
.confirm-btn{
color: #ffffff;
background: #2C59C3;
}
.diff-selectBox ul li:first-child{
margin-top: 0px;
}
.diff-selectBox .selected-liCss{
background: #2C59C3;
color: #ffffff;
}
.WdateDiv .WdateDiv2{
position: absolute;
right: -100px;
top: 0px;
}
.select-btn{
line-height: 40px;
}
.select-btn div{
display: inline-block;
margin-right: 10px;
}
.select-btn i{
width: 14px;
height: 14px;
background-image: url("../img/icon_weixuan.png");
vertical-align: middle;
margin-right: 1px;
}
.selected-iconCss{
background-image: url("../img/icon_xuanzhong.png") !important;
}
.select-btn span{
font-size: 14px;
color: #252A37;
vertical-align: middle;
}
#test6{
position: absolute;
top: -1px;
right: -546px;
margin: 0px;
font-size: 12px !important;
display: none;
}
#layui-laydate1{
border-left: 0px;
border-color: #E0E5F0;
box-shadow: 0 3px 6px 0 rgba(44,89,195,0.20);
}
#test6 .layui-laydate-content{
padding: 18.5px;
}
#test6 .layui-laydate-header{
padding-top: 8px;
}
.layui-laydate-header i{
font-size: 0px !important;
top: 50% !important;
margin-top:-8px;
}
.laydate-prev-m,.laydate-next-m{
width: 10px;
height: 16px;
}
.laydate-prev-m{
background-image: url("../img/icon_shangyue.png");
}
.laydate-next-m{
background-image: url("../img/icon_xiayue.png");
}
.laydate-prev-y,.laydate-next-y{
width: 14px;
height: 16px;
}
.laydate-prev-y{
background-image: url("../img/icon_shangnian.png");
}
.laydate-next-y{
background-image: url("../img/icon_xianian.png");
}
#layui-laydate1 .layui-this {
background-color: #2C59C3 !important;
}
.layui-laydate-header{
background: #f5f7fa;
border-color: #E0E5F0 !important;
}
.layui-laydate, .layui-laydate-hint{
border-color: #E0E5F0 !important;
}
#test6 .laydate-selected{
background: #F5F7FA;
color: #000;
}
</style>
</head>
<body>
<span>时间范围</span>
<div class="drop-Wrap">
<div class="selectConBox">
<em class="newAddTit dateView"></em>
<span class="clickQue">
<i></i>
</span>
</div>
<div class="diff-selectBox">
<ul class="dateBtn-wrap">
<li>今日</li>
<li>昨日</li>
<li>最近3日</li>
<li>最近7日</li>
<li>最近30日</li>
<li class="custom-btn" style="position: relative">
自定义
</li>
</ul>
<div class="btn-wrap">
<em class="cancle-btn">取消</em>
<em class="confirm-btn">确认</em>
</div>
<div id="test6"></div>
</div>
</div>
</body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="../js/layer/layui.js"></script>
<script type="text/javascript">
var dateCon;
layui.use('laydate', function(){
var laydate = layui.laydate;
laydate.render({
elem: '#test6',
range: '~',
position: 'static',
showBottom: false,
isInitValue: false,
change: function(value, date){
dateCon = value;
}
});
});
$(document).on('click','.dateBtn-wrap li',function(event){
event.stopPropagation();
$('.diff-selectBox li').removeClass('selected-liCss');
$(this).addClass('selected-liCss');
if($(this).hasClass('custom-btn')){
$('#test6').show();
}else{
$('#test6').hide();
};
function calcDate(days){
var myDate = new Date();
var dateLast = new Date(myDate - 1000 * 60 * 60 * 24 * days);
var year = dateLast.getFullYear();
var month = dateLast.getMonth() + 1;
var day = dateLast.getDate();
if(month < 10) {
month = '0' + month
}
if(day < 10) {
day = '0' + day
}
return year + '-' + month + '-' + day;
};
var todayTime = calcDate(0);
var index = $(this).index();
var lastDate;
switch (index) {
case 0:
dateCon = todayTime;
break;
case 1:
lastDate = calcDate(1);
dateCon = lastDate;
break;
case 2:
lastDate = calcDate(2);
dateCon = lastDate + ' ~ ' + todayTime;
break;
case 3:
lastDate = calcDate(6);
dateCon = lastDate + ' ~ ' + todayTime;
break;
case 4:
lastDate = calcDate(29);
dateCon = lastDate + ' ~ ' + todayTime;
break;
}
});
$('.confirm-btn').on('click',function(){
$('.dateView').html(dateCon);
});
</script>
</html>
扫一扫
811
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
