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

I don't know if it has been asked before, couldn't find it either.

Is it possible to control the type of the input text that is rendered by an asp:TextBox? I would like to change it to <input type="date">

any suggestions or comments are welcome, thanks

Answers


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


I know this question is old, but I was having the same issue in a Web Forms application. You need to use TextMode

While the documentation states that

Use the TextMode property to specify how a TextBox control is displayed. Three common options are single-line, multiline, or password text box.

You can also use html5, date, time, number, etc built in Visual Studio 2012/2013.

https://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.textbox.textmode(v=vs.110).aspx


I went the route of building my own set of html5 inputs by building custom controls. I get the custom keyboards on iPad and iPhone plus the postback coding of true asp.net controls. It worked for my inhouse project, so I decided to license the whole suite to save other people the time and trouble of doing it from scratch.

Hope this helps!


Actually there is no easy way to override the type attribute in standart asp:TextBox. You can simly use an input element

Here is an example

<input type="date" id="Input1" runat="server" />

Let me know if it helps...


Need Your Help

Lambda, calling itself into the lambda definition

python functional-programming lambda

I'm doing a complicated hack in Python, it's a problem when you mix for+lambda+*args (don't do this at home kids), the boring details can be omited, the unique solution I found to resolve the probl...

get short sha of commit with gitpython

python git gitpython

The long SHA can be gotten like below: