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; }
Advertisement
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.