javascript - 如何在 <input type ="date"/> HTML5 Input date 元素发生变化时关闭日期选择器

Question

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

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

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

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

[更新]

到目前为止，我还求助于在页面上添加一个额外的输入元素 ( <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');
}