JQuery DatePicker не работает в таблице

Question

jQuery Datepicker не работает в таблице. Я использую jquery datepicker v1.12.1 и датированную версию v1.10.20

Дата придет, но дата не выбрана, даты не выбрал .. япросто хочу показать текущую дату в этом столбце, используя указатель даты.

Fiddle

$(document).ready(function() {
    $("#rcpt_vochDate").datepicker({ dateFormat: "dd/mm/yy" }).datepicker("setDate", new Date());
});

$(document).ready(function() {
  $('table').on('focus', 'input.tableJ:not(.hasDatepicker)', function() {
    $('.tableJ').datepicker();
  });
});

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css" />
  <script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.js"></script>
<div class="col-md-12 table-responsive">
  <table id="example1" class="table table-bordered table-striped">
    <thead>
      <tr>
        <th class="text-center">
          Narration*
        </th>
        <th class="text-center">
          Debit*
        </th>
        <th class="text-center">
          Credit
        </th>
        <th class="text-center">
          Realise*
        </th>
        <th class="text-center">
          Real.Date*
        </th>
      </tr>
    </thead>
    <tbody>
      <tr id="rcpt_mainrow">
        <td>
          <input type="text" id="br_narrate" placeholder='Some Text here' class="form-control" readonly />
        </td>
        <td>
          <input type="number" id="rcptDebit" value="" placeholder='Debit Amount' data-action="sumDebit" class="form-control" readonly />

        </td>
        <td>
          <input type="number" id="rcptCredit" placeholder='Credit Amount' data-action="sumCredit" class="form-control" readonly />
        </td>
        <td>
          <input type="checkbox" id="tableCbox" name="tableCheck" value="yes">
          <label class="tableBox" for="tableCbox"></label>
        </td>
        <td>
          <input type="text" class="form-control tableJ" id="rcpt_vochDate" />
        </td>
      </tr>
    </tbody>
  </table>
</div>

Fiddle

я просто хочу показать текущую дату в этом столбце с помощью указателя даты.

Answer 1

Пожалуйста, попробуйте этот код, чтобы добавить указатель даты:

$(document).ready(function() {
    $("#rcpt_vochDate").datepicker({ dateFormat: "dd/mm/yy" }).datepicker("setDate", new Date());
});

$(document).ready(function() {
  $('table').on('focus', 'input.tableJ:not(.hasDatepicker)', function() {
    $('.tableJ').datepicker();
  });
});

 <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.12.1/themes/ui-lightness/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="col-md-12 table-responsive">
  <table id="example1" class="table table-bordered table-striped">
    <thead>
      <tr>
        <th class="text-center">
          Narration*
        </th>
        <th class="text-center">
          Debit*
        </th>
        <th class="text-center">
          Credit
        </th>
        <th class="text-center">
          Realise*
        </th>
        <th class="text-center">
          Real.Date*
        </th>
      </tr>
    </thead>
    <tbody>
      <tr id="rcpt_mainrow">
        <td>
          <input type="text" id="br_narrate" placeholder='Some Text here' class="form-control" readonly />
        </td>
        <td>
          <input type="number" id="rcptDebit" value="" placeholder='Debit Amount' data-action="sumDebit" class="form-control" readonly />

        </td>
        <td>
          <input type="number" id="rcptCredit" placeholder='Credit Amount' data-action="sumCredit" class="form-control" readonly />
        </td>
        <td>
          <input type="checkbox" id="tableCbox" name="tableCheck" value="yes">
          <label class="tableBox" for="tableCbox"></label>
        </td>
        <td>
          <input type="text" class="form-control tableJ" id="rcpt_vochDate" />
        </td>
      </tr>
    </tbody>
  </table>
</div>

Надеюсь, приведенный выше код будет вам полезен. Спасибо.

Answer 2

В нашем head

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>