jQuery Datepicker Plugin

1. Introduction

datepick is another jQuery plugin for creating date pickers. The plugin attaches the popup with calendar to selected input fields or displays inline calendar. datepick comes with many features such as rage of dates, standard or custom layout, custom commands, 70 localisations.

2. Plugin Overview

Demo

3. How to install and use datepick jQuery plugin

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

3.1. First, install jQuery library and datepick CSS and JS files into your document:

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

<!-- jQuery plugin -->
<script src="js/jquery.plugin.min.js"></script>

<!-- Datepicker CSS -->
<link href="css/jquery.datepick.css" rel="stylesheet">

<!-- Datepicker JS -->
<script src="js/jquery.datepick.js"></script>

3.2. Create HTML input with unique ID:

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

3.3. Initialize datepick plugin in jQuery document ready function:

$(document).ready(function(){
   $('#myDatepicker').datepick();
});

After initialization, the plugin will attach popup to #myDatepicker input field.

4. Conclusion

In this article, we presented datepick jQuery plugin for creating date picker components. The plugin should be useful in forms where users have to provide a date. It allows you to attach popup to the existing input field or can be displayed inline (always visible).