Date returned from ASP.NET Core API not populated into HTML input field using jquery

Question

I am trying to test a simple application that consumes a AST.NET Core Web API using jquery (and html). The value is returned from the API but does not show up on the page. Here is the Resource Model class:

public class Resource
    {
        [Key]
        [DatabaseGenerated(DatabaseGeneratedOption.Identity)]
        public int ResourceId { get; set; }
        [Required]
        [Display(Name = "Last Name")]
        public string Lastname { get; set; }
        [Required]
        [Display(Name = "First Name")]
        public string Firstname { get; set; }
        [Display(Name = "Middle Name")]
        public string Middlename { get; set; }
        [Required]
        [DataType(DataType.Date)]
        [DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)]
        [Display(Name = "Hire Date")]
        public DateTime Hiredate { get; set; }
        [DataType(DataType.Date)]
        [DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)]
        [Display(Name = "Term Date")]
        public DateTime? Termdate { get; set; }

        public string ProfilePhotoPath { get; set; }

    }

Below is the code in jquery to get the resource information:

function GetReservation() {
            //console.log((new URL(document.location)).searchParams);
        let params = (new URL(document.location)).searchParams;
        let id = params.get("id");
 
        $.ajax({
            url: "https://localhost:44364/api/resources/" + id,
            type: "get",
            contentType: "application/json",
            success: function (result, status, xhr) {
                console.log(new Date(result["hiredate"].slice(0,10)));
                $("#LastName").val(result["lastname"]);
                $("#FirstName").val(result["firstname"]);
                $("#MiddleName").val(result["middlename"]);
                $("#HireDate").val(new Date(result["hiredate"].slice(0, 10)).Date);
                $("#TermDate").val(new Date(result["termdate"].slice(0, 10)).Date);
            },
            error: function (xhr, status, error) {
                console.log(xhr)
            }
        });
    }

The hire date value returned from resource is shown in console as: Tue May 30 2017 20:00:00 GMT-0400 (Eastern Daylight Time)

But the page does not show the hire date. It keeps showing text as "mm/dd/yyyy"

Answer 1

Thanks for the responses! Rory McCrossan, I was able to use the information to use Intl.DateTimeFormat to get the result I need. Here is the updated code that shows me the correct date on my web page:

function GetReservation() {
            //console.log((new URL(document.location)).searchParams);
        let params = (new URL(document.location)).searchParams;
        let id = params.get("id");
 
        $.ajax({
            url: "https://localhost:44364/api/resources/" + id,
            type: "get",
            contentType: "application/json",
            success: function (result, status, xhr) {
                
                $("#LastName").val(result["lastname"]);
                $("#FirstName").val(result["firstname"]);
                $("#MiddleName").val(result["middlename"]);
                $("#HireDate").val(new Intl.DateTimeFormat('en-CA').format(new Date((result["hiredate"]).slice(0,10))));
                $("#TermDate").val(new Intl.DateTimeFormat('en-CA').format(new Date((result["termdate"]).slice(0,10))));
            },
            error: function (xhr, status, error) {
                console.log(xhr)
            }
        });
    }