How to set value into HTML5 date field from Asp.Net MVC Razor?

Question

I found a similar question here but that do not work for my case. Please look at the screen shot below. When I render data in an Edit form, all data was set to the controls properly except the highlighted date field. When I inspect the element, I found that the value is there but for some reason it is not showing in the field.

Here is the code I used to set value into this date field. I tried both "yyyy-MM-dd" & "MM/dd/yyyy" format but none worked.

<td>Joining Date</td>
<td>
@{
   if(Model.JoiningDate != null)
   {
      <input id="txtJoiningDate" type="date" style="width: 100%;" value="@String.Format("{0:MM/dd/yyyy}",Model.JoiningDate.Value)" />
   }
   else
   {
      <input id="txtJoiningDate" type="date" style="width: 100%;" />
   }
}
</td>

Edit

Answer 1

Why instead you just use html helper as shown :-

@Html.TextBox("txtJoiningDate", Model.JoiningDate.Value ,"{0:yyyy-MM-dd}",new{ @style="width:100%", type="date" })