1

I am using the Material-UI TextField Component and there is this problem, that it renders for TextFields of type "date" and "time" the format of its value. Just like this: enter image description here

I need that "TT.MM.JJJJ" and "--:--" removed. At this point my code to render those field looks like this:

<TextField
    label={label}
    type={type}
    value={value}
    InputLabelProps={{
      shrink: true
    }}
    onChange={(event) => this.onChange(event)}
    margin='normal'
    variant='outlined'
    disabled={disable}
  />
Idan
  • 5,405
  • 7
  • 35
  • 52
StrayFurther
  • 75
  • 1
  • 8
  • 1
    Material-UI is limited with the time and date options. You can't really get rid of that (you can use CSS to hide it). There are alternative libraries for handling time and date – Idan Dec 12 '19 at 08:01
  • 1
    Adding to Idan's insight, you can make use of a somewhat related [question](https://stackoverflow.com/questions/28686288/remove-default-text-placeholder-present-in-html5-input-element-of-type-date) which could help you. – minus.273 Dec 12 '19 at 08:02
  • Thank you @minu.273 that seems to work for chrome. – StrayFurther Dec 12 '19 at 08:08
  • 1
    Does this answer your question? [Remove default text/placeholder present in html5 input element of type=date](https://stackoverflow.com/questions/28686288/remove-default-text-placeholder-present-in-html5-input-element-of-type-date) – Idan Dec 12 '19 at 08:09

1 Answers1

0

So thanks to @minu.273 and @Idan I found the solution. I have put the following Code in a .scss file:

input[type="date"]:in-range::-webkit-datetime-edit-year-field, input[type="date"]:in-range::-webkit-datetime-edit-month-field, input[type="date"]:in-range::-webkit-datetime-edit-day-field, input[type="date"]:in-range::-webkit-datetime-edit-text { color: transparent; }

That works for chrome

StrayFurther
  • 75
  • 1
  • 8