Jquery Datepicker doesn`t pop up inside form element

August 5, 2022

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 class="table">
          <tbody>
            <tr>
              <td class="col-sm-3">date: <input type="hidden" name="test" value="">
                <input type="text" name="s"
                  class="datepicker hasDatepicker" value="" id="dp"></td>
              <td class="col-sm-3"><input type="submit"></td>
              <td class="col-sm-3"></td>
            </tr>
          </tbody>
        </table>
      </form>

Hopefully you guys can help me… 😀 Cheers!

>Solution :

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 class="table">
          <tbody>
            <tr>
              <td class="col-sm-3">date:
                <input type="text" id="dp"></td>
              <td class="col-sm-3"><input type="submit"></td>
            </tr>
            <tr>
              <td class="col-sm-3">another date:
                <input type="text" class="datepicker"></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>