web-dev-qa-db-ja.com

Chrome type = "date"とjquery ui日付ピッカーの競合

Type = "date"の入力ボックスがあります。IEですべて正常に動作しますが、Chromeの最新バージョンでは、スピナー、下矢印、 mm/dd/yyyyのプレースホルダー。

Chromeでは、そのフィールドをクリックすると、Chromeが日付ピッカーを開き、アプリケーションで使用するためにjquery uiの日付ピッカーをマッピングしました。これは、以下に示すように両方で競合しています。

enter image description here

RED show jquery ui date picker below chrome date picker

以下のように修正を適用しました：

input[type="date"]::-webkit-calendar-picker-indicator{
    display:none;
    -webkit-appearance: none;
    margin: 0;
}
input[type="date"]::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0;
}
/** THIS DOESN'T WORK **/
input[type="date"]::-webkit-input-placeholder{
    display:none !important;
    -webkit-appearance: none !important;
        visibility: hidden !important;
}
/** THIS DOESN'T WORK **/

上記のコードを追加すると、次のようになります。

enter image description here

上記のコードは、Chromeの日付ピッカーを起動するスピナーと矢印を非表示にします。しかし、問題があります。プレースホルダー（ 'mm/dd/yyyy'）はまだ入力テキストボックスにあります。私のjquery uiの日付ピッカーはうまくいきますが、日付を選択すると、プレースホルダーはまだそこにあります。

その入力ボックスに値が設定されていません。

値を設定するためにそのプレースホルダーを削除する方法を知る必要があります。また、アプリケーションで使用している日付形式はyyyy/mm/ddです。

Chromeのバージョンは次のとおりです：バージョン27.0.1448.0

前もって感謝します！！！

jqueryjquery-uigoogle-chromedatedatepicker
14
GOK

私はトリッキーな方法で処理しました。日付フィールドをtype="text"とし、属性をdata-type="date"として追加しました

Jqueryで、type="text＆data-type="date"をtype="date"に動的に置き換えるコードを実行しているため、ブラウザはロード時に日付フィールドになりませんが、jquery ui datepickerは次のように呼び出されます私は動的にtype="date"...として追加しています:)

誰かのお役に立てば幸いです。

12
GOK

Chrome 27は日付ピッカーフィールドタイプをサポートするようになりました（Operaはすでにサポートしています）と同じです）

日付フィールドがサポートされているかどうかは、modernizr.jsで確認できます。日付フィールドがブラウザーでサポートされている場合、Modernizr.inputtypes.dateはtrueを返します。

次のコードは、日付フィールドがサポートされていない場合にのみ、JQuery UIの日付ピッカーを設定します。

<script src="modernizr.js"></script>
<script>Modernizr.load({
  test: Modernizr.inputtypes.date,
  nope: ['http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.min.js', 'jquery-ui.css'],
  complete: function () {
    $('input[type=date]').datepicker({
      dateFormat: 'yy-mm-dd'
    }); 
  }
});
</script>

Modernizrを使用してHTML5機能を検出し、フォールバックを提供する

17
Maksym Kozlenko

次のフィドルのように、"date"のタイプを削除して"text"に切り替えるだけです：best of luck jsfiddle

removeDefaultDate = function(){
    $('input[type=date]').each(function(){
        this.type="text";
    });
    $('input[type=date]').datepicker({dateFormat: 'yy-mm-dd'});
}
5
Joe Nabeezy

同様の問題がありました。私のモデル/ビューモデルでは、データタイプをDataType.Dateとして指定しました。これを削除したときに、日付ピッカーがChromeで機能し始めたことに気付きました。データ型をDataType.DateTimeに変更して、Chromeでもう一度試したと思います。これで問題は解決しました。これが他の誰かに当てはまるかどうかはわかりませんが、これは私に多くの頭痛を引き起こしたので、これは誰かを助けるかもしれません。これはjqueryUI 1.8.20を使用してMVC4で機能しました

1
Grayson

Googleは、この競合を解決する別の方法を提案しました。これは この投稿 の下部にあります。

var isDateInputSupported = function(){
  var elem = document.createElement('input');
  elem.setAttribute('type','date');
  elem.value = 'foo';
  return (elem.type == 'date' && elem.value != 'foo');
}

if (!isDateInputSupported())  // or.. !Modernizr.inputtypes.date
  $('input[type="date"]').datepicker();
1
Ben Hill

彼は私が普段使っているものです。私が使用している日付ピッカーにはいくつかの異なる形式があるので、すべての日付入力にそれを適用しません。ただし、セレクターを最適なものに変更します。

<script src="{YourPathHere}modernizr.js"></script>
<script>
$(function () {//DOM ready code
    if (!Modernizr.inputtypes.date) {// Check to see if HTML5 is supported to use EF data annotations, if not use jQuery datepicker
                $('.date-picker').datepicker(
                    {
                        showButtonPanel: true,
                        gotoCurrent: true,
                        changeMonth: true,
                        changeYear: true,
                        showAnim: 'slideDown'
                    }
                );
            }
});// END DOM Ready
</script>
0
Mike