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):

enter image description here

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:

enter image description here

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?

I first tested it on IE and I got no issues. Then I tried it on Chrome and understood what you meant. — Alex Filipovici
– Alex Filipovici, Commented May 29, 2013 at 8:51

Alex Filipovici · Accepted Answer · 2013-05-29 09:06:56Z

6

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

edited May 29, 2013 at 9:06

answered May 29, 2013 at 8:48

Alex Filipovici

32.8k7 gold badges60 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

spiderman Over a year ago

thanks, your solution works perfect for showing the date ... but now I don't know how to Bind it (the Update doesn't do nothing)

spiderman · Accepted Answer · 2013-05-29 09:51:21Z

2

Ok, so the problem is that the HTML parser wants a Date formatted in the ISO 8601 standard.

Without the need to use a Custom format function in code behind, I ended up with this declarative markup:

<asp:TextBox ID="TextBoxEditStageDetailsDateStart" type="datetime-local" runat="server"
Text='<%# Bind("DateStart", "{0:yyyy-MM-ddTHH:mm:ss}") %>' CssClass="TextBoxDateTime"></asp:TextBox>

answered May 29, 2013 at 9:51

spiderman

1,5952 gold badges17 silver badges39 bronze badges

1 Comment

Simon Mourier Over a year ago

This is the standard format 's': msdn.microsoft.com/en-us/library/… so you could just use {0:s}

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related