1. Introduction
jquery-ui-built-in-datepicker is a default jQuery UI date picker. This component is available in the jQuery UI library that is an extension of a simple jQuery framework.
2. Plugin Overview
Library | jquery-ui-built-in-datepicker |
Author | Brendan Skousen |
Licence | MIT Licence |
Repository | CodePen |
Dependencies | jQuery 1.3.1 or Latest version and jQuery UI |
3. How to install and use jquery-ui-built-in-datepicker jQuery plugin
Follow the below steps to install jquery-ui-built-in-datepicker jQuery plugin on your website.
3.1. Load the jQuery, jQuery UI javascript and CSS into HTML document:
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<!-- jQuery UI -->
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<!-- jQuery UI CSS -->
<link rel='stylesheet' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'>
3.2. Create an input element in your HTML form:
<form>
Date: <input id="datepicker">
</form>
3.3. Initialize the datepicker plugin:
$(function() {
$("#datepicker").datepicker();
});
After initialization, the plugin will attach all necessary events to the input field. On focus, the calendar will show up, where we can select a date.
4. Conclusion
In this article, we presented jquery-ui-built-in-datepicker component available in the jQuery UI framework. Datepicker is well documented and comes with many options and features.
{{ 'Comments (%count%)' | trans {count:count} }}
{{ 'Comments are closed.' | trans }}