如何在jQuery Datatables中为表格输入框实例化tiny-date-picker

架构老林

2026-10-15

问题根因

你的实现逻辑核心问题有两个：

tiny-date-picker要求传入原生DOM元素作为挂载目标，你代码中传入的是jQuery包装后的节点对象，组件无法识别
未做重复初始化防护，datatable排序、过滤、分页重绘行时，会重复给同一个输入框绑定日期选择器，引发异常

修正后的实现代码

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) {
    const $dateInput = $(".datepicker", row);
    // 已经初始化过的输入框跳过处理
    if ($dateInput.hasClass('dp-initialized')) return;

    const TinyDatePicker = DateRangePicker.TinyDatePicker;
    // 取原生DOM节点传入，同时添加初始化标记避免重复绑定
    TinyDatePicker($dateInput.addClass('dp-initialized')[0], {
      format(date) {
        return date.toLocaleDateString("fr-CA");
      },
      // 可选：选择日期后同步数据到datatable数据源，避免分页/排序后选择的日期丢失
      onChange: (_, dp) => {
        const rowIndex = thistable.row(row).index();
        thistable.cell(rowIndex, 2).data(dp.selectedDate.toLocaleDateString("fr-CA")).draw(false);
      }
    })
  },
  dom: 'frtip'
});