极客观点
项目管理
HarmonyOS
如何达日期插件框可以定位于其父元素的下方，但能随着父元素的位置所在的页面移动而移动，而不是固定在某一高度，由于日期插件基本是JS控制，对于JS不熟，特来请教
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>网站</title>
<meta name="description" content="">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/discover.css">
<link rel="stylesheet" href="css/daterangepicker.css">
<script src="js/vendor/modernizr-2.8.3.min.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
.nav-pills>li>a {
border-radius: 0px;
}
.nav-pills>li>a {
position: relative;
display: block;
padding: 5px 10px;
}
.nav-pills>li+li {
margin-left: 0px;
}
.sorts>ul>li>a:hover,
.sorts>ul>li>a:focus {
background-color: #ddd;
color: #7c7c7c;
}
.mega-dropdown {
position: static !important;
}
.mega-dropdown-menu {
padding: 20px 15px 15px;
text-align: center;
width: 100%;
}
.dropdown-menu {
position: absolute;
top: 65%;
left: 0px;
z-index: 1000;
display: none;
float: left;
width: 100%;
padding: 5px 0px;
margin: 0px 0px 0px;
font-size: 14px;
list-style: none;
background-color: white;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid rgba(0, 0, 0, 0.14902);
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
border-radius: 0px;
box-shadow: rgba(0, 0, 0, 0.172549) 0px 6px 12px;
}
.loadMeinv-2 {
height: 30px;
width: 90PX;
line-height: 10px;
color: #999;
font-size: 14px;
text-align: center;
background: #f4f4f4;
display: block;
text-decoration: none;
margin: auto 10px;
margin-bottom: 15px;
position: absolute;
top: 0;
right: 0;
}
.ul-wapper>.nav-tabs {
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
padding-bottom: 5px;
margin-bottom: -5px;
margin-right: 10px;
-ms-overflow-style: none;
overflow: -moz-scrollbars-none;
}
.ul-wapper>.nav-tabs::-webkit-scrollbar {
width: 0px
}
.ul-wapper>.nav-tabs>li>a {
color: #7c7c7c;
}
.navbar>.ul-wapper>.nav-tabs>li>a:hover,
.navbar>.ul-wapper>.nav-tabs>li>a:focus {
background-color: #ddd;
}
.ul-wapper>.nav-tabs>li>a:hover,
.ul-wapper>.nav-tabs>li>a:focus {
background-color: #f2f2f2;
}
.ul-wapper>.nav-tabs>li>a:active {
color: #d36f16;
}
@media (max-width: 339px) {
.loadMeinv-2 {
width: 65PX;
line-height: 19px;
font-size: 10px;
}
.nav ul li a {
color: #7c7c7c;
font-size: 10px;
}
.loadMeinv {
height: 26px;
line-height: 26px;
width: 56PX;
margin: auto 1px;
}
.loadMeinv-1 {
height: 26px;
line-height: 26px;
width: 56PX;
margin: auto 1px;
}
.ul-wapper>.nav-tabs {
padding-bottom: 0px;
}
}
@media (min-width: 340px) and (max-width: 399px) {
.loadMeinv-2 {
width: 65PX;
line-height: 18px;
font-size: 10px;
}
.ul-wapper>.nav-tabs>li>a {
color: #7c7c7c;
font-size: 10px;
}
.loadMeinv {
width: 60PX;
margin: auto 1px;
}
.loadMeinv-1 {
width: 60PX;
margin: auto 1px;
}
.nav ul li a {
color: #7c7c7c;
font-size: 10px;
}
.ul-wapper>.nav-tabs {
padding-bottom: 0px;
}
}
@media (min-width: 400px) and (max-width: 549px) {
.loadMeinv-2 {
width: 65PX;
line-height: 20px;
font-size: 10px;
}
.ul-wapper>.nav-tabs>li>a {
color: #7c7c7c;
font-size: 10px;
}
.loadMeinv {
width: 60PX;
margin: auto 1px;
}
.loadMeinv-1 {
width: 60PX;
margin: auto 1px;
}
.nav ul li a {
color: #7c7c7c;
font-size: 10px;
}
.ul-wapper>.nav-tabs {
padding-bottom: 0px;
}
}
@media (min-width: 550px) and (max-width: 767px) {
.loadMeinv-2 {
width: 65PX;
line-height: 20px;
font-size: 10px;
}
.ul-wapper>.nav-tabs>li>a {
color: #7c7c7c;
font-size: 10px;
}
.loadMeinv {
width: 60PX;
margin: auto 1px;
}
.loadMeinv-1 {
width: 60PX;
margin: auto 1px;
}
.nav ul li a {
color: #7c7c7c;
font-size: 10px;
}
.sort-label {
font-size: 16px;
}
.ul-wapper>.nav-tabs {
padding-bottom: 0px;
}
}
.daterangepicker.show-calendar{
left: auto !important;
right: 0 !important;
top: 25% !important;
}
</style>
<style type="text/css">
.dropdown-submenu {
position: relative;
}
.dropdown-submenu>.dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px;
border-radius: 0 6px 6px 6px;
}
.dropdown-submenu:hover>.dropdown-menu {
display: block;
}
.dropdown-submenu>a:after {
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #ccc;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover>a:after {
border-left-color: #fff;
}
.dropdown-submenu.pull-left {
float: none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}
.multi-dropdown {
position: absolute;
left: -147% !important;
}
</style>
</head>
<body>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<header role="banner">
<nav role="navigation" class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">Project name</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="index.html">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container -->
</nav>
</header>
<br>
<div class="container">
<div class="navbar">
<div class="sorts ul-wapper">
<ul class="nav nav-pills nav-tabs">
<li class="dropdown mega-dropdown ul-wapper ">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">首页推荐 </a>
<ul class="dropdown-menu nav-tabs">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
<li class="dropdown mega-dropdown ul-wapper ">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">首页推荐 </a>
<ul class="dropdown-menu nav-tabs">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
<li class="dropdown mega-dropdown ul-wapper ">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">首页推荐 </a>
<ul class="dropdown-menu nav-tabs">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
<li class="dropdown mega-dropdown ul-wapper ">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">首页推荐 </a>
<ul class="dropdown-menu nav-tabs">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
<li class="dropdown mega-dropdown ul-wapper ">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">首页推荐 </a>
<ul class="dropdown-menu nav-tabs">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<ul class="nav pull-right loadMeinv-2">
<li class="dropdown pull-right">
<a href="#" class="dropdown-toggle" style="color: #7c7c7c;" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">其他筛选 </a>
<ul class="dropdown-menu dropdown-menu-left " style="top: 80%; min-width: 110px;">
<li><a href="#" style="text-align: right;">最新</a></li>
<li><a href="#" style="text-align: right;"="">精选</a></li>
<li role="separator" class="divider"></li>
<li><a href="javascript:;" style="text-align: right;">日期范围</a>
<ul class="dropdown-menu multi-dropdown" style="top: 60%; width: auto;">
<li>
<div class="input-group">
<input class="form-control date-picker" id="dateTimeRange" style="padding: 6px 6px;
font-size: 10px; height: 26px;" value="" type="text">
<input name="beginTime" id="beginTime" value="" type="hidden">
<input name="endTime" id="endTime" value="" type="hidden">
</div>
<a href="javascript:;" onclick="begin_end_time_clear();">清除</a></li>
</ul>
</li>
<li><a href="javascript:;" style="text-align: right;">搜索关键字</a>
<ul class="dropdown-menu multi-dropdown" style="top: 76%;">
<li>
<form action="" method="get" class="form-horizontal">
<div class="input-group stylish-input-group">
<input type="text" class="form-control" style="background: transparent;font-size: 10px; height: 25px;" placeholder="搜索关键词..">
<span class="input-group-addon">
<button type="submit">
<span class="fa fa-search" style="font-size: 14px; color: #eee;"></span>
</button>
</span>
</div>
</form>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br><div class="input-group" style="width: 240px; margin-left: -5px;">
<input class="form-control date-picker" id="dateTimeRange" value="" type="text">
<span class="input-group-addon">
<i class="fa fa-calendar bigger-110"></i>
</span>
<input name="beginTime" id="beginTime" value="" type="hidden">
<input name="endTime" id="endTime" value="" type="hidden">
</div>
<a href="javascript:;" onclick="begin_end_time_clear();">清除</a>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script>
window.jQuery || document.write('<script src="js/vendor/jquery-1.12.0.min.js"><\/script>')
</script>
<!-- Holder.js for project development only -->
<script src="js/vendor/holder.js"></script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<script type="text/javascript" src="js/moment.js"></script>
<script type="text/javascript" src="js/daterangepicker.js"></script>
<script src="js/daterangepicker.zh-CN.js?ver=1" type="text/javascript"></script>
<script>
$('.show-a').on('click', function() {
$("#modal-1").removeClass("md-show");
})
$('.show-b').on('click', function() {
$("#modal-11").removeClass("md-show");
})
$('.show-c').on('click', function() {
$("#modal-8").removeClass("md-show");
})
</script>
<script>
//滚动后导航固定
$(function() {
$(window).scroll(function() {
height = $(window).scrollTop();
if (height > 300) {
$('.nav12').fadeIn();
} else {
$('.nav12').fadeOut();
};
});
});
</script>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
(function(b, o, i, l, e, r) {
b.GoogleAnalyticsObject = l;
b[l] || (b[l] =
function() {
(b[l].q = b[l].q || []).push(arguments)
});
b[l].l = +new Date;
e = o.createElement(i);
r = o.getElementsByTagName(i)[0];
e.src = 'https://www.google-analytics.com/analytics.js';
r.parentNode.insertBefore(e, r)
}(window, document, 'script', 'ga'));
ga('create', 'UA-XXXXX-X', 'auto');
ga('send', 'pageview');
</script>
<!--资讯切换-->
<script>
$("#switch-1 li").each(function() {
$(this).on('mouseenter', function(e) {
var e = e || window.event;
var angle = direct(e, this)
mouseEvent(angle, this, 'in')
})
$(this).on('mouseleave', function(e) {
var e = e || window.event;
var angle = direct(e, this)
mouseEvent(angle, this, 'off')
})
})
function direct(e, o) {
var w = o.offsetWidth;
var h = o.offsetHeight;
var top = o.offsetTop; //包含滚动条滚动的部分
var left = o.offsetLeft;
var scrollTOP = document.body.scrollTop || document.documentElement.scrollTop;
var scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft;
var offTop = top - scrollTOP;
var offLeft = left - scrollLeft;
//console.log(offTop+";"+offLeft)
// e.pageX|| e.clientX;
//pageX 是从页面0 0 点开始 clientX是当前可视区域0 0开始 即当有滚动条时clientX 小于 pageX
//ie678不识别pageX
//PageY=clientY+scrollTop-clientTop;(只讨论Y轴,X轴同理,下同) 页面上的位置=可视区域位置+页面滚动条切去高度-自身border高度
var ex = (e.pageX - scrollLeft) || e.clientX;
var ey = (e.pageY - scrollTOP) || e.clientY;
var x = (ex - offLeft - w / 2) * (w > h ? (h / w) : 1);
var y = (ey - offTop - h / 2) * (h > w ? (w / h) : 1);
var angle = (Math.round((Math.atan2(y, x) * (180 / Math.PI) + 180) / 90) + 3) % 4 //atan2返回的是弧度 atan2(y,x)
var directName = ["上", "右", "下", "左"];
return directName[angle]; //返回方向 0 1 2 3对应 上 右 下 左
}
function mouseEvent(angle, o, d) { //方向 元素 鼠标进入/离开
var w = o.offsetWidth;
var h = o.offsetHeight;
if (d == 'in') {
switch (angle) {
case '上':
$(o).find("p").css({
left: 0,
top: -h + "px"
}).stop(true).animate({
left: 0,
top: 0
}, 300)
setTimeout(function() {
$(o).find("p a").css({
left: '50%',
top: -h + "px"
}).stop(true).animate({
left: '50%',
top: '20px'
}, 300)
}, 200)
break;
case '右':
$(o).find("p").css({
left: w + "px",
top: 0
}).stop(true).animate({
left: 0,
top: 0
}, 300)
setTimeout(function() {
$(o).find("p a").css({
left: w + "px",
top: '20px'
}).stop(true).animate({
left: '50%',
top: '20px'
}, 300)
}, 200)
break;
case '下':
$(o).find("p").css({
left: 0,
top: h + "px"
}).stop(true).animate({
left: 0,
top: 0
}, 300)
setTimeout(function() {
$(o).find("p a").css({
left: '50%',
top: h + "px"
}).stop(true).animate({
left: '50%',
top: '20px'
}, 300)
}, 200)
break;
case '左':
$(o).find("p").css({
left: -w + "px",
top: 0
}).stop(true).animate({
left: 0,
top: 0
}, 300)
setTimeout(function() {
$(o).find("p a").css({
left: -w + "px",
top: '20px'
}).stop(true).animate({
left: '50%',
top: '20px'
}, 300)
}, 200)
break;
}
} else if (d == 'off') {
switch (angle) {
case '上':
$(o).find("p a").stop(true).animate({
left: '50%',
top: -h + "px"
}, 300)
setTimeout(function() {
$(o).find("p").stop(true).animate({
left: 0,
top: -h + "px"
}, 300)
}, 200)
break;
case '右':
$(o).find("p a").stop(true).animate({
left: w + "px",
top: '20px'
}, 300)
setTimeout(function() {
$(o).find("p").stop(true).animate({
left: w + "px",
top: 0
}, 300)
}, 200)
break;
case '下':
$(o).find("p a").stop(true).animate({
left: '50%',
top: h + "px"
}, 300)
setTimeout(function() {
$(o).find("p").stop(true).animate({
left: 0,
top: h + "px"
}, 300)
}, 200)
break;
case '左':
$(o).find("p a").stop(true).animate({
left: -w + "px",
top: '20px'
}, 300)
setTimeout(function() {
$(o).find("p").stop(true).animate({
left: -w + "px",
top: 0
}, 300)
}, 200)
break;
}
}
}
</script>
<script type="text/javascript">
$(function() {
$('#dateTimeRange').daterangepicker({
applyClass: 'btn-sm btn-success',
cancelClass: 'btn-sm btn-default',
locale: {
applyLabel: '确认',
cancelLabel: '取消',
fromLabel: '起始时间',
toLabel: '结束时间',
customRangeLabel: '自定义',
firstDay: 1
},
ranges: {
//'最近1小时': [moment().subtract('hours',1), moment()],
'今日': [moment().startOf('day'), moment()],
'昨日': [moment().subtract('days', 1).startOf('day'), moment().subtract('days', 1).endOf('day')],
'最近7日': [moment().subtract('days', 6), moment()],
'最近30日': [moment().subtract('days', 29), moment()],
'本月': [moment().startOf("month"), moment().endOf("month")],
'上个月': [moment().subtract(1, "month").startOf("month"), moment().subtract(1, "month").endOf("month")]
},
opens: 'right', // 日期选择框的弹出位置
separator: ' 至 ',
showWeekNumbers: true, // 是否显示第几周
//timePicker: true,
//timePickerIncrement : 10, // 时间的增量，单位为分钟
//timePicker12Hour : false, // 是否使用12小时制来显示时间
//maxDate : moment(), // 最大时间
format: 'YYYY-MM-DD'
}, function(start, end, label) { // 格式化日期显示框
$('#beginTime').val(start.format('YYYY-MM-DD'));
$('#endTime').val(end.format('YYYY-MM-DD'));
})
.next().on('click', function() {
$(this).prev().focus();
});
});
/**
* 清除时间
*/
function begin_end_time_clear() {
$('#dateTimeRange').val('');
$('#beginTime').val('');
$('#endTime').val('');
}
</script>
</body>
</html>
源文件（百度网盘）：链接：http://pan.baidu.com/s/1dF3uL37 密码：tbho
html5
不用js进行操作，通过css就可以实现了。
原理就是将父元素的position设置为relative,然后你的日期选择器的position设置为absolute。那么日期选择器的定位参考元素就是父元素。即可实现父容器移动时，日期选择器跟着移动