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

• javascript
• jquery
• css
• html

4 Answers 4

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.

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! :)

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

Instead of adding 'required', I remend adding

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

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