Utilizzo di DatePicker e Calender Extender con dispositivi mobili

Utilizzo di DatePicker e Calender Extender con dispositivi mobili sul tuo sito web

Ho riscontrato alcuni problemi durante l'installazione di AJAX CalenderExtender sul mio iPhone. In un certo senso funziona, ma mi è sembrato un po' goffo considerando che c'è un selettore di date integrato per le applicazioni. Tendo a progettare tutti i miei siti come uno, con skin selezionabili per dispositivi mobili o desktop, quindi ho pensato che potesse essere un po' un problema.

Da IOS 5 Safari ha il supporto nativo per i tag di data HTML.

Ora, quando utilizzo un Calender Extender, ho visto molte persone riscontrare problemi dopo i postback. Ciò è dovuto al ViewState della casella di testo e al JavaScript. Ho visto numerosi modi per aggirare questo problema, i due modi principali sono impostarlo come di sola lettura e l'altro è inserire il codice all'interno di un pannello di aggiornamento. Tendo a usare quest'ultimo, poiché l'utente può digitare nella casella se lo desidera (ad esempio, potresti aggiungere Masked Edit Extender).

Questo è il codice che uso, non dimenticare che se lo usi dovrai aggiungere il 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>

Nel tuo codice sottostante, avrai bisogno di qualcosa di simile a questo, che disattiva Calender Extender e Auto Postback per dispositivi mobili (potrei estenderlo ulteriormente a determinati dispositivi) e aggiunge il tipo di data di input HTML5. Vedi le scuole W3 per maggiori informazioni.

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

E questo e' quanto, sull'iphone e verra' su con il selezionatore di date nativo del telefono, mentre su desktop utilizzera' la versione JAVA. Senza la necessita' di plugins o di ulteriore codice.

Progettazione del sito Web di Claytabase

Questa è una sezione di codice che è stata modificata dal codice di Ousia Content Management System, uno dei sistemi più veloci e ottimizzati sul mercato, parte dei nostri servizi di progettazione di siti web.

Questi sono disponibili con siti a partire da circa £ 500.

altro: reattivo e veloce. Sviluppo Web, Design e Hosting con Content Management System