Datatables onchange event for input field - datatables

Question

I have input fields in my project with a special class (date_input_field). On change these fields format the data that user has entered. The problem is that these fields work fine absolutely everywhere EXCEPT DataTables. I tried rowCallback in my datatable itself, but it didn't help. Why? And how can I fix that?
$(".date_input_field").change(function () {
...format the data
});
var table2 = $("#stopsTable").DataTable({
ajax: {
url: "/api/stops/" + confirmationId,
dataSrc: ""
},
columns: [
{
data: "date1",
render: function (data) {
var arr = data.split("T")[0].split("-");
return "<input class='form-control date_input_field' type='text' value='" + arr[2] + "-" + arr[1] + "-" + arr[0]+"'/>" ;}}
],
order: [[0, "asc"]],
scrollY: '50vh',
scrollCollapse: true,
paging: false,
rowCallback: function (row, data) {
$(row).css("cursor", "pointer");
$(".date_input_field").change(function () {
$(this).attr("value", "01");
});
}
});

Answer 1

Sorry for stupid question.
I tried the code below and it works.
rowCallback: function (row, data) {
$(row).css("cursor", "pointer");
$(row).on("change", ".date_input_field", function () {
var input = $(this);
input.val("1111111111");
});
}

Answer 2

when the user edits the input on the cell this will console log the edited field with its input id rowCallback is the function which can trigger / perform on any cell inside the datatable
var datatable = $('#datatable').DataTable({
rowCallback: function (row, data) {
$(row).on("change", ".edit_qty_class", function () {
var input = $(this);
input.attr('value', input.val())
console.log()
console.log($(this).attr('id'), input.val())
});
},
columns: [{
data: "id",
render: function(data, type, full, meta) {
return meta.row + 1
}
},
{
data: "id",
title:"QTY SEND",
render: function(data, type, full, meta) {
var dataID = 'edit_qty_' + data.id
return `<input type="number" id="`+dataID+`" name="`+dataID+`" class="edit_qty_class" value="0">`
}
},
})