輸入字段中日期類型為中心的日期

Question

我想中心日期input ，不input內部div 。 如果我居中，則將日期居中於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沒什么問題text-align: center部分，它按預期工作，問題是輸入右側的按鈕（將鼠標懸停在輸入上方時顯示的按鈕）需要也要占用一些空間。

因此，您將不得不隱藏它們！
如果要刪除“ x”按鈕，可以在<input>元素上使用required="required"屬性，並使用這2條CSS規則來控制箭頭和下拉菜單（但是，請注意如何使用漂亮的日期選擇器不再顯示，並且當您使用input[type=date]::-webkit-calendar-picker-indicator規則時，您必須使用鍵盤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> 

如果您對此感興趣，請參閱此問題。

或者，您可以根據需要使用JQuery日期選擇器 。

Answer 2

如果要將<input>居中放在<div> ，則需要將text-align: center應用於<div>元素，而不是<input> 。 只需將類.center移至<div> ：

 .center { text-align: center; } 

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

編輯 ：

如果要在<input type='date'>中將文本居中，則首先需要將輸入轉換為具有display: block的塊級元素 。 請注意， text-align是相對於下拉式插入符號和十字的，因此您實際上可能要使用text-align: right和稍大的width ：

 .center { display: block; text-align: right; width: 170px; } 

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

希望這可以幫助！ :)

Answer 3

我強烈建議您不要使用瀏覽器的日期選擇器，因為它們不太可靠且跨瀏覽器（許多較舊的瀏覽器不支持）。

jQuery UI是這些小部件的絕佳框架，您可以通過CSS完全自定義日期選擇器。

請注意，您需要使用基本的jQuery框架來使jQuery UI正常工作，但是它非常輕巧，我建議您甚至將其與應用程序中的其他JavaScript代碼一起使用。

Answer 4

建議不要添加“必需”，而建議添加

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

否則，“ x”仍會占用一些空間，並且不會真正居中。