在 jQuery 个数据表中实例化日期选择器

Question

我有一个 jquery 数据表，其中有一列文本输入字段。我想要的是为这个输入集成一个日期选择器。

但是我的 datepicker 无法像往常一样处理此输入。所以我在数据表中使用 createdRow 回调进行了尝试，如下所示：

var col = [
  {data:"first_name","width":"100px"},
  {data:"last_name"},
  {data:"start_date", 
   render: function (data){
       return "<input type='text' class='datepicker' value='" + data + "'/>"
   }}
];

var thistable  = $('#example1').DataTable( {
 data:dataSet,
 select:{style:'single'},
  columns:col,
  createdRow:function(row){
    var TinyDatePicker = DateRangePicker.TinyDatePicker;
    TinyDatePicker($(".datepicker", row), {
      //mode: 'dp-below',
      format(date) {
        return date.toLocaleDateString("fr-CA");
      },
    })
  },
  dom: 'frtip'
});

有人可以帮助我找到正确的方向吗？

Answer 1

您可以在此处使用 $(row).find(".datepicker")[0] 我们只是从当前行获取日期选择器引用，然后将其传递给您的 TinyDatePicker。

演示代码:

var col = [{
    data: "first_name",
    "width": "100px"
  },
  {
    data: "last_name"
  },
  {
    data: "start_date",
    render: function(data) {
      return "<input type='text' class='datepicker' value='" + data + "'/>"
    }
  }, {
    data: "end_date",
    render: function(data) {
      return "<input type='text' class='datepicker' value='" + data + "'/>"
    }
  }
];

var thistable = $('#example').DataTable({
  data: [{
    "first_name": "ABC",
    "last_name": "xyz",
    "start_date": "2021-06-17",
    "end_date": "2021-06-21"
  }, {
    "first_name": "MNO",
    "last_name": "pqr",
    "start_date": "2021-08-20",
    "end_date": "2021-08-21"
  }],
  select: {
    style: 'single'
  },
  columns: col,
  createdRow: function(row) {
    var to_date = $(row).find(".datepicker") //get the datepicker..from that html
    var TinyDatePicker = DateRangePicker.TinyDatePicker;
    //pass here
    to_date.each(function() {
      TinyDatePicker($(this)[0], {
        mode: 'dp-below',
        format(date) {
          return date.toLocaleDateString("fr-CA");
        },
      })
    })

  },
  dom: 'frtip'

});

<link href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tiny-date-picker/3.2.8/tiny-date-picker.min.css" integrity="sha512-XcVC+nlwCXmH65gjIlz5Lx57HnQlmsL+7fodw4dnbGO0Nto2upjBQuFJGbnzvZrhwBxYY3CwRTRxAlpu+raOmg==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-date-picker/3.2.8/date-range-picker.js" integrity="sha512-SDTzsq3MW7igxEalqF5ZmjCCmB3u9EB6/+2tlh7O202zFKzrAQzH/47RPmWIePygWwRU93Odkyg5OnU45enFIw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-date-picker/3.2.8/tiny-date-picker.js" integrity="sha512-81caHXixVFIoMBwzWVOphLw5TDXsT+PVglggWRAiWdhQUaBhegldeH44KjRykOPx7l0xgL/ZPtIrKhGQgTnjjw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<table id="example" class="display" width="100%">
  <thead>
    <th>FIRST_NAME</th>
    <th>LAST_NAME</th>
    <th>START_DATE</th>
    <th>END_DATE</th>
  </thead>
  <tbody></tbody>
</table>

在 jQuery 个数据表中实例化日期选择器

Instantiating datepicker in jQuery datatables

javascript

datatable

jquery

datepicker