HTML5 日期输入宽度答案

【问题标题】：HTML5 date input widthHTML5 日期输入宽度
【发布时间】：2013-02-13 17:05:40
【问题描述】：

所以我在尝试强制输入日期大小时遇到问题。有没有其他人遇到过这个问题或知道如何解决它？

<input style="width:50px;" type="date" value="">

很简单，宽度只改变textarea，实际控件没有改变，固定在125px左右宽度。

我也尝试过css中的width=""和max-width，都不管用。

【问题讨论】：

您希望 mm/dd/yyyy 也扩展或控件似乎对我扩展。不过我可能理解错了。 jsfiddle.net/supplement/xu9Xm
请注意我的示例使用 50px，而不是 250？我想比默认值小，而不是更大。谢谢。
我明白你现在在说什么......这是个好问题。朋友，我看看能不能给你挖点东西。
这可能不是你想听到的，但你可能想放弃它。它在 chrome 中运行良好，但在 FF 中甚至无法运行。
我在 Android 上遇到了同样的问题，您找到解决方案了吗？

标签： html

【解决方案1】：

使用 chrome 45，我只需设置字体大小。它按比例更改了文本和控制手柄。不确定那是您想要的效果（？）。

<input style="font-size: 3rem"  type="date" id="Date">

【讨论】：

@AustinBest 然后选择一个答案作为“解决方案”将是采取适当的行动。
远非拖钓。用 wontfix 回答你自己的问题也是一个有效的答案。
因为这是我的谷歌搜索的顶部，现在是 2017 年，我能够将 Chrome 压缩到宽度：10em;，但这是我能得到的最小的（和这并不比默认值小很多）。我比其他人更喜欢这个答案。

【解决方案2】：

<input type=date> 元素应该以适合浏览器运行环境的浏览器相关方式实现。所以它应该在浏览器的控制之下，而不是作者的。这也是很多人对此想法持怀疑态度的原因之一。

为控件设置宽度确实是在黑暗中拍摄。在我的 Chrome（Win 7 上为 25beta）上，您的 CSS 代码“工作”的意义在于将小部件截断为给定的宽度。它仍然有效，但看起来很奇怪：在小部件中，字母“v”和其他字母的一部分是可见的。它们实际上是符号“vvvv-kk-pp”（“yyyy-mm-dd”的本地化符号），我可以在没有任何宽度设置的小部件中看到它。

结论是：通过使用<input type=date>，您接受浏览器可能使用的任何依赖于浏览器的小部件，并尝试控制例如它的大小很可能会搞砸，

【讨论】：

所有元素都应该遵守为它们指定的 CSS，不是吗？而且我并不关心 UI 元素在编辑时的外观，而是在不编辑时静态显示的值。

【解决方案3】：

<input type="date" name="tanggal" style="width:231px">

希望这行得通！除了宽度，它不会改变任何东西。

【讨论】：

【解决方案4】：

因为大多数浏览器还没有跟上 html5 的速度。我只会将日期选择器与 jquery 一起使用。

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Datepicker - Default functionality</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
  <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css" />
  <script>
  $(function() {
    $( "#datepicker" ).datepicker();
  });
  </script>
</head>
<body>

<p>Date: <input type="text" id="datepicker" /></p>


</body>
</html>

我已经用过很多次了，而且效果很好。更有意义的是在点击时显示日历以及 imo。

这里也是链接：http://jqueryui.com/datepicker/

【讨论】：

这是一个仅限 Chrome 的应用程序，所以我不担心 IE 永远不兼容。如果对实际问题没有其他解决方案，我将重新审视这个解决方案。 +1 作为替代方案。
感谢 Austin，很高兴我能提供帮助并参与此讨论。 =]
这不是问题的答案。
这不是问题的答案，正确。这就是为什么我的推荐没有得到绿色检查的原因。 =]