Chrome type =「date」和jquery ui日期選擇器衝突

我有一個輸入框type =「date」，在IE中一切正常，但在Chrome的最新版本中它帶有一個微調，向下箭頭和佔位符mm/dd/yyyy。Chrome type =「date」和jquery ui日期選擇器衝突

在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

在此先感謝！

來源

2013-06-03 GOK

我搜索了谷歌，發現它就像一個鉻錯誤，如果是的話就解決了？ – GOK

請看看這裏：http://stackoverflow.com/questions/11320615/disable-browser-native-datepicker –

我在一個取巧的辦法來處理，我有我的日期字段爲type="text"，我已經加入屬性作爲data-type="date"

jQuery中，我運行一個代碼動態替換type="text & data-type="date"到type="date"，這樣瀏覽器就不能使它日期字段上的負載，但是我的jQuery UI的日期選擇器被稱爲我動態將其添加爲type="date" ... :)

希望這是有幫助的人..

來源

2013-06-03 12:03:00 GOK

的Chrome 27現在支持日期選擇字段類型（就像歌劇已經這樣做了）

你可以用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

來源

2013-06-03 06:19:41

我可以用戶的一些代碼段來實現它，而不是使用Modernizr.js？ – GOK

入住這裏http://tjvantoll.com/2012/06/30/creating-a-native-html5-datepicker-with-a-fallback-to-jquery-ui/ –

我有類似的問題。在我的模型/視圖模型中，我將數據類型指定爲DataType.Date 我注意到當我刪除這個日期選擇器開始在Chrome中工作。我認爲嘗試將數據類型更改爲DataType.DateTime，然後再次嘗試使用chrome。這解決了這個問題。不知道這是否適用於其他人，但這導致我很頭痛，所以這可能有助於某人。這個工作在MVC4使用jQueryUI的1.8.20

來源

2013-06-06 16:41:02 Grayson

那麼肯定，但日期和日期時間意味着不同的事情你想選擇一個語義上正確的。 –

你可以僅僅刪除的"date"類型和切換到"text"如以下小提琴：好運 jsfiddle

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

來源

2014-07-22 20:33:06

他是我通常使用。我使用了幾種不同的日期選擇器格式，所以我不會將它覆蓋到所有日期輸入。但是，將選擇器更改爲最適合您的選擇。

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

來源

2017-05-10 20:31:06 Mike

Chrome type =「date」和jquery ui日期選擇器衝突

回答

相關問題