如何在<input type =“date”/> HTML5输入日期元素

上关闭更改日期选择器我有一个HTML5 <input type="date" />字段，我想立即响应更改的日期。如何在<input type =“date”/> HTML5输入日期元素

当前，输入字段部分遮盖了日期更改时更改的数据，所以我宁愿在日期更改后自动关闭日历选择器。

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

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

[更新]

到现在为止，我也使出了页面（<input type="text" id="hideMyCalendar" />）上，而不是input.blur();，并增加了输入元素做$('#hideMyCalendar').focus();但这也不能掩盖即使焦点在视觉上被带到不同的控制。到目前为止，我认为，唯一可能的方法是调用chrome（webkit）的特定方法，但我还没有启动这种方法来存在（还）。

来源

2013-06-28 Nick Kusters BC

不知道你在用什么日期选择器。运行一次，检查萤火虫。获取ID，类或其拥有的任何属性。并将其隐藏在日期更改上的JavaScript – madhairsilence

这只是本机HTML5输入控件的类型日期;我目前正在测试的浏览器是Chrome。 –

试试这个：

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

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

来源

2013-06-28 08:24:29

我没有使用jQuery datepicker;它是HTML5日期输入元素。 –

所以我宁愿自动关闭日历选取日期改变

HTML 5 input type="date"后不不指定浏览器应如何实现此输入。它可以是图形化的日期选择器，它可以是对用户输入的简单验证 - 无论浏览器供应商想要实现。

因此，隐藏“datepicker”，这实际上是浏览器依赖，是不可能的跨浏览器的方式。

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

来源

2013-06-28 08:30:51 Uooo

我有一个不同的日期选择器用于非HTML5兼容的浏览器，但我更喜欢HTML5输入元素，因为我希望这将统一到网络上。 –

14年1月30日这不再起作用

~~这是丑陋的，但它适用于Chrome浏览器。~~

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

这是我能选择一个日期后，关闭HTML5日期的唯一途径。只需删除日期属性，然后再应用它。该值被保留，它看起来好像是手动关闭的。

UPDATE：

这是我使用，使所有日期类型的接近这样的方法：

$(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-26 21:50:25 tkarnau

这在我使用的Chrome 31.0.1650.57中不起作用。开发工具会抛出一个错误，表示该元素的类型无法更改。 – Calle

我使用相同的版本，我无法复制该错误。我发布了我使用的实际代码。你会尝试一下，看看它是否有效？ – tkarnau

你是对的，托马斯，它在jQuery 1.10.2中工作。然而，在1.8.3中，我仅限于我正在使用的网站。你跟进的好事。 – Calle

你说（在your comment）：

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

但是，您愿意调用webkit特定的方法吗？（在the update to the question）：

到现在为止，我认为，唯一可行的办法是打电话铬（WebKit的）具体方法，但我还没有发现那位这样的方法存在（还）。

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

如果你真的想要跨浏览器的单一用户体验，那么去jQuery UI。它不仅为您提供了多功能的功能（如Nil'z points out），它还为不同的浏览器提供相同的行为。

而不是在可用的情况下使用HTML5。当JavaScript不可用时，您应该要做的就是回到HTML5。这是使用。事实上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日期选择器，最后如果浏览器不支持HTML5，那么它将只是一个文本字段。这是优雅的退化。

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

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

注：+1 Nil'z

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

来源

2013-12-03 01:48:12 Theraot

如何在<input type =“date”/> HTML5输入日期元素

回答

相关问题