向后兼容性和HTML5日期输入 - 日期格式

Question

所以，我遇到了这个问题，也许我只是没有直接思考，但网站如何处理这个问题的例子会有所帮助。

我想使用HTML5日期输入 - 它很好而且流畅。但是，我需要该日期最终作为mysql数据库中的日期字段放入。问题不在于HTML5日期输入的后期值 - 而是在旧版浏览器上恢复为文本时。

如果我通过我的输入说“请格式化YYYY-MM-DD”（这将是从许多浏览器访问的高度公开的应用程序），那么当使用显示日期选择器的Chrome时，Chrome自动格式化为MM / DD / YYYY显示日期，我听说这是本地化的用户。

问题是：如何设置“请格式化YYYY-MM-DD”标签，该标签只会在还原到文本框时显示？如果我向最终用户指定他们需要以一种方式对其进行格式化，并且日期选择器只允许他们以不同的方式进行格式化，这不会毫无希望地混淆吗？我预计这个表单会在多个语言环境中使用，所以我无法预料到默认的格式。

请注意这是一个前端问题;我理解如何获取POST值，但需要向后兼容的文本框的POST值是统一的。

Answer 1

您可以使用占位符属性，如下所示：

<input type="date" name="myName" placeholder="Please format YYYY-MM-DD">

当浏览器无法识别日期类型时，它将呈现为文本输入。占位符显示在文本输入上，但不显示在日期输入上。

现在，不幸的是，根据caniuse，只有IE 10+支持占位符属性。我不确定这对你来说是不是一个问题。

如果 出现问题，您可以使用Modernizr来测试占位符支持等功能，并为正文添加适当的类。如果是这种情况，您可以编写一个类似于以下内容的CSS规则：

.my-input-label {
  display: none;
}
.no-placeholder .my-input-label {
  display: inline-block; // Or block, if you need to support IE < 8
}

这将使标签显示在任何不支持占位符属性的内容上，但是它们将从布局流中删除任何有效的内容，从而优雅地降级。

最后，另一种方法是设置默认值。像这样：

<input type="date" name="myName" value="Please format YYYY-MM-DD">

它不是那么优雅，而且从用户体验的角度来看情况更糟，但对于不支持date输入类型的所有浏览器来说，这种体验是普遍的。

注意：我还没有在IE上测试过Modernizr的课程，所以我不认为课程是no-placeholder。