[Solved] display calendar (date picker) in html page

by


As mentioned in the comments, you haven’t included jQuery or jQuery UI, and your HTML closing tags are incorrect. If you view the source of the demo on the jqueryui site, you will find the code is a little different you yours.

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.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>
    <p>Date: <input type="text" id="datepicker"></p>
  </body>
</html>

To implement this into your code, it would be:

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.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>
    <link href="https://stackoverflow.com/questions/44889024/CSS/Master.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div id="holder"></div>
    <div id="datepicker1"></div>
    <script type="text/javascript">
      $(function() {
        $("#datepicker1").datepicker({
          numberOfMonths:3
        }); 
      });
    </script>
  </body>
</html>
 
<p>Date: <input type="text" id="datepicker"></p>
 
 
</body>
</html>

3

solved display calendar (date picker) in html page