输入字段中日期类型为中心的日期 [英] Center date in input field with date type

问题描述

我想在input中而不是在div中将input放在日期中心.如果我居中，则它将日期居中在input的内部，因为有一个右侧面板可根据日历选择日期，日历的大小取决于输入宽度.

I want to center date in input, not input inside div. If I do centering, it centers date inside of part of input because there is a right-hand side panel for choosing a date based on a calendar, which resizes dependently of input width.

用于演示的小代码段:

.center {
  text-align: center;
}

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

我试图通过忽略右侧面板来强制居中.然后日期不完全可见.

I tried to force centering with ignoring the right panel. Then the date is not fully visible.

另一种方法是找到日历选择面板的大小，我在StackOverflow和Internet上都没有找到用于计算宽度的任何机制，此外，我还用标尺进行了实验以找到比例，这也没有用

Another approach was to find the size of calendar choice panel, and I did not find any mechanism both on StackOverflow and Internet to calculate the width, plus I did experiments with a ruler to find the proportion, and it also did not work.

最后，我尝试搜索StackOverflow，但没有发现任何类似的问题.

The last, I tried searching into StackOverflow and did not find any similar questions.

在我的项目中，我使用普通的JavaScript，jQuery，HTML和CSS.

In my project, I use plain JavaScript, jQuery, HTML, and CSS.

推荐答案

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

First of all, there is nothing wrong with the text-align: center part, it is working as expected, the problem is that the buttons on the right side of the input (the ones that appear when you hover over the input) need to take up some space as well.

所以，您将不得不隐藏它们！
如果要删除"x"按钮，可以在<input>元素上使用required="required"属性，并使用这2条CSS规则来控制箭头和下拉菜单(但是，请注意，不错的日期选择器不会不再显示，并且在使用input[type=date]::-webkit-calendar-picker-indicator规则时必须使用键盘输入日期):

So, you will have to hide those!
You can use the required="required"attribute on your <input> element if you want to remove the "x" button, and these 2 CSS rules to control the arrows and the dropdown (however, do note how the nice date-picker doesn't appear anymore and you have to type down a date using your keyboard when you use the input[type=date]::-webkit-calendar-picker-indicator rule):

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

请参见

See this question if you are interested in more of this.

或者，您可以根据需要使用 Jquery日期选择器.

Or you can just use the JQuery date-picker if you want to.

这篇关于输入字段中日期类型为中心的日期的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！