0

日付ピッカーを使用したい入力フィールドがあります。私はjqueryの日付ピッカーを使用していましたが、iPhoneではうまく機能しないことに気付き、iosのネイティブ日付ピッカーを使用するhtml5 input type="date" に変更することを読みました。しかし、これは他のブラウザでも機能しますか? jquery ui日付ピッカーとiosの自然の日付ピッカーの両方をiPhoneに表示したくないので、これを行う最良の方法は何ですか。

4

2 に答える 2

1

datepicker 入力タイプのサポートは非​​常にまれです。ここを参照してください。この機能をサポートする少数のブラウザーでは、サポートと実装が大きく異なります。

Safari は日付形式のテキスト フィールドを提供しますが、実際のカレンダー ウィジェットは提供しません。Chrome での部分的なサポートは、「日付」タイプのカレンダー ウィジェットを参照しますが、他のすべての日付/タイプ フィールドのテキスト フィールドのみを参照します。Chrome 23 は「時間」タイプをサポートします。Chrome 25 では、「週」タイプと「月」タイプのサポートが追加されています。Android 4.x ブラウザーの一部の修正バージョンでは、日付/時刻フィールドがサポートされています。

jQuery Ui Datepicker が、入力タイプがサポートされているかどうかを検出するのに十分賢いかどうか、サポートされている場合は表示されないかどうかはわかりません。しかし、保存側になるには、jQuery Ui を使用します。

多くの可能性があります。うまくいかないことは何ですか？

編集

この回答が受け入れられたので、問題が何であるかを明確にしたいだけです (Andrew Welch が以下のコメントで言及しています)。ユーザーが日付ピッカーの入力フィールドに何かを入力するオプションを持っている場合、iPhone キーボードが起動し、望ましくない動作を引き起こし、日付ピッカーを「壊します」。これを防ぐには、入力を読み取り専用フィールドにする必要があります。

<input type="text" id="datepicker" readonly="readonly">
于 2013-04-28T08:50:59.653 に答える
1

jQuery Mobile uiの日付ピッカーを使用できると思うのと同じ問題があります。iOS（Safari）はネイティブの日付ピッカーをサポートし、Androidはサポートしていません！ ここに画像の説明を入力 クライアントがiOSクライアントであるかどうかを検出し、input type="date" elseを使用してjQuery MobileのUiDatePickerを使用する必要があります

デバイスが iOS かどうかは、次のコード ( Haim Evgi によるとPHP )で検出できます。

<?php

//Detect special conditions devices
$iPod    = stripos($_SERVER['HTTP_USER_AGENT'],"iPod");
$iPhone  = stripos($_SERVER['HTTP_USER_AGENT'],"iPhone");
$iPad    = stripos($_SERVER['HTTP_USER_AGENT'],"iPad");
$Android = stripos($_SERVER['HTTP_USER_AGENT'],"Android");
$webOS   = stripos($_SERVER['HTTP_USER_AGENT'],"webOS");

//do something with this information
if( $iPod || $iPhone ){
    //browser reported as an iPhone/iPod touch -- do something here
}else if($iPad){
    //browser reported as an iPad -- do something here
}else if($Android){
    //browser reported as an Android device -- do something here
}else if($webOS){
    //browser reported as a webOS device -- do something here
}

?>

<input>最後に、タグを次のように設定する必要がありますreadonly="readonly"

コード ( jQuery モバイル):

<input type="date" name="date" id="date" value=""  data-role="datebox"
   data-options='{"mode": "datebox","useDialogForceFalse": true}' readonly="readonly" />
于 2013-04-28T09:53:41.447 に答える