js-custom-datepicker
Version:
Сalendar was written on javascript using es6 format and was redone to es5 using webpack and babel tools. There are many classes for easy styling for the desired website design.
153 lines (152 loc) • 5.97 kB
HTML
<html>
<head>
<link rel="stylesheet" href="/dist/js-custom-datepicker.css"/>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" href="/dist/js-custom-select.css"/>
<link href="../node_modules/js-custom-scroll/dist/js-custom-scroll.css" rel="stylesheet">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.6.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.6.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body{
max-width: 80%;
margin: 0 auto;
}
.clearfix{
clear: both;
}
.pull-right{
width: calc(30% - 15px);
float: right;
}
.pull-right h2{
margin-top: 0;
}
.pull-left{
width: 70%;
float: left;
margin-top: 0;
}
#inputForStatic{
cursor: default;
}
.datePicker-input{
padding: 19px 15px;
width: 100%;
cursor: pointer;
}
#datePickers input{
float: left;
width: 48%;
}
#datePickers input:last-child{
float: right;
}
</style>
</head>
<body>
<h1>Js Custom Select Demo</h1>
<h2>Example 1:</h2>
<h3>Default calendar</h3>
<pre class="pull-left">
<code class="language-js"><script type="text/javascript">
new jsCustomDatepicker(datePicker[i]);
</script></code></pre>
<div class="pull-right">
<input readonly id="datePicker" class="datePicker-input" type="text"/>
</div>
<div class="clearfix"></div>
<h2>Example 2:</h2>
<h3>Two inputs are interdependent</h3>
<pre class="pull-left">
<code class="language-js"><script type="text/javascript">
var datePicker = document.getElementById('datePickers').getElementsByClassName('datePicker');
for (var i = 0; i < datePicker.length; i++) {
new jsCustomDatepicker(datePicker[i], {
onSelect: function (input, date) {
console.log(date);
}
});
}
</script></code></pre>
<div id="datePickers" class="pull-right">
<input id="date-from" class="datePicker datePicker-input" type="text" data-options='{"binderID":"date-to"}' />
<input id="date-to" class="datePicker datePicker-input" type="text" data-binderid="date-from" />
</div>
<div class="clearfix"></div>
<hr>
<h2>Example 3:</h2>
<h3>Static calendar</h3>
<pre class="pull-left">
<code class="language-js"><script type="text/javascript">
var static = new jsCustomDatepicker(document.getElementById('datePickerStatic'), {
between: true,
minDate: new Date().format('dd-mm-YYYY'),
years: {
to: 2019,
from: 2017,
},
select: {
"max-height": 300,
scroll: {
draggable: true,
}
},
onSelect: function (input, date) {
document.getElementById('inputForStatic').value = date.from + ' - ' + date.to;
}
});
console.log(static);
</script></code></pre>
<div class="pull-right">
<input readonly id="inputForStatic" class="datePicker-input" type="text"/>
<div id="datePickerStatic" ></div>
</div>
<div class="clearfix"></div>
<br/><br/>
<script type="text/javascript">
function test() {
new jsCustomDatepicker(document.getElementById('datePicker'));
var datePicker = document.getElementById('datePickers').getElementsByClassName('datePicker');
for (var i = 0; i < datePicker.length; i++) {
new jsCustomDatepicker(datePicker[i], {
onSelect: function (input, date) {
console.log(date);
}
});
}
var static = new jsCustomDatepicker(document.getElementById('datePickerStatic'), {
between: true,
minDate: new Date().format('dd-mm-YYYY'),
years: {
to: 2019,
from: 2017,
},
select: {
"max-height": 300,
scroll: {
draggable: true,
}
},
onSelect: function (input, date) {
document.getElementById('inputForStatic').value = date.from + ' - ' + date.to;
}
});
console.log(static);
}
</script>
<div class="clearfix"></div>
<link rel="stylesheet" href="http://js-custom-select.flexi.ink/dist/js-custom-select.css">
<link rel="stylesheet" href="http://js-custom-scroll.flexi.ink/dist/js-custom-scroll.css">
<script defer src="http://js-custom-scroll.flexi.ink/dist/js-custom-scroll.min.js" ></script>
<script defer src="http://js-custom-select.flexi.ink/dist/js-custom-select.min.js" ></script>
<script defer src="/dist/js-custom-datepicker.min.js" onload="test()"></script>
</body>
</html>