Description:
A simple, beautiful and powerful date picker is vanilla js calendar for those who tired of using jQuery Calendar.
Installation:
Load the CSS file in the header section of your page.
<link rel="stylesheet" href="dist/doc.css"> <link rel="stylesheet" href="dist/datepickk.min.css"> <!-- Additional--> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.7/styles/zenburn.min.css"> <link href="https://fonts.googleapis.com/css?family=Raleway:400,600" rel="stylesheet"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.7/highlight.min.js"></script>
Note: First two lines of CSS are needed, but other scripts help to appear the calendar more pretty.
Next, load the javascript file in the footer, in order to avoid render blocking.
<script src="dist/datepickk.min.js"></script> <script src="dist/fastclick.js"></script>
Full source code
<html> <head> <link rel="stylesheet" href="style.css"> </head> <body> <button class="btn btn-danger"onclick="datepicker.show();">Modal<span>onclick="datepicker.show();"</span></button> <h3>Calendar</h3> <div id="demoPicker" style="height:600px;width:100%;max-width: 600px;"></div> <script> var now = new Date(); var demoPicker = new Datepickk({ container: document.querySelector('#demoPicker'), inline:true, range: true, tooltips: { date: new Date(), text: 'Tooltip' }, highlight:{ start: new Date(now.getFullYear(),now.getMonth(),3), end: new Date(now.getFullYear(),now.getMonth(),6), backgroundColor:'#05676E', color:'#fff', legend: 'Highlight' } }); </script> </body> </html>
Did this post help you?
Tutsplanet brings in-depth and easy tutorials to understand even for beginners. This takes a considerable amount of work. If this post helps you, please consider supporting us as a token of appreciation:
- Just want to thank us? Buy us a Coffee
- May be another day? Shop on Amazon using our links.
Your prices won't change but we get a small commission.
Leave a Reply