Get date-time value instead of default dd/mm/yyyy –:– — on Edit

I have created a bootstrap Modal from which I am taking Debt information, now on debt creation, I don’t have a problem with dd/mm/yyyy –:– — as default (I can remove it using JS and put a placeholder) but when I edit the debt entry, i want to display the values entered instead..

Debt Entry

Editing of debt where I want date values like other fields

        <!-- edit Debt date -->
        <div class="form-group">
          <div class="input-group">
            <span class="input-group-addon"><i class="fa fa-calendar"><span style="font-size:1.2em;">Debt Date</span></i></span>
            <input class="form-control input-lg" type="datetime-local" id="editDebtDate" name="editDebtDate" required>      
          </div>
        </div>

       
        <!-- edit Return date -->
        <div class="form-group">
          <div class="input-group">
            <span class="input-group-addon"><i class="fa fa-hourglass"><span style="font-size:1.2em;">Return Date</span></i></span>
            <input class="form-control input-lg" type="datetime-local" id="editReturnDate" name="editReturnDate" required>      
          </div>
        </div>  

How I am getting other values using JS..

/*=============================================
EDIT Debt
=============================================*/

$(".tables").on("click", ".btnEditDebt", function(){
    var idDebt = $(this).attr("idDebt");
    var datum = new FormData();
    datum.append("idDebt", idDebt);
    $.ajax({
        url: "ajax/debt.ajax.php",
        method: "POST",
        data: datum,
        cache: false,
        contentType: false,
        processData: false,
        dataType:"json",
        success: function(answer){
            $("#editDebtor").val(answer["debtor"]);
            $("#editDebtAmount").val(answer["amount"]);
            $("#editDescription").val(answer["description"]);
            $("#editDebtDate").val(answer["debtDate"]);
            $("#editReturn").val(answer["returnDebt"]);
            $("#editReturnDate").val(answer["returnDate"]);
            $("#idDebt").val(answer["id"]);      
        }
        
    })
})

Ajax

if(isset($_POST["idDebt"])){

    $Debt = new AjaxDebt();
    $Debt -> idDebt = $_POST["idDebt"];
    $Debt -> ajaxEditDebt();
}

public $idDebt;

public function ajaxEditDebt(){

    $item = "id";
    $value = $this->idDebt;

    $answer = ControllerDebt::ctrShowDebt($item, $value);
    echo json_encode($answer);

}

This ctrShowDebt goes into database and return me the whole record. Returned Object

> {0: '8', 1: 'Test', 2: '2000', 3: 'Testing Debt', 4: '2022-01-18 23:08:00', 5: '2000', 6: '2022-01-25 23:08:00', 7: 'valid', 8: '2022-01-25 23:08:44', id: '8', debtor: 'Test', amount: '2000', description: 'Testing Debt', debtDate: '2022-01-18 23:08:00', …}
0: "8"
1: "Test"
2: "2000"
3: "Testing Debt"
4: "2022-01-18 23:08:00"
5: "2000"
6: "2022-01-25 23:08:00"
7: "valid"
8: "2022-01-25 23:08:44"
amount: "2000"
date: "2022-01-25 23:08:44"
debtDate: "2022-01-18 23:08:00"
debtor: "Test"
description: "Testing Debt"
id: "8"
returnDate: "2022-01-25 23:08:00"
returnDebt: "2000"
status: "valid"

Answer

Although the input returns the entered values in a local date and time format, the input (for setting the input field) still needs to be in a standardised format like shown below:

"yyy-mm-ddThh:mm:ss"

edd=document.getElementById("editDebtDate");
edd.value="2022-01-25T12:34";

edd.addEventListener("input",function(){
  console.log(edd.value); // =

})

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">



<input class="form-control input-lg" type="datetime-local" id="editDebtDate" name="editDebtDate">

So, in the case of your returned data you need to replace the " " with a "T" and you’re done:

$("#editDebtDate").val(answer.debtDate.replace(" ","T"))