CODEWITHSUNDEEP
htmlcssinputplaceholder
Yazan
Yazan

Reputation: 189

How to remove the placeholder text of input[type="date"]?

I have an input[type="date"] with min/max range. What I am trying to achieve is to hide the placeholder text displayed in any language as of dd/mm/yyyy. What have tried so far is adding the following CSS.

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 {
    color: transparent;
}

But that doesn't produce the intended output, as I have a range validator on the element.

Upvotes: 7

Views: 16268

Answers (4)

Nati
Nati

Reputation: 121

On pure HTML & Javascript the following code can be of use

<input
  type="date"
  name="dateInput"
  id="dateInput"
  value=""
  style="padding-left: 4.2rem;"
/>

<script>
  document.addEventListener("DOMContentLoaded", function () {
    var dateInput = document.getElementById("dateInput");

    dateInput.addEventListener("input", function () {
      var inputValue = dateInput.value;

      if (inputValue) {
        dateInput.style.paddingLeft = "0rem";
      } else {
        dateInput.style.paddingLeft = "4.2rem";
      }
    });
  });
</script>

On Angular

 <input
      type="date"
      name="dateInput "
      value="{{ dateInput }}"
      [(ngModel)]=" dateInput "
      [ngStyle]="{'padding-left': dateInput ? '0rem' : '4.2rem'}"
    />

this code just pushes the default mm/dd/yyyy out side of the width of the input .. the 4.2rem is just what i used for my case and you'll need to change the value to suit your needs.

Upvotes: 0

Safwan Samsudeen
Safwan Samsudeen

Reputation: 1707

The following works on Chrome. I am not sure about the other browsers. Safari doesn't seem to have an input of type date

const $input = $('input');
$input.on('input', function(){
    $input.addClass('focused')
});
input::-webkit-datetime-edit { 
    color: transparent;
    user-select: none;
}

.focused::-webkit-datetime-edit{ 
  color: #000; 
  user-select: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type='Date' />

Check out this Stack Overflow post for more information

Upvotes: 2

Woobie
Woobie

Reputation: 93

Placeholder?

input[type="date"]::before{
content: attr(placeholder);
position: absolute;
color: rgba(0,0,0,0);
}

input[type="date"]{color: rgba(0,0,0,1);}

Upvotes: -1

Dan Knights
Dan Knights

Reputation: 8368

You could swap out placeholders using a ::before pseudo-element:

input[type="date"]::before {
  content: attr(placeholder);
  position: absolute;
  color: #999999;
}

input[type="date"] {
  color: #ffffff;
}

input[type="date"]:focus,
input[type="date"]:valid {
  color: #666666;
}

input[type="date"]:focus::before,
input[type="date"]:valid::before {
  content: "";
}
<input type="date" placeholder="Date" required>

Upvotes: 3

Related Questions