jQuery tabs and loading pages

jQuery tabs and loading pages

Hello - I am new at jQeury and am using the tab and datepicker.

I have several tab and one page contains the datepicker  which is the default tab. It will display the calendar when it is the first time the menu.php is displayed. Thereafter, if I click on a different tab and then click on the datepicker tab (called search) the datepicker will not display unless I click on the browser refresh button.

The datepicker page works fine by itself, i.e. not called by tab page so I know that page is functioning well.

The problem is when I click on another tab to load a different page and then click on the tab that loads the datepicker page, the calendar will not display until I click on the refresh button of the browser.

What is causing this and how do I correct it??

Below is the coding for the menu.php - it real simple.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="jquery-ui-1.12.1.custom/jquery-ui.min.css">
<script type="text/javascript" src="jquery-ui-1.12.1.custom/external/jquery/jquery.js"></script>
<script type="text/javascript" src="jquery-ui-1.12.1.custom/jquery-ui.min.js"></script>

</head>
<title>Search Menu </title>

    <body>
 
<script>
  $( function() {

    $( "#tabs" ).tabs();

  } );

</script>


<script>
 $(function() {
    $( "#tabs" ).tabs({
      active: 0  //opens the 2d tab, since its a 0 based count
    });
</script>    

  
 <div id="tabs">
    <ul>
        <li><a href="searchonly.php">Search by Date Only</a></li>
        <li><a href="notavailableyet.php">NA Yet</a></li>
        <li><a href="notavailableyet.php">NA Yet</a></li>
        <li><a href="notavailableyet.php">NA Yet</a></li>
        <li><a href="notavailableyet.php">NA Yet</a></li>
        <li><a href="notavailableyet.php">NA Yet</a></li>
    </ul>
</div>
        
    
    </body>
</html>

.