Question 190435 in Html Question posted in
Some basic documentation can be found here.

Hide calendar icon in date-type HTML input on Firefox

The problem is simple.

<input type="date />

Looks like this on Firefox (desktop and mobile):

date input on firefox

The internet only suggests a solution for Chrome:

input {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

input[type="date"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
}

This does indeed work on Chrome, but not on Firefox.
Nothing I’ve tried works on Firefox.
I am wondering if it’s even possible. I want to hide the calendar icon.
I am aware that on desktop, clicking the calendar is the only way to bring up the date picker. This is not an issue as it is a mobile app.

Tags:

2

Answers


  1. 0 
    input[type="date"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-calendar-picker-indicator {
  display: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
  appearance: none;
}

    add this code to css and i hope will be removed

    Login or Signup to reply.
  2. 0

    One way you could do it is to overlay a text input box on top of the date picker then use the showPicker() method to trigger the date picker dialog box. Use the change event to reflect any changes in the date input to the text input. I’ve not formatted the date but you can use the Intl.DateTimeFormat object to make the date locale friendly.

    Just a note: This won’t work on codepen or on the snippet editor due to security reasons so to test it you’ll have to drop it onto localhost or your development environment.

    const textInput = document.querySelector('.datepicker input[type="text"]');
const dateInput = document.querySelector('.datepicker input[type="date"]');
textInput.addEventListener('focus', (e) => {
  dateInput.showPicker();
});
dateInput.addEventListener('change', (e) => {
  textInput.value = dateInput.value; //Use Intl API to format the date if you want.
});
    .datepicker {
  width: 8rem;
  position: relative;
}

.datepicker input {
  width: 100%;
  box-sizing: border-box;
}

.datepicker input[type='date'] {
  position: absolute;
  inset: 0;
  z-index: -1;
}
    <div class='datepicker'>
  <input type=text placeholder='yyyy/mm/dd'>
  <input type=date>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search