Jquery Datepicker doesn`t pop up inside form element-CodePudding

I need a quick help. I stuck on a problem with my jquery datepicker...

My code to insert the datepicker looks like:

<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
  <script>
  $(document).ready(function () {
      $(".datepicker").datepicker();
    });
    </script>

Now i want to pop up the datepicker with the following code:

<form action="indexdev.php?s" method="GET">
<table >
          <tbody>
            <tr>
              <td >date: <input type="hidden" name="test" value="">
                <input type="text" name="s"
                   value="" id="dp"></td>
              <td ><input type="submit"></td>
              <td ></td>
            </tr>
          </tbody>
        </table>
      </form>

Hopefully you guys can help me... :D Cheers!

CodePudding user response：

Fixed. My best regards. Cleaned up a bit of code for the snipet and organized the structure of your cdn imports. To solve: remove the value and unused css classes of the input. Added id aproach.

      <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
<table >
          <tbody>
            <tr>
              <td >date:
                <input type="text" id="dp"></td>
              <td ><input type="submit"></td>
            </tr>
            <tr>
              <td >another date:
                <input type="text" ></td>
            </tr>
          </tbody>
        </table>
      
  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
  <script>
  $(document).ready(function () {
      $("#dp").datepicker();
      $(".datepicker").datepicker();
    });
    </script>