Text does not show in html input date on a modal f…

Problem: the Enter Date field of the modal form does not populate with data.

I have a modal form that opens up when I click on Edit on a record line. When the form opens up the “Enter Date” date does not fill up with the pre-existing date from the main screen, instead it populates with “mm/dd/yyyy”. All other fields get populated with their respective data. How can I make that Enter Date field populate with data from the record? FYI, everything works fine, except when I click on update since the Enter Date field does not populate I get an error when the SQL stored procedure is called because the Enter Date does not have a value or is null or something like that.
I would like not to change the datatypes as I finally got the main screen to populate the date field as mm/dd/yyyy and not in other unwanted, unknown or weird formats. The code I have is the below. Thank you in advance for your help.

MODEL

public string ITEnterDate { get; set; }

CONTROLLER

public JsonResult GetTaskByTicketNumber(int id)
        {
            HelpDeskDBHandle hdDB = new HelpDeskDBHandle();
            var ITNumber = hdDB.GetITTasksList().Find(x => 
                                                          x.ITNumber.Equals(id));
            return Json(ITNumber, JsonRequestBehavior.AllowGet);
        }

MODAL FORM(VIEW)

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label for="ITEnterDate">Enter Date</label>
                        <input type="date" class="form-control" id="ITEnterDate" 
                                                               placeholder="Enter                                                                                                                                                             
                                                                         Date" />
                    </div>
                    .......

                </form>
            </div>
            
<div class="modal-footer">
                <button type="button" class="btn btn-primary" id="btnUpdate" 
                                                            style="display:none;"                                                                                                                       
                                        onclick="UpdateItTask();">Update</button>
            </div>
        </div>
    </div>
</div>

JAVASCRIPT: MAIN PAGE LOAD DATA WITH EDIT BUTTON

$(document).ready(function () {
    loadData();
});

//Load Data function
function loadData() {
    $.ajax({
        url: "/Tickets/ListITTasks",
        type: "GET",
        contentType: "application/json;charset=utf-8",
        dataType: "json",
        success: function (result) {
            var html = '';
            $.each(result, function (key, item) {
                html += '<tr>';
                html += '<td>' + item.ITNumber + '</td>';
                html += '<td>' + item.ITEnterDate + '</td>';
                ......

             html += '<td><a href="#" onclick="return getbyTicketNumber(' + 
                    item.ITNumber +             
               ')">Edit</a> | <a href="#" onclick="DeleteItTask(' + item.ITNumber 
                    + ')">Delete</a></td>';
                html += '</tr>';
            });
            $('.tbody').html(html);
        },
        error: function (errormessage) {
            alert(errormessage.responseText);
        }
    });
}


function getbyTicketNumber(TicketNumber) {
    $('#ITEnterDate').css('border-color', 'lightgrey');
    .....

    $.ajax({
        url: "/Tickets/GetTaskByTicketNumber/" + TicketNumber,
        typr: "GET",
        contentType: "application/json;charset=UTF-8",
        dataType: "json",
        success: function (result) {
            $('#ITNum').val(result.ITNumber);
            $('#ITEnterDate').val(result.ITEnterDate);
            .....

            $('#myModal').modal('show');
            $('#btnUpdate').show();
        },
        error: function (errormessage) {
            alert(errormessage.responseText);
        }
    });
    return false;
}

Answer

You need to format your date to YYYY-MM-DD, so that 08/02/2020 would be 2020-08-02.

From the documentation:

The displayed date format will differ from the actual value — the displayed date is formatted based on the locale of the user’s browser, but the parsed value is always formatted yyyy-mm-dd.

Text does not show in html input date on a modal form

Advertisement

Answer