javascript - 使用日期类型在输入字段中居中日期

Question

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

用于演示的小代码片段:

.center {
  text-align: center;
}

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

我试图在忽略右侧面板的情况下强制居中。然后日期不完全可见。

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

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

在我的元素中，我使用纯 JavaScript、jQuery、HTML 和 CSS。

Answer 1

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

所以，你必须隐藏它们!
您可以使用 required="required"您的 <input> 上的属性元素，如果你想删除“x”按钮，以及这 2 个 CSS 规则来控制箭头和下拉列表(但是，请注意漂亮的日期选择器不再出现，你必须使用你的使用 input[type=date]::-webkit-calendar-picker-indicator 规则时的键盘):

.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;
}

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

参见 this询问您是否对此感兴趣。

或者您可以只使用 JQuery date-picker如果你愿意的话。