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.

Answer 1

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.