Center date in input field with date type

Question

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.

Small code snippet for demonstration:

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

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.

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

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

doubleOrt · Accepted Answer · 2017-10-08T20:04:26.887

7

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.

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.

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

edited Oct 08 '17 at 20:04

answered Oct 08 '17 at 19:45

doubleOrt

2,407
1
14
34

Is there any lightweight framework solution which will work as I expect it to be? – Dmytro Chasovskyi Oct 08 '17 at 19:53
@Taurus, actually I cannot do default date-picker bigger because I have in a column many input fields with different types, so I wanted to customize default date-picker. Do you have any ideas if there is a way to calculate hidden right side buttons? – Dmytro Chasovskyi Oct 08 '17 at 19:56
@Taurus, your answer was exactly what I looked. How did you come to such solution? – Dmytro Chasovskyi Oct 08 '17 at 20:09
@DmitriyChasovskoy I just googled "html datepicker remove buttons" and the first result that popped up was the StackOverflow answer I linked you to in my answer. – doubleOrt Oct 08 '17 at 20:11
@DmitriyChasovskoy Don't feel bad though, searching is tedious and stressful. – doubleOrt Oct 08 '17 at 20:15

Obsidian Age · Answer 2 · 2017-10-08T19:56:55.167

2

If you want to center an <input> inside a <div>, you need to apply text-align: center to the <div> element, not the <input>. This can be achieved by simply moving your class .center to the <div> instead:

.center {
  text-align: center;
}

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

EDIT:

If you want to center the text in an <input type='date'>, you first need to convert the input to a block-level element with display: block. Note that the text-align is relative to the dropdown caret and cross, so you might actually want to use text-align: right and a slightly larger width instead:

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

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

Hope this helps! :)

edited Oct 08 '17 at 19:56

answered Oct 08 '17 at 19:34

Obsidian Age

41,205
10
48
71

No, I want to center date inside `input` field not `input` inside `div`. If my post was misleading for you, can you possibly give me any suggestions how to improve wording? – Dmytro Chasovskyi Oct 08 '17 at 19:37
I might be wrong but I think such input is not customizable the way you want. I suggest you to use JavaScript datepickers. – NoImaginationGuy Oct 08 '17 at 19:54
My apologies; based on the question I thought you wanted the `` centralised in the `
`. I've updated my answer to additionally showcase how text can be centered in an `` for a `date`.
– Obsidian Age Oct 08 '17 at 19:57
Your edit does not work (on Firefox at least), it does not center the text inside the date type input field. – Ange Loron Jan 14 '19 at 18:08

score 0 · Answer 3 · answered Oct 08 '17 at 20:03

I strongly suggest you not to use browser’s datepickers cause they’re not very reliable and cross-browser (many older browsers don’t support it).

jQuery UI is a great framework for these widgets, and you can completely customize the datepicker through CSS.

Note that you’ll need the base jQuery framework for jQuery UI to work but it is very lightweight and I suggest you to use it even with other JavaScript codes in your application.

score 0 · Answer 4 · answered Aug 06 '19 at 11:42

0

Instead of adding 'required', I recommend adding

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

otherwise the 'x' still takes some space and it's not truely centered.

answered Aug 06 '19 at 11:42

Namnyef

31
3

Center date in input field with date type

4 Answers4

Linked