html5 input type datetime value not showing on ASP.NET webform

Question

Edit I have an Asp.Net FormView, with an itemtemplate:

 <asp:TemplateField HeaderText="DateStart" SortExpression="DateStart">
                    <EditItemTemplate>
                        <asp:TextBox ID="TextBoxEditStageDetailsDateStart" type="datetime-local" runat="server"
                            Text='<%# Bind("DateStart") %>' CssClass="TextBoxDateTime"></asp:TextBox>
                    </EditItemTemplate>
                    <ItemTemplate>
                        <asp:Label ID="Label1" runat="server" Text='<%# Bind("DateStart") %>'></asp:Label>
                    </ItemTemplate>
                    <ControlStyle Width="160px" />
                </asp:TemplateField>

When the Form is in View Mode, the date is correctly showed (of course when the date is set):

However, when the Form change in Edit Mode, the input with type="datetime-local" is showed but is empty, requiring the user to choose a new date. This is the Popup showed:

However, as I can see inspecting the generated html source, the value is correctly set...

<input name="ctl00$MainContent$StageDetailsView$TextBoxEditStageDetailsDateStart" value="28/05/2013 10:00:00" id="MainContent_StageDetailsView_TextBoxEditStageDetailsDateStart" class="TextBoxDateTime" type="datetime-local" style="width:160px;">

So two problems: first is that in Edit mode, I am not able to see what the actual value is; second if I only want to change the day or hour I have to re-enter the whole date...

My question is: Is this the Html5 planned behaviour or I am missing something?

Answer 1

According to the W3 specification:

value = local date and time

A string representing a local date and time. The following parts, in exactly the following order:

• A date.
• The literal string "T".
• A time.

Example:

1985-04-12T23:20:50.52

1996-12-19T16:39:57

So, in your case:

value="2013-05-28T10:00:00"

will work.

[UPDATE]

You may use the following aspx markup:

<asp:TemplateField HeaderText="DateStart" SortExpression="DateStart">
    <EditItemTemplate>
        <asp:TextBox ID="TextBoxEditStageDetailsDateStart" type="datetime-local" runat="server"
            Text='<%# GetFormattedDate(Eval("DateStart")) %>' CssClass="TextBoxDateTime"></asp:TextBox>
    </EditItemTemplate>
    <ItemTemplate>
        <asp:Label ID="Label1" runat="server" Text='<%# Bind("DateStart") %>'></asp:Label>
    </ItemTemplate>
    <ControlStyle Width="160px" />
</asp:TemplateField>

In your code behind, define the following method:

protected string GetFormattedDate(object dateTimeObject)
{
    DateTime dateTime;
    if (DateTime.TryParse(dateTimeObject.ToString(), out dateTime))
    {
        return String.Format("{0}-{1}-{2}T{3}:{4}:{5}",
            dateTime.Year,
            dateTime.Month.ToString().PadLeft(2, '0'),
            dateTime.Day.ToString().PadLeft(2, '0'),
            dateTime.Hour.ToString().PadLeft(2, '0'),
            dateTime.Minute.ToString().PadLeft(2, '0'),
            dateTime.Second.ToString().PadLeft(2, '0')
            );
    }
    return null;
}