Input type=date appears blank on android

Question

I have an input type=date and when I open the page on my smartphone (Android with google chrome), the input appears blank, I don't have the clock icons. Do you know why?

<input type="date">

Answer 1

This is an issue related to inconsistency between browsers. You have little other option than to create your own label/control, and use that instead of the browser-default date-input. This means it will look uniform accross all supported platforms and devices.

My approach (demonstrated below) is CSS-only, meaning it uses No JavaScript, which makes it clean, and eliminates any actualisation issues which often arrise when dynamically creating elements.

CSS-only:

.date-picker {
  display: inline-block;
  background: rgba(40, 40, 250, .1);
  min-width: 10rem;
  min-height: 2rem;
  padding: .5rem;
  border-radius: .35rem;
  position: relative;
  isolation: isolate;
}

.date-picker,
.date-picker>* {
  cursor: text;
  font-size: 1.2rem;
}

.date-picker:hover {
  background: rgba(40, 40, 250, .28);
}

.date-picker:active {
  background: rgba(40, 40, 250, .2);
}

.date-picker:focus>input[type="date"],
.date-picker:focus-within>input[type="date"] {
  color: #00f;
}

.date-picker:focus,
.date-picker:focus-within {
  box-shadow: 0 0 0 .1rem #00f;
}

.date-picker>.placeholder::after {
  content: "Click for calender";
  pointer-events: none;
  position: absolute;
  inset: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  text-align: center;
  color: #222;
}

.date-picker:focus>.placeholder,
.date-picker:focus-within>.placeholder,
.date-picker>input[type="date"]:valid+.placeholder {
  display: none;
}

.date-picker>input[type="date"] {
  background: none;
  border: none;
  outline: none;
  color: transparent;
  font-family: serif;
  position: absolute;
  width: 100%;
  height: 100%;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.date-picker>input[type="date"]:valid {
  color: #00f !important;
}

<div class="date-picker" tabindex="0">
    <input type="date" required>
    <div class="placeholder"></div> 
</div>