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

你说（在your comment中）：

我更喜欢HTML5输入元素，因为我希望这能为网络带来统一性。

然而，您是否愿意调用特定于webkit的方法？（在the update to the question）：

到目前为止，我认为，唯一可行的方法是调用chrome（webkit）特定方法，但我还没有将这样的方法存在（尚未）。

我认为这违背了目的。然后你需要一个特定于Opera的方法，一个特定于IE的方法，一个特定于Firefox的方法等等......不再需要统一到网络。

如果您真的希望跨浏览器获得单一用户体验，请转到jQuery UI。它不仅为您提供了执行所需操作的多功能性（如Nil'z points out），它还为异构浏览器提供了相同的行为。

而不是在可用的地方使用HTML5。您应该做的是在JavaScript不可用时回退到HTML5。那是使用unobstructive JavaScript principles。实际上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，那么它将只是一个文本域。这是优雅的退化。

当然，您将使用hide method from jQuery datepicker：

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

注意：+1到Nil'z

我知道我没有回答这个问题，但这解决了这个问题。

Answer 4

试试这个：

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

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

如何在<input type =“date”/> HTML5输入日期元素的更改时关闭日期选择器

4 个答案: