在数据表中单击按钮时将表列更改为 jquery 日历

Question

我有以下数据表：

代码如下：

HTML：

 <table id="rentals" class="table table-bordered table-hover">
        <thead  bgcolor="#ADD8E6">
        <tr>                   

            <th>Book Name</th>
            <th>Date Rented</th>
            <th>Estimated Return Date</th>
            <th></th>

        </tr>
        </thead>
        <tbody>              
        </tbody>
    </table>

Javascript

table = $("#rentals").DataTable({
    ajax: {
              url: query,
              dataSrc: ""
          },

          columns: [
                    {
                        {
                        data: "book.title"
                    },
                    {
                        data: "dateRented",
                        render: function (data) {
                            returnDate = data;
                    },
                     {
                        data: "estimatedReturnDate",
                        render: function (data) {
                                var date = new Date(data);
                                var month = date.getMonth() + 1;
                                var day = date.getDay();
                            return date.getDate() + "/" + month + "/" + date.getFullYear();
                     }
          ]
});

我希望“估计返回日期”列更改为 jquery datepicker，当用户单击“单击我”按钮时，默认值等于该列的日期值，并在用户单击时更改回文本字段让我们说一个取消按钮。

我怎样才能做到这一点？

Answer 1

我认为一个简单的事件监听器应该可以完成这项工作。试试这个：

$(document).on('click','button',function(){
  var td = $(this).closest('tr').find('.date');
  var picker = td.find('.datepicker');
  if(picker.length){
     td.html(picker.val());
  }else{
      td.html('<input class="datepicker" value='+td.text()+'>');
      var picker = td.find('.datepicker');
      picker.datepicker();
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>

<table id="rentals" class="table table-bordered table-hover">
        <thead  bgcolor="#ADD8E6">
        <tr>                   
            <th>Book Name</th>
            <th>Date Rented</th>
            <th>Estimated Return Date</th>
            <th></th>

        </tr>
        </thead>
        <tbody>
            <tr>
                <td>Book</td>
                <td>20/12/2017</td>
                <td class='date'>20/12/2017</td>
                <td><button>Click me</button></td>
            </tr>
        </tbody>
    </table>