date-picker
Version:
A simple client-side date-picker
66 lines (56 loc) • 1.23 kB
HTML
<link href=../../src/dp.css rel=stylesheet>
<title>Manual Floating window test</title>
<style>
.test {
border: 1px solid black;
width: 230px;
padding: 5px;
margin: 10px;
}
.test > p {
width: 210px;
margin: 10px 0;
padding: 5px;
border: 1px solid black;
border-bottom: 0;
height: 30px;
}
.rel {
position: relative;
}
.abs {
position: absolute;
top: 100px;
left: 300px;
}
#below-the-fold {
margin-top: 100%;
margin-left: 100%;
}
</style>
<div class="static test">
<h2>position: static</h2>
<input>
<button onclick="dp.toggle(this.previousElementSibling || this.previousSibling)">Toggle</button>
<p>It should appear inside here</p>
</div>
<div class="rel test">
<h2>position: relative</h2>
<input>
<button onclick="dp.toggle(this.previousElementSibling || this.previousSibling)">Toggle</button>
<p>It should appear inside here</p>
</div>
<div class="abs test">
<h2>position: absolute</h2>
<input>
<button onclick="dp.toggle(this.previousElementSibling || this.previousSibling)">Toggle</button>
<p>It should appear inside here</p>
</div>
<h3>Scroll and test again!</h3>
<div id=below-the-fold>
</div>
<script src=../../src/dp.js></script>
<script>
var dp = new DatePicker()
</script>