Instantiating datepicker in jQuery datatables

Question

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?

Swati · Accepted Answer · 2021-06-25 13:48:56Z

1

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>

edited Jun 25, 2021 at 13:48

answered Jun 25, 2021 at 13:01

Swati

28.5k4 gold badges26 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user3733831 Over a year ago

Swati, Thank you. It working properly. One thing, how can we modify this for two .datepicker columns? I tried it something like this, but its not working.

$('.datepicker').each(function() {           //intialize..them           TinyDatePicker($(this)[0], {             //mode: 'dp-below',             format(date) {               return date.toLocaleDateString("fr-CA");             },           })         });

user3733831 Over a year ago

Yes its worked. Thank you. I too tried it changing these two lines like this. It is also worked. var to_date = $(row).find(".datepicker").get(); and $(to_date).each(function() {

Collectives™ on Stack Overflow

Instantiating datepicker in jQuery datatables

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related