Using the DatePicker and Calender Extender with Mobile Devices

Using the DatePicker and Calender Extender with Mobile Devices on your website

I ran into a few issues when ing the AJAX CalenderExtender on my IPhone. It kind of works, but felt a little clunky considering there is a built in Date Picker for applications. I tend to design all of my sites as one, with selectable skins for Mobile or Desktop, so this I thought could be a bit of an issue.

Since IOS 5 Safari has had native support for HTML date tags.

Now when using a Calender Extender I have seen a lot of people run into issues after postbacks. This is due to the ViewState of the text box, and the JavaScript. I have seen numerous ways of getting around this the two main ways are to set it as read only, and the other is to insert your code inside an Update Panel. I tend to use the latter, as the user can type in the box if they want (You could add the Masked Edit Extender for example).

This is the code I use, don't forget if you use this you will need to add the Toolkit Script Manager.

HTML

<div class="ControlArea"><asp:UpdatePanel ID="UpdatePanel2" runat="server">  <ContentTemplate>  <asp:Label ID="Label1" runat="server" Text="Date To From" CssClass="LabelLeft400"><asp:Label>  <asp:TextBox id="DateFrom" runat="server" AutoPostBack="True"><asp:TextBox>  <asp:CalendarExtender ID="DateFrom_CalendarExtender" runat="server"  Enabled="True" TargetControlID="DateFrom" ClearTime="True"  PopupPosition="TopRight" Format="dd MMM yyyy">  <asp:CalendarExtender>  <asp:TextBox id="DateTo" runat="server" AutoPostBack="True"><asp:TextBox>  <asp:CalendarExtender ID="DateTo_CalendarExtender" runat="server"  Enabled="True" TargetControlID="DateTo" ClearTime="True"  PopupPosition="TopRight" Format="dd MMM yyyy">  <asp:CalendarExtender>  <ContentTemplate><asp:UpdatePanel><div>

In your code behind, you will need something similar to this, which turns off the Calender Extender and Auto Postback for Mobile Devices (I may extend it further to certain devices), and adds the HTML5 Input Type of Date. See W3 Schools for more info.

VB

Dim df As Date = DateSerial(Year(Today()) - 1, 1, 1)Dim dt As Date = DateSerial(Year(Today()) - 1, 12, 31)DateFrom.Text = Format(df, "dd MMM yyyy")DateTo.Text = Format(dt, "dd MMM yyyy")If Request.Browser.IsMobileDevice Then  DateFrom_CalendarExtender.Enabled = False  DateFrom.AutoPostBack = False  DateTo_CalendarExtender.Enabled = False  DateTo.AutoPostBack = False  DateFrom.Attributes.Add("Type", "Date")  DateTo.Attributes.Add("Type", "Date")ElseEnd If

And that is it, it on the IPhone and it will come up with the native date picker, and desktop devices will use the Java version. No need for additional plugins or too much code.

Website design by Claytabase

This is a section of code that has been modified from Ousia Content Management System code, one of the quickest and most optimised systems on the market, part of our website design services.

These are available with sites starting at around £500.

more: Responsive and fast. Web Development, Design and Hosting with Content Management System