3

The newest version of Chrome finally supports the date types input natively, which is just fine, but it is forcing its own date formatting and placeholder text, that doesn't suite my layout very well. How to remove the localized date formatting, so it displays as ISO (it is off course sent as ISO, but just not displayed that way in the browser), and how to remove the localized placeholder (date types do not support placeholder attribute mind you, so it can't just be simply overridden)?

EDIT: I could just style the placeholder as the color of background, but is there anything less hacky?

kaiz.net
  • 1,984
  • 3
  • 23
  • 31
Nikola Bogdanović
  • 3,206
  • 1
  • 20
  • 28
  • I also want to know if **display** format and placeholder can be customized. Currently input date inside Chrome have `data-placeholder="year-month-day"` attribute, but changing this attribute does not take effect. – CallMeLaNN Oct 20 '12 at 17:25
  • Possible duplicate of [Remove default text/placeholder present in html5 input element of type=date](http://stackoverflow.com/questions/28686288/remove-default-text-placeholder-present-in-html5-input-element-of-type-date) – Maks3w Mar 02 '16 at 08:26

2 Answers2

1

This question covers how to style the (pseudo) elements in chrome and as far as I can tell the ones detailed there are all the control you have with the latest version of chrome (v27 as of writing).

Date format (eg. dd/mm/yyyy) is always set to browser locale settings.

If you want more control the only other option is to make it type='text' and add a JavaScript datepicker. Some polyfills allow you to override the browser style with the JS solution.

Community
  • 1
  • 1
davidelrizzo
  • 683
  • 8
  • 13
  • thank you for your answer, but I already knew all that when the question was asked - and although the new pseudo elements are quite helpful, they change absolutely nothing regarding the original problem (back then i used `input[type=datetime]::-webkit-input-placeholder` instead of the new `::-webkit-datetime-edit-text` to style the placeholder text as the color of the background) – Nikola Bogdanović Jun 21 '13 at 01:56
-1

I added a style of input[type="date"] {-webkit-text-fill-color:#??????;} where ?????? is the same color as the background color of the input. For example, if the background color of the input is #ffffff, then adding the rule of -webkit-text-fill-color:#ffffff "hides" the text since it matches the background color.

TJSpinWebDesign
  • 1
  • 1
  • -1 as that would hide the input text... and hiding the placeholder was never a problem - I wanted the display formating to always be ISO (or in the language of the website, not the clients browser) – Nikola Bogdanović Jan 21 '14 at 22:40