如何在更改时关闭日期选择器 <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