title: I commented jquery-ui.min.js to show a modal window but this is restricting to show datepicker
body: <p>I have a html page  as below 
  `</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;HTML lang="EN-US"&gt;
  
  &lt;HEAD&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
    &lt;meta content="IE=edge" http-equiv="X-UA-Compatible" /&gt;
  
  
    &lt;TITLE&gt;
      DUMMY
    &lt;/TITLE&gt;
    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" /&gt;
    &lt;link rel=stylesheet href=styles.css&gt;
  
  
  &lt;/HEAD&gt;
  
  &lt;body class="mild-blue"&gt;
  
    &lt;head&gt;
      &lt;meta http-equiv="Pragma" content="no-cache" /&gt;
      &lt;meta http-equiv="expires" content="0" /&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
      &lt;meta content="IE=edge" http-equiv="X-UA-Compatible" /&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /&gt;
      &lt;meta http-equiv="Content-Style-Type" content="text/css" /&gt;
      &lt;meta http-equiv="Content-Script-Type" content="text/javascript" /&gt;
      &lt;metatags id="MetaTags1" selectedtabindex="0" runat="server" /&gt;
  
  
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="css/jquery.dataTables.min.js"&gt;&lt;/script&gt;
      &lt;!-- &lt;script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"&gt;&lt;/script&gt;--&gt;
      &lt;script type="text/javascript"&gt;
        wp.include("menu");
      &lt;/script&gt;
  
  
    &lt;/head&gt;
    &lt;!--Confirm Modal to naviagate to APP--&gt;
    &lt;div id="navigateConfirm" class="modal fade" tabindex="-1" role="dialog"&gt;
      &lt;div class="modal-dialog modal-dialog-centered"&gt;
        &lt;form&gt;
          &lt;div class="modal-content warning-block"&gt;
            &lt;div class="header"&gt;
              &lt;h6&gt;Confirmation&lt;/h6&gt;
            &lt;/div&gt;
            &lt;div class="content"&gt;
              &lt;p class="d-inline-block my-md-2 mt-0 medium p-0"&gt;You are navigating out of iStore. Any pending changes will be lost. Continue ?&lt;/p&gt;
              &lt;div class="modal-footer"&gt;
                &lt;button class="button-secondary" data-dismiss="modal" id="navigateConfirmYes"&gt;YES&lt;/button&gt;
                &lt;button type="submit" class="button-primary" data-dismiss="modal"&gt;NO&lt;/button&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/form&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;head&gt;
  
  
      &lt;div class="primary-header"&gt;
        &lt;nav class="row navbar"&gt;
          &lt;a class="navbar-brand d-flex"&gt;
            &lt;img src="images/logo.svg" alt="Logo" id="navigateAPP" /&gt;
            &lt;p class="header p-0" onclick="#"&gt;TEST Store&lt;/p&gt;
          &lt;/a&gt;
      &lt;/div&gt;
      &lt;/nav&gt;
      &lt;/div&gt;
      &lt;script LANGUAGE="javascript"&gt;
        $("#navigateAPP").click(function(event) {
          $('#navigateConfirm').modal('show');
        });
  
        $("#navigateConfirmYes").click(function(event) {
          window.location.href = document.getElementById("returnUrl").value;
        });
      &lt;/script&gt;
  
  
      &lt;div class="row m-0"&gt;
        &lt;div class="col-lg-6 deliveryOps p-0 pr-lg-1"&gt;
          &lt;div class="cartCard py-3"&gt;
            &lt;div class="row"&gt;
              &lt;div class="formField mb-0 col-12 col-md-6 col-lg-12"&gt;
  
                &lt;input type="text" name="ibeforedate" id="ibeforedate" class="datepicker" placeholder="Example: 31-DEC-1999" autocomplete="off" required onChange="this.value = datecheck(this.value,'DD-MON-RRRR');" readonly&gt;
  
                &lt;label class="input_label medium"&gt;Request Delivery Date&lt;/label&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>`</p>
  
  <p>When user clicks on logo.svg, navigateAPP modal window should popup
  at the same we have one datefield.</p>
  
  <p>Now the issue is, if i use  <code>&lt;script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"&gt;&lt;/script&gt;</code>
  I am able to open date calendar and select the date from the calender. But when i click on logo.svg, navigateAPP modal window is not appearing.</p>
  
  <p>When i uncomment the jquery-ui.js, able to see modal window but datepicker is not working. </p>
  
  <p>How to make both the things work.</p>
  
  <p>Thanks</p>