Chrome type = "date" and jquery ui date picker clashing

Question

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

Chromeでは、そのフィールドをクリックすると、Chromeがdatepickerを開き、アプリケーションの使用にjquery uiのdatepickerをマップしました。これは、以下に示すように、両方がそれらに衝突されています

を、私は以下のように修正を適用した：上記のコードを追加した後

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 **/ 

、それが賢明のようになります。

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

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

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

Chromeバージョンは次のとおりです。事前にバージョン27.0.1448.0

感謝！

Answer 1

が、私はtype="text"として私の日付フィールドを持っていると私は追加されましたjqueryのではdata-type="date"

属性として、私は、動的ににtype="text & data-type="date"を交換するためのコードを実行しています、ブラウザがロード上で日付フィールドがありませんが、私は動的にtype="date"としてそれを追加していて、私のjqueryのUIの日付ピッカーが呼び出されるので... :)

が

Answer 2

クローム27今DatePickerのフィールド型をサポートしています（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> 

Using Modernizr to detect HTML5 features and provide fallbacks

Answer 3

...それは誰かに役立つことを願います

私も同様の問題がありました。私のモデル/ viewmodelではデータ型をDataType.Dateとして指定しました これを削除したときに気付いたのは、日付ピッカーがChromeで作業を開始したことです。 私はDataType.DateTimeとしてデータ型を変更しようとしたと思うし、再度クロムで試しました。これで問題は解決しました。これが他の誰にも当てはまるのかどうかはわかりませんが、これが頭痛の原因になります。 これは、あなただけ"date"のタイプを削除すると、次のフィドルのよう"text"にそれを切り替えることができjqueryUI 1.8.20

Answer 4

を使用してMVC4で働いていた：彼は何である jsfiddle

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

Answer 5

運の 最高通常使用します。私は使用しているdatepickerのいくつかの異なるフォーマットを持っているので、私はすべての日付入力にそれを覆いません。セレクタをあなたに最適なものに変更します。

<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>