モバイル デバイスでの DatePicker および Calender Extender の使用
Web サイトのモバイル デバイスで DatePicker と Calender Extender を使用する
IPhone で AJAX CalenderExtender を使用しているときに、いくつかの問題に遭遇しました。ある程度は機能しますが、アプリケーション用の日付ピッカーが組み込まれていることを考えると、少しぎこちなく感じました。私はすべてのサイトを 1 つにまとめてデザインする傾向があり、モバイルまたはデスクトップ用にスキンを選択できるので、これは少し問題になると思いました。
IOS 5 以降、Safari は HTML 日付タグをネイティブでサポートしています。
現在、Calender Extender を使用しているときに、ポストバック後に多くの人が問題に遭遇するのを見てきました。これは、テキスト ボックスの ViewState と JavaScript によるものです。これを回避する多くの方法を見てきましたが、主な 2 つの方法は読み取り専用に設定することであり、もう 1 つは更新パネル内にコードを挿入することです。ユーザーが必要に応じてボックスに入力できるため、私は後者を使用する傾向があります (たとえば、Masked Edit Extender を追加できます)。
これは私が使用するコードです。これを使用する場合は、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>
コード ビハインドでは、モバイル デバイスのカレンダー エクステンダーと自動ポストバックをオフにし (特定のデバイスにさらに拡張する可能性があります)、日付の HTML5 入力タイプを追加する、これに似たものが必要になります。詳細については、 W3 スクールを参照してください。
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.
Claytabaseによるウェブサイトのデザイン
これは、当社の Web サイト デザイン サービスの一部である、市場で最も高速で最適化されたシステムの 1 つである Ousia コンテンツ管理システム コードから変更されたコードのセクションです。
これらは、約£500から始まるサイトで利用できます.