CODEWITHSUNDEEP
javascriptjquerydatatabledatepicker
user3733831
user3733831

Reputation: 2936

Instantiating datepicker in jQuery datatables

I have a jquery datatable with a column of text input filed. What I want is to integrate a datepicker for this input.

But my datepicker is not working for this input as usual. So I tried it with the createdRow callback in datatables, something like below:

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'
});

Can somebody help me to right direction?

Upvotes: 0

Views: 2282

Answers (1)

Swati
Swati

Reputation: 28522

You can use $(row).find(".datepicker")[0] here we are simply getting datepicker reference from the current row and then pass this to your TinyDatePicker .

Demo Code:

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>

Upvotes: 1

Related Questions