1

I'm using html5 date input, but in a new form Chrome is not displaying the full values correctly. The format is DD-MM-YYYY, but the YYYY part shows up blank. I can see the value is there though.

Seems as if the white space on the right side of the input is reserved for the controls (cross to clear value, up/down arrow, dropdown-arrow).

I don't have space to make the input wider. How to make the full date visible?

Example: http://jsfiddle.net/U6MYy/ 

<input type="date" value="2014-04-07"/>
with
input { width: 80px; }
Lennart
  • 1,018
  • 1
  • 12
  • 27

3 Answers3

2

I think I may have come up with a nice solution. The only fault I've found thus far is that if you decide to keep any of the tools & shrink the input the tools will overlap the value.

Here is the solution I am partial to:

input[type='date']{position:relative;}
::-webkit-datetime-edit, ::-webkit-clear-button, ::-webkit-calendar-picker-indicator{position:absolute;}
::-webkit-clear-button{right:1.54em;}
::-webkit-inner-spin-button{-webkit-appearance:none; margin:0;}
::-webkit-calendar-picker-indicator{right:0; padding:.539em .34em;}

This keeps the clear button (x) & the dropdown arrow but removes those pesky arrows.

This should get you at least part way to where you want to be. You can open you Dev Tools in Chrome & Settings > Elements > Show user agent shadow DOM. From here you can play with the styles to find exactly what you want.

According to this answer the following code Crashes Chrome on hover (so be warned):

input[type="date"]::-webkit-inner-spin-button{display:none;}
Community
  • 1
  • 1
Crystal Miller
  • 741
  • 10
  • 26
1
input[type=date]::-webkit-clear-button,
input[type=date]::-webkit-inner-spin-button,
input[type=date]::-webkit-calendar-picker-indicator {
    display: none;
}

Users can't use the built-in calendar popup.

int32_t
  • 5,774
  • 1
  • 22
  • 20
0

This is a chrome bug which you can read about here:

Chrome Input Date Bug

apparently fixed, but can't managed to make it work their patch here:

http://trac.webkit.org/changeset/141195

your quick solution right now is set width to minimum 130px

UPDATE: see this answer, it might help you: https://stackoverflow.com/a/15107073/3448527

Community
  • 1
  • 1
dippas
  • 58,591
  • 15
  • 114
  • 126