Question

我希望将日期置于input中，而不是input内div。如果我进行居中，则会将日期置于input部分内部，因为有一个右侧面板可根据日历选择日期，该日历会根据输入宽度调整大小。

用于演示的小代码段

＆＃13;

.center {
  text-align: center;
}

＆＃13;

    <div>
      <input type='date' class='center' value='2006-01-01' width='100'>
    </div>

＆＃13;

我试图强制忽略右侧面板。然后日期不完全可见。

另一种方法是找到日历选择面板的大小，我没有在StackOverflow和Internet上找到任何机制来计算宽度，另外我用尺子做实验来找到比例，它也没有用

最后，我尝试搜索StackOverflow并没有找到任何类似的问题。

在我的项目中，我使用纯JavaScript，jQuery，HTML和CSS。

Answer 1

首先，text-align: center部分没有任何问题，它按预期工作，问题是输入右侧的按钮（当您将鼠标悬停在输入上时出现的按钮）也需要占用一些空间。

所以，你必须隐藏那些！
如果您要删除＆＃34; x＆＃34;您可以使用required="required"元素上的<input>属性按钮，以及这两个CSS规则来控制箭头和下拉菜单（但是，请注意好日期选择器不再出现，你必须使用键盘键入日期{{1规则）：

＆＃13;

input[type=date]::-webkit-calendar-picker-indicator

＆＃13;

.center {
    text-align: center;
    }

input[type=date]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    display: none;
}



input[type=date]::-webkit-calendar-picker-indicator {
    -webkit-appearance: none;
    display: none;
}

＆＃13;

如果您对此更感兴趣，请参阅this问题。

如果您愿意，也可以使用JQuery date-picker。

Answer 2

如果您想将<input>置于<div>内，则需要将text-align: center应用于 <div> 元素，而不是<input> {1}}。只需将您的课程.center移至<div>即可实现此目的：

＆＃13;

.center {
  text-align: center;
}

＆＃13;

<div class='center'>
  <input type='date' value='2006-01-01'>
</div>

＆＃13;

修改：

如果您希望将文字置于<input type='date'>中心，首先需要将输入转换为块级元素 display: block。请注意，text-align与下拉插入符相关，因此您可能实际上想要使用text-align: right而使用稍大一点的width：

＆＃13;
＆＃13;
.center { display: block; text-align: right; width: 170px; }
＆＃13;
<div> <input type='date' class='center' value='2006-01-01'> </div>
＆＃13;
＆＃13;
＆＃13;

希望这有帮助！：）

Answer 3

我强烈建议您不使用浏览器的datepickers，因为它们不是非常可靠且跨浏览器（许多旧浏览器不支持它）。

jQuery UI是这些小部件的一个很棒的框架，您可以通过CSS完全自定义日期选择器。

请注意，您需要基本jQuery框架才能使用jQuery UI，但它非常轻量级，我建议您甚至在应用程序中使用其他JavaScript代码。

Answer 4

我建议您添加

，而不是添加“必需”

input[type=date]::-webkit-clear-button

否则，“ x”仍会占用一些空间，并且不会真正居中。

输入字段中的中心日期，日期类型为

4 个答案: