why calendar's datapicker is not visible?

I am trying to add datepicker calendar. However it is not visible.

Below is my code:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta
  name="viewport" content="width=device-width,
  initial-scale=1"><title>jQuery UI Datepicker - Select a Date
     Range</title<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 type=text/javascript src="jquery-ui-1.12.1.custom/jquery-ui.js" </script>
  <script>
          $('#date1').datepicker({  maxDate: '+0d',  changeMonth: true, numberOfMonths: 1, onClose: function (selectedDate) {
          $('#date2').datepicker("option", "minDate", selectedDate);
          setTimeout(function () {
             $('#date2').focus();
         }, 100);
        } }); $('#date2').datepicker({
        maxDate: '+0d',
        changeMonth: true,
        numberOfMonths: 1,
       onClose: function (selectedDate) {
       $('#date1').datepicker("option", "maxDate", selectedDate);
 } }); </script> </head> <body>
 <header>
 <h3>Bhutan Trip planner</h3>
 </header>
 <div class="tableoptions"> <span class="field">  
         <label for="fromdate">From:</label>
         <input id="date1" name='fromdate' type="text" class="width75" /> 
     </span>  <span class="field">
         <label for="todate">To:</label>
        <input id="date2" name='todate' type="text" class="width75" /> 
     </span> </div> </body> </html>

thanks in advance!

Solution

Here is a working example of your code, it does work: https://jsfiddle.net/Twisty/dsn9t5g3/

Here is your Code, with a little cleaning:

<!DOCTYPE html> <html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Datepicker - Select a Date Range</title>
  <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 type=text/javascript src="jquery-ui-1.12.1.custom/jquery-ui.js"></script>
  <script>
  $(function(){
    $('#date1').datepicker({
      maxDate: '+0d',
      changeMonth: true,
      numberOfMonths: 1,
      onClose: function (selectedDate) {
        $('#date2').datepicker("option", "minDate", selectedDate);
        setTimeout(function () {
          $('#date2').focus();
        }, 100);
      }
    });
    $('#date2').datepicker({
      maxDate: '+0d',
      changeMonth: true,
      numberOfMonths: 1,
      onClose: function (selectedDate) {
        $('#date1').datepicker("option", "maxDate", selectedDate);
      }
    });
  });
  </script>
</head>
<body>
  <header>
    <h3>Bhutan Trip planner</h3>
  </header>
  <div class="tableoptions">
    <span class="field">  
      <label for="fromdate">From:</label>
      <input id="date1" name='fromdate' type="text" class="width75" /> 
    </span>
    <span class="field">
      <label for="todate">To:</label>
      <input id="date2" name='todate' type="text" class="width75" /> 
    </span>
  </div>
</body>
</html>

You had a few tags that were not closed properly and that can kill your code.

Also, you didn't ask a question. No way to know if this is what you were looking for.