Datepicker in JavaScript code with Example – Lightpick

May 24, 2019 admin Date & Time 0

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 Preview

How to start using jQuery?

More jQuery Top, Best and New Plugins

Top 100 jQuery Plugins

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
Demo Download

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/[email protected]/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.




Related jQuery Plugins: