Render asp.TextBox for html5 input type="date" Render asp.TextBox for html5 input type="date" asp.net asp.net

Render asp.TextBox for html5 input type="date"


There is an update for .NET framework 4 which allows you to specify the type attribute

http://support.microsoft.com/kb/2468871.

See feature 3 way down the page

Feature 3

New syntax lets you define a TextBox control that is HTML5 compatible. For example, the following code defines a TextBox control that is HTML5 compatible:

<asp:TextBox runat="server" type="some-HTML5-type" />


If you don't mind subclassing, you can do this by overidding AddAttributesToRender

public class DateTextbox : System.Web.UI.WebControls.TextBox{    protected override void AddAttributesToRender(System.Web.UI.HtmlTextWriter writer)    {        writer.AddAttribute("type", "date");        base.AddAttributesToRender(writer);    }}


Here is how I did it... hope it helps...

Add a new item to your project of the type "JScript File", then paste this code in:

var setNewType;if (!setNewType) {setNewType = window.onload = function() {    var a = document.getElementsByTagName('input');    for (var i = 0; i < a.length; i++) {        if (a[i].getAttribute('xtype')) {            a[i].setAttribute('type', a[i].getAttribute('xtype'));            a[i].removeAttribute('xtype');        };    }}

Now add this line into your aspx page after the body tag (change the file name to whatever you called it above!):
<script type="text/javascript" src="setNewType.js"></script>

Finally, add something like the following to your code behind PageLoad ( I used VB here):

aspTxtBxId.Attributes("xtype") = "tel" ' or whatever you want it to be

The important part above is the Attributes.("xtype"), as it places the attribute XTYPE in the rendered html for the "textbox", which the javascript then finds and uses to replace the original "type" attribute.

Good Luck!
FJF