Search code examples
htmljquerydatedatepicker

Jquery Datepicker doesn`t pop up inside form element


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... :D 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>