jQuery UI Datepicker

The jQuery UI Datepicker is a popular component. The jQueryUI Datepicker plugin allow you to select a date from a popup or an in-line calendar . It is tied to a standard form input field. Mouse click, or use the tab key on the input to open an interactive calendar in a small overlay. Choose a date, click elsewhere on the page (blur the input), or hit the Esc key to close. If a date is chosen, selected date is shown as the input's value.
<input type="text" id="dPicker">
$( "#dPicker").datepicker();
run this source code Browser View

Click to Enter the date :

Full Source
<html> <head> <title>jQuery UI datepicker example</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script> $(function() { $( ".dPicker").datepicker(); }); </script> </head> <body> <p>Click to Enter the date : <input type="text" class="dPicker"></p> </body> </html>