9

我有一个 HTML5<input type="date" />字段，我想立即响应更改的日期。

目前，输入字段部分掩盖了日期更改时更改的数据，因此我更愿意在日期更改后自动关闭日历选择器。

我试过 .blur() 改变，但这没有任何效果。事件触发，我可以获得新的日期值，但日期选择器没有隐藏。欢迎任何建议。

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

[更新]

到目前为止，我还求助于在页面 ( <input type="text" id="hideMyCalendar" />) 上添加了一个额外的输入元素，而不是input.blur();做 a$('#hideMyCalendar').focus();但这也不会隐藏选择器，即使焦点在视觉上被带到了不同的控件。到目前为止，我认为，唯一可能的方法是调用 chrome (webkit) 特定的方法，但我还没有发现这样的方法存在（还）。

4

4 回答 4

2

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');
}
于 2013-11-26T21:50:25.107 回答
1

你说（在你的评论中）：

我更喜欢 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 的日期选择器，如果 JavaScript 不可用，那么它将使用 HTML5 日期选择器，最后如果浏览器不支持 HTML5，那么它将只是一个文本字段。那是优雅的退化。

当然，您将使用jQuery datepicker 中的 hide 方法：

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

注意：对尼尔兹 +1

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

于 2013-12-03T01:48:12.093 回答
1

所以我希望在更改日期后自动关闭日历选择器

HTML 5input type="date"没有指定浏览器应该如何实现这个输入。它可以是图形日期选择器，也可以是对用户输入的简单验证——无论浏览器供应商想要实现什么。

因此，以跨浏览器的方式隐藏实际上是浏览器依赖的“日期选择器”是不可能的。

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

于 2013-06-28T08:30:51.547 回答
0

尝试这个：

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

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

于 2013-06-28T08:24:29.553 回答