How to Create JQuery UI Datepicker | Explained

Create Jquery UI Datepicker

In this article, we will see about how to create a jquery UI datepicker. JQuery has many widgets and the date picker widget is one of them. Every widget has in-built functions, so Just you can call the date picker() function and create it easily. The date picker widget indicates a popup or inline calendar.

Step-step guide to creating date picker

Follow these simple

1. Create a new HTML document with basic HTML document structure code by linking jquery UI library files

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

2. To create a date picker, we need to create a text input or div element.

If you create a div then the inline calendar gets attached, whereas if you create a text input filed then the calendar gets a popup, whenever the text field gets a focus.

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

3. Select the element using the JQuery selector and call the datepicker JQuery UI function on it.

<script type="text/javascript">
$("#datepicker").datepicker();
</script>

Code:

<!DOCTYPE html>
<html>
<head>
<title></title>
<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>

</head>
<body>

<div id="datepicker"></div>

<script type="text/javascript">
$("#datepicker").datepicker();
</script>

</body>
</html>

Output:

create jquery ui datepicker

See the above output, we can select the date. If you want to get the date in the input field or textfield then you need to create <input> tag instead of <div>.

You can create using the below method:

<input type="text" name="datepicker">
<script type="text/javascript">         
              $("#datepicker").datepicker();
</script>

When we click the input textbox, the date picker will popup. You can select the date then your selected date will be displayed on the input box.

Conclusion

Follow the below steps to create datepicker in JQuery UI easily.

Leave a Reply