ncb-datepicker
Version:
A datepicker with no dependencies. Check out a simple demo here: https://nickbittar.github.io/Datepicker/
116 lines (112 loc) • 2.8 kB
HTML
<html>
<head>
<style>
* {
font-family: verdana;
padding: 0;
margin: 0;
}
body {
background-color: #f1f1f1;
}
.page {
width: 100%;
min-height: 100%;
}
.container {
background-color: #ffffff;
width: 80%;
min-width: 542px;
min-height: 256px;
margin: 20px auto;
}
.panel {
border: 1px solid #cfcfcf;
box-shadow: 0px 1px 2px rgba(0,0,0,0.5);
border-radius: 5px;
padding: 20px 15px;
z-index: 254;
}
.modal-container {
position: fixed;
top: 300px;
left: 100px;
width: 400px;
height: 200px;
margin: 30px auto;
padding: 16px;
}
.modal {
position: relative;
background: lavender;
height: 200px;
margin: 30px auto;
padding: 300px 16px;
box-sizing: border-box;
overflow-y: scroll;
}
.modal-wrapper {
position: absolute;
width: 100%;
}
</style>
<link rel="stylesheet" type="text/css" href="dist/datepicker.css">
</head>
<body>
<div class="page">
<div class="container panel">
<input id="date-input" class="datepicker" style="z-index: 123;"/>
<input id="date-input2" class="datepicker" />
</div>
<div class="modal-wrapper">
<div class="modal-container">
<div class="modal">
<table>
<tr>
<td>
This is a test
</td>
<td>
<div><input id="date-input3" class="datepicker" value="01/01/2016"/></div>
</td>
<td>
A very bad test
</td>
</tr>
</table>
<input id="date-input4" class="datepicker"/>
</div>
</div>
</div>
</div>
</body>
<script src="dist/datepicker.js"></script>
<script type="text/javascript">
var dateInputs = document.querySelectorAll('input.datepicker');
var datepickerObjs = [];
datepicker.create(document.getElementById('date-input3'), {
attachToElement: document.querySelector('.modal-container'),
hideCalendarOnClickOff: true,
maxDate: new Date((new Date()).toLocaleDateString()),
});
for(var i = 0; i < dateInputs.length; i++) {
var dp = datepicker.create(dateInputs[i], {
selectedDate: new Date(2017,06,02),
minDate: new Date(1990,5,15),
maxDate: new Date(2018, 0, 20),
defaultDate: new Date(2017, 04, 2),
hideCalendarOnClickOff: true,
hideCalendarOnSelect: true,
startViewMode: 'day',
todayButton: true,
darkMode: false,
compact: false,
selectedDateColor: '#bb66ee',
onDateSelect: function(e, date) { console.log(e, date, 'listener test', arguments);},
attachToElement: null,//document.body,
wrapInputElem: true
});
datepickerObjs.push(dp);
}
</script>
</html>