jquery datepicker 在表中不起作用

Question

jQuery Datepicker 不能在表中工作。我正在使用 jquery datepicker v1.12.1 和 datatable 版本 v1.10.20

日期会到来，但日期不会选择，没有选择日期。我只想使用 datepicker 在该列中显示当前日期。

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

我只想使用 datepicker 在该列中显示当前 日期。

Answer 1

在我们的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>

Answer 2

请尝试使用此代码添加日期选择器：

$(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>

我希望上面的代码对你有用。 谢谢。