1

I am creating an employee reimbursement application with Java Servlets, Ajax, and Postgres Database. The server / Java side of the application works well. The problem is with vanilla JavaScript / Ajax via the Date() function in JavaScript.

When the employee creates a ticket, the date of submission gets set correctly, but the resolve date is set to null because there is no guarantee when the manager will get around to approving the request. At first the new ticket has a status of pending until the manager approves or denies the request, which will correspond to the resolve date.

Here is the problem the resolve date in the database has null values. The JavaScript Date() function does not know how to interpret a null value. Depending on weather I use new Date( the date inside the database).toDateString() or Date(the date inside the database), it will display all null values, or the epoch date (January 1, 1970), or today’s date for each ticket in the database, even with a valid date in the resolve date field inside the database.

I was willing to accept the epoch date but this date still shows with a valid date in the database’s resolve date field.

Here is the database itself: enter image description here

Here is the Ajax response: { `var JavaTicketData = xhttp.responseText; var andy = JSON.parse(JavaTicketData); var data = " ";

   for(let i = 0; i < andy.length; i++)
   {  
      data += "<tr class = 'suckerFish'>" +
      "<td class='sonOfSuckerFish'>" + andy[i].ticketNumber + "</td> " + 
      "<td class='sonOfSuckerFish'>" + andy[i].ticketsDescription +   "</td> " + 
      "<td class='sonOfSuckerFish'>" + andy[i].ticketsStatus + "</td> " +
      "<td class='sonOfSuckerFish'>" + andy[i].reimbursementAmount + "</td> "+
      "<td class='sonOfSuckerFish'>" + new  
                      Date(andy[i].dateSubmitted ).toDateString() + "</td> " + 
      "<td class='sonOfSuckerFish'>" + 
                      Date(andy[i].dateResolved).toDateString() + "</td> " + 
      "<td class='sonOfSuckerFish'>" + andy[i].reimbursementType + "</td> " + 
      "<td class='sonOfSuckerFish'>" + andy[i].employeeID + "</td></tr>";
   }
   
   let Outter = "<table id = 'AndreTable'><tr><th>Ticket Number</th><th>Ticket Description</th><th>Ticket Status</th>"
   + "<th>Reimbursement Amount </th><th>Date Submitted </th><th>Date Resolved </th> <th>Reimbursement Type </th>"
   + "<th> Employee ID </th> </tr>";
   
  
   
   document.getElementById("ManagerDisplay").innerHTML = Outter + data + "</table>";`

} Note: The datatype for my date fields inside the database are timestamps

enter image description here

When I use new Date(andy[i].dateResolved), it displays enter image description here

When I use new Date(andy[i].dateResolved).toDateString()

enter image description here

Andre Long
  • 31
  • 3
  • 1
    Does this answer your question? [How do I format a date in JavaScript?](https://stackoverflow.com/questions/3552461/how-do-i-format-a-date-in-javascript) – Heretic Monkey Sep 03 '22 at 21:39
  • 2
    Please reduce your question to the minimum required to demonstrate the issue. Don't post images, post text. Post the actual value being passed to `new Date(...)` (i.e. what does `andy[i].dateSubmitted` return?), the expected result and the actual result. – RobG Sep 04 '22 at 04:50
  • andy[i].dateSubmitted returns the date a ticket was submitted to be approved or denied, which works fine. The problem is with andy[i].dateResolved because it has a null value as input – Andre Long Sep 04 '22 at 17:32
  • What does Date() return when you give it a null date as input? (JavaScript) – Andre Long Sep 04 '22 at 17:33
  • How to format a date does not solve my problem – Andre Long Sep 04 '22 at 17:49
  • 1
    I cannot parse out your exact problem, but I suspect [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601) is your friend here. – Basil Bourque Sep 06 '22 at 01:44

1 Answers1

2

The problem was not with the JavaScript Date() function. In my Java class called "tickets" the constructor had the wrong data type, it had "String Type" instead of "Date dateResolved", I made the changes to the constructor in the "tickets" class itself and where ever I called that constructor in code and now both my "dateSubmitted" and "dateResolved" display on the web page.

Andre Long
  • 31
  • 3