Yet another datepicker in JavaScript code with example and using guide. The Lightpick is a pure JavaScript datepicker plugin to pick single, multiple and ranged date. It creates a beautiful calendar widget near the input field to add/pick selected date.
Plugin Overview
Plugin: | Lightpick |
Author: | Rinat G |
Licence: | MIT Licence |
Published: | May 24, 2019 |
Repository: | Fork on GitHub |
Dependencies: | Bootstrap 4.1.3 and moment.js |
File Type: | zip archive (HTML, CSS & JavaScript ) |
Package Size: | 16.2 KB |
How to Use Lightpick javascript Datepicker
1. To getting started with Lightpick
datepicker, you need to load Bootstrap CSS and moment.js
into the head of your HTML document.
<!-- Bootstrap JS --> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <!-- Moment Js --> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
2. After that, include the lightpick
CSS and JavaScript file into your webpage.
<!-- Lightpick CSS --> <link rel="stylesheet" href="css/lightpick.css"> <!-- Lightpick JS --> <script src="js/lightpick.js"></script>
2.1 You can also load lightpick by CDN link.
<script src="https://unpkg.com/lightpick@latest/lightpick.js"></script>
3. Create input
element with following mentioned attributes.
<input type="text" id="myDatepicker" class="form-control form-control-sm"/>
4. Finally, initialize the plugin with the following script.
<script> new Lightpick({ field: document.getElementById('myDatepicker'), onSelect: function(date){ document.getElementById('result-1').innerHTML = date.format('Do MMMM YYYY'); } }); </script>
This awesome JavaScript plugin is developed by Rinat G. Please check the demo page or official repository for more advance usage.
Leave a Reply