By clicking on the input text box or by using tab key ,you can open datepicker popup. By pressing anywhere on the page or by pressing Esc key,you can close datepicker. If you select any date from datepicker, it will be the value of input field. Jquery datepicker not only helps you to choose date but it also makes interface attractive. Lets see below an example in which we will Jquery Datepicker : First we will see Jquery Script

<html>
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#datepicker" ).datepicker();
  } );
  </script>
</head>
<body>
<div>Date: <input type="text" id="datepicker"></div>
</body>
</html

In this script we have used one stylesheet (.css) named jquery-ui.css and two jscript (.js ) file named jquery-1.9.1.js and jquery-ui.js. You can download these files from here. In this code we have make comment on as it is only used in demos so if you remove this line of code, it will not affect to output. In