Html HTML5 日期输入宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14858951/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML5 date input width
提问by Austin Best
So i am having an issue trying to force a size on a date input. Has anyone else had this issue or know how to get around it?
所以我在尝试强制输入日期的大小时遇到了问题。有没有其他人遇到过这个问题或知道如何解决它？
<input style="width:50px;" type="date" value="">
It is pretty simple, the width only changes the textarea, the actual control does not change, it is fixed at about 125 px width or so.
很简单，宽度只改变textarea，实际控件没有变化，固定在125px左右宽度。
I have also tried width="" and max-width in the css, neither work.
我也试过 css 中的 width="" 和 max-width ，都不起作用。
回答by GeorgeG
With chrome 45, I just set the font-size. It proportionately changed the text and the control handles. Not sure that was the effect you were looking for(?).
使用 chrome 45，我只需设置字体大小。它按比例更改了文本和控件句柄。不确定这是您要寻找的效果（？）。
<input style="font-size: 3rem" type="date" id="Date">
回答by Supplement
Since most browsers aren't up to speed with html5 yet. I would just use the date picker with jquery.
由于大多数浏览器还没有跟上 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>
I've used it plenty and it works a treat. Makes more sense to present the calendar on click as well imo.
我已经用过很多次了，效果很好。在点击时显示日历以及 imo 更有意义。
Here's the link as well: http://jqueryui.com/datepicker/
这也是链接：http: //jqueryui.com/datepicker/
回答by Jukka K. Korpela
An <input type=date>element is supposed to be implemented in a browser-dependent manner that is suitable for the environment where the browser is running. So it is supposed to be under the browser's control, not an author's. This is one reason why many people are skeptical about the idea.
一个<input type=date>元件被认为在浏览器依赖性的方式适合于在运行浏览器的环境中实现。所以它应该在浏览器的控制之下，而不是作者的控制之下。这就是为什么许多人对这个想法持怀疑态度的原因之一。
Setting a width for the control is really a shot in the dark. On my Chrome (25beta on Win 7), your CSS code “works” in the sense of truncating the widget to the given width. It still works, but it looks very odd: in the widget, the letter “v” and part of some other letter is visible. They are really the notation “vvvv-kk-pp” (localized notation for “yyyy-mm-dd”), which I can see in the widget in the absence of any width setting.
为控件设置宽度实际上是在黑暗中拍摄。在我的 Chrome（Win 7 上的 25beta）上，您的 CSS 代码在将小部件截断为给定宽度的意义上“有效”。它仍然有效，但看起来很奇怪：在小部件中，字母“v”和其他一些字母的一部分是可见的。它们实际上是符号“vvvv-kk-pp”（“yyyy-mm-dd”的本地化符号），我可以在没有任何宽度设置的小部件中看到。
The conclusion is: by using <input type=date>, you accept whatever browser-dependent widgets browsers might use, and an attempt to control e.g. in its size may very well mess things up,
结论是：通过使用<input type=date>，您可以接受浏览器可能使用的任何依赖于浏览器的小部件，并且尝试控制例如其大小可能很容易把事情搞砸，
回答by Jukka K. Korpela
<input type="date" name="tanggal" style="width:231px">
Hope this works! It doesn't change anything except the width.
希望这有效！除了宽度，它不会改变任何东西。
