jQuery UI Datepicker

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

Demo

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.