Creating Date picker Widget


jQuery UI - Date picker Widget:

Date picker Widget: indicates a popup or inline calendar

Creating Date picker Widget:

1. Create a new HTML document with basic HTML document structure code

<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title> Date picker Demo</title>

2. Link the necessary jQueryUI libray files to the HTML document

<link href="jquery-ui/jquery-ui.min.css" rel="stylesheet" type="text/css"/>
<script src="jquery-ui/external/jquery/jquery.js" type="text/javascript"></script>
<script src="jquery-ui/jquery-ui.min.js" type="text/javascript"></script>

3. Code the structure of the widget (i.e. HTML or markup):

To create a date picker widget; we need to create a text input or a div element
Note: If you create a div then the inline calendar gets attached, where as if you create text input field then the calendar gets pop up, whenever the text input field gets focus.

<div id="datepicker">Select date</div>
<input type="text" id="datepicker2"/>

4. Select the element using jQuery and call the respective jQuery UI function on it

Select the element using jQuery selector and call datepicker jQuery UI function on it
<script type="text/javascript">

Interview Questions: