Show Placeholder Text for Input Type Date

Not showing placeholder for input type=date field

It may not be appropriate... but it helped me.

<input placeholder="Date" class="textbox-n" type="text" onfocus="(this.type='date')" id="date">

Show placeholder text for input type date

use onfocus="(this.type='date')", example:

<input required="" type="text" class="form-control" placeholder="Date" onfocus="(this.type='date')"/>

How do I simulate placeholder functionality on input date field?

I'm using the following CSS only trick:

  input[type="date"]:before {    content: attr(placeholder) !important;    color: #aaa;    margin-right: 0.5em;  }  input[type="date"]:focus:before,  input[type="date"]:valid:before {    content: "";  }

<input type="date" placeholder="Choose a Date" />

Placeholder for input type date (only when no value entered)

What you can do is to use change event, in place of focus. By using change, the changes will take place only when input date would be valid :)

$( ".dateInput" ).change(function() {
  if ( $(this).attr('value') != '' ) {
    $(this).attr("placeholder", "").css('text-align', 'left');
    console.log('no place');
  } else {
    $(this).attr("placeholder", "Date of Birth*").css('text-align', 'right');
    console.log('place');
  }
});

.loanInput {
    width: 400px;
    border: 3px solid #008e39;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 20px;
    border-radius: 8px;
    padding: 5px 10px;
    margin-top: 20px;
}

input[type=date] {
  text-align: right;
}

input[type="date"]:before {
  color: #999;
  content: attr(placeholder) !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="date" class="loanInput dateInput" required placeholder="Date of Birth*">

Show Placeholder Text for Input Type Date

Not showing placeholder for input type=date field

Show placeholder text for input type date

How do I simulate placeholder functionality on input date field?

Placeholder for input type date (only when no value entered)

Related Topics

Leave a reply