如何在更改時關閉日期選擇器 <input type=“date” /> HTML5輸入日期元素

Question

我有一個HTML5 <input type="date" />字段，我想立即回復更改日期。

目前，輸入字段部分遮蓋了日期更改時更改的數據，因此我希望在更改日期后自動關閉日歷選擇器。

我試過改變.blur（），但這沒有任何效果。 觸發事件，我可以獲取新的日期值，但不會隱藏日期選擇器。 歡迎任何建議。

  .bind('change', function(){
    var input = $(this);
    if(input.is(':valid'))
    {
      input.blur();
    }
  });

[UPDATE]

到目前為止，我還在頁面上添加了一個額外的輸入元素（ <input type="text" id="hideMyCalendar" /> ）而不是input.blur(); 做一個$('#hideMyCalendar').focus(); 但這也不會隱藏選擇器，即使焦點在視覺上被帶到不同的控件。 到目前為止，我認為，唯一可行的方法是調用chrome（webkit）特定方法，但我還沒有將這樣的方法存在（尚未）。

Answer 1

01/30/14這不再有效

這很難看，但適用於Chrome。

function closeDate() {
    $('#txtDate').attr('type', 'text');
    $('#txtDate').attr('type', 'date');
}

這是我在選擇日期后能夠關閉html5日期的唯一方法。 只需刪除日期屬性，然后再次應用它。 該值保留，看起來好像是手動關閉的。

更新：

這是我用來使所有日期類型關閉的方法，如下所示：

$(document).ready(function () {
    //make all date html5 close on change in chrome
    $('input[type="date"]').change(function () {
        closeDate(this);
    });

});

function closeDate(dateInput) {
    $(dateInput).attr('type', 'text');
    $(dateInput).attr('type', 'date');
}

Answer 2

所以我希望在更改日期后自動關閉日歷選擇器

HTML 5 input type="date"未指定瀏覽器應如何實現此輸入。 它可以是圖形日期選擇器，它可以是對用戶輸入的簡單驗證 - 無論瀏覽器供應商想要實現什么。

因此，隱藏“datepicker”（實際上是瀏覽器依賴）是不可能以跨瀏覽器的方式進行的。

但是，您可以使用jQuery UI datepicker ，您可以完全控制它的顯示和隱藏方式。

Answer 3

你說（在你的評論中 ）：

我更喜歡HTML5輸入元素，因為我希望這能為網絡帶來統一性。

然而，您是否願意調用特定於webkit的方法？ （在問題的更新中 ）：

到目前為止，我認為，唯一可行的方法是調用chrome（webkit）特定方法，但我還沒有將這樣的方法存在（尚未）。

我認為這違背了目的。 然后你需要一個特定於Opera的方法，一個IE特定的方法，一個特定於Firefox的方法等等......不再需要統一網絡 。

如果您真的想要跨瀏覽器的單一用戶體驗，那么請轉到jQuery UI 。 它不僅為您提供了所需的多功能性（如Nil'z指出的那樣 ），它還可以在異構瀏覽器中提供相同的行為。

---

而不是在可用的地方使用HTML5。 您應該做的是在JavaScript不可用時回退到HTML5。 這是使用無阻礙的JavaScript原則 。 實際上jQuery是默認設計的...

只需創建HTML5（和HTML4兼容）字段：

<input type="date" name="date" id="date" value="" />

你的jQuery：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js></script>  
<script type="text/javascript" src="js/jquery-ui.js"></script>

你的腳本：

<script type="text/javascript">
    $('#date').datepicker();   
</script>

最終的結果是jQuery可以運行的所有瀏覽器都將使用基於jQuery的datepicker，如果JavaScript不可用，那么它將使用HTML5 datepicker，最后如果瀏覽器不支持HTML5，那么它將只是一個文本字段。 這是優雅的退化。

---

當然，您將使用jQuery datepicker中的hide方法 ：

$( ".selector" ).datepicker( "hide" );

注意：+1到Nil'z

---

我知道我沒有回答這個問題，但這解決了這個問題。

Answer 4

試試這個：

$( ".selector" ).datepicker( "hide" );

參考： http ： //api.jqueryui.com/datepicker/#method-hide