jQuery Datepicker Plugin

November 10, 2019 No comments jQuery Plugin Datepicker

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.

Jquery datepicker

2. Plugin Overview

Library datepick
Author Keith Wood
Licence MIT Licence
Repository GitHub
Dependencies jQuery 1.12.4 or Latest version

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).

{{ message }}

{{ 'Comments are closed.' | trans }}