layui table中添加时间选择器

要在Layui table中添加时间选择器，可以使用Layui自带的laydate模块。

首先，在HTML中引入laydate的CSS和JS文件。然后，在表格中设置一个列，用来显示时间选择器，比如：

<table id="demo" lay-filter="test"></table>
<script type="text/html" id="timeTpl">
  <input type="text" name="time" class="layui-input test-item" lay-verify="date" lay-date="{{d.time}}">
</script>

在JavaScript中，定义表格的数据和列的配置，其中需要设置time列的templet为时间选择器的模板：

layui.use(['table', 'laydate'], function(){
  var table = layui.table;
  var laydate = layui.laydate;
  
  //定义表格的列
  var cols = [[
    {field: 'id', title: 'ID', width:80, sort:true},
    {field: 'username', title: '用户名', width:120},
    {field: 'email', title: '邮箱', width:200},
    {field: 'time', title: '时间', width:200, templet: '#timeTpl'}
  ]];

  //定义表格的数据
  var data = [{
    id: 1,
    username: '张三',
    email: 'zhangsan@example.com',
    time: '2021-01-01'
  }, {
    id: 2,
    username: '李四',
    email: 'lisi@example.com',
    time: '2021-01-02'
  }, {
    id: 3,
    username: '王五',
    email: 'wangwu@example.com',
    time: '2021-01-03'
  }];

  //渲染表格
  table.render({
    elem: '#demo',
    data: data,
    cols: cols
  });

  //渲染时间选择器
  laydate.render({
    elem: '.test-item',
    type: 'datetime'
  });
});

上面的代码中，我们使用laydate.render()方法来渲染时间选择器，传入的参数是选择器的类名，也就是我们在模板中定义的test-item类名。同时，我们还设置了时间选择器的类型为datetime，表示包含日期和时间。