1. Introduction

glDatePicker is a lightweight, super simple date picker plugin for jQuery. The plugin comes with many features:

• available changing the style of the selected date, special dates and individual days of the week,
• callback fires when the date is selected,
• repeatable date ranges, individual dates, and special dates,
• restrict selection to a range of dates, individual dates, years, months and days of the week,
• restricting forward /backward month navigation,
• go to respective month on selection,
• changing the first day of the week,
• go to specific month or year through the select drop-down,
• customizable month names and days of week names,
• callbacks when the calendar is about to show or hide,
• individual styles per date picker on the same page,
• render directly below input control or specify a custom element to render into.

2. Plugin Overview

Demo

3. How to install and use glDatePicker jQuery plugin

Follow the below steps to install glDatePicker jQuery plugin on your website.

1. Include jQuery library and glDatePicker asset files (JS and CSS):

<!--jQuery-->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<!--gl Date Picker Js-->
<script src="glDatePicker.min.js"></script>

<!--gl Date Picker CSS-->
<link href="glDatePicker.default.css" rel="stylesheet" type="text/css">

2. Create input with unique id:

<input type="text" id="example" />

3. Initialize the plugin in jQuery document ready function:

$(document).ready(function(){
 $('#example').glDatePicker();
});

After initialization glDatePicker plugin, accordingly to the configuration, will be attached to the input field and displayed on focus or shown inline.

4. Conclusion

In this article, we presented glDatePicker jQuery plugin. A date picker is commonly used on HTML forms and users like that component to be simple and intuitive. The glDatePicker plugin fits in perfectly with such assumptions. It is super easy to use and looks amazingly simple.