How do I simulate placeholder functionality on input date field

Question

It s impossible to use placeholder on date fields but I really need it   I want two date inputs with texts  From  and  To  on each one as placeholders

User · Answer

use this input attribute events  onfocus   this type  date    onblur   this type  text       x000D   x000D   lt link rel  stylesheet  href  https   stackpath bootstrapcdn com bootstrap 4 3 1 css bootstrap min css  integrity  sha384-ggOyR0iXCbMQv3Xipma34MD dH 1fQ784 j6cY iJTQUOhcWr7x9JvoRxT2MZw1T  crossorigin  anonymous  gt  x000D   x000D   lt div class  container mt-3  gt  x000D     lt label for  date  gt Date    lt  label gt  x000D     lt input placeholder  Your Date  class  form-control  type  text  onfocus   this type  date    onblur   this type  text    id  date  gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Ok  so this is what I have done     document  on  change    birthday  function        if     birthday   val                      birthday   addClass  hasValue         else              birthday   removeClass  hasValue               This is to remove the placeholder when a value is given   input type  date   before     content  attr placeholder   important    color   5C5C5C    margin-right  0 5em    input type  date   focus before  input type  date   hasValue before     content      important    margin-right  0      On focus or if  hasValue  remove the placeholder and its margin

User · Answer

I m using this css method in order to simulate placeholder on the input date   The only thing that need js is to setAttribute of the value  if using React  it works out of the box   x000D   x000D  input type  date     x000D    position  relative  x000D    x000D   x000D  input type  date   before   x000D    content  attr placeholder   x000D    position  absolute  x000D    top  0  x000D    left  0  x000D    right  0  x000D    bottom  0  x000D    background   fff  x000D    color  rgba 0  0  0  0 65   x000D    pointer-events  none  x000D    line-height  1 5  x000D    padding  0 0 5rem  x000D    x000D   x000D  input type  date   focus before  x000D  input type  date   not  value      before x000D    x000D    display  none  x000D    x000D   lt input type  date  placeholder  Choose date  value    onChange  this setAttribute  value   this value     gt  x000D   x000D   x000D

User · Answer

The HTML5 date input field actually does not support the attribute for placeholder  It will always be ignored by the browser  at least as per the current spec   As noted here

User · Answer

Got the most easiest hack for this problem-use this syntax in your HTML-input-tag        lt input type  quot text quot  id  quot my element id quot  placeholder  quot select a date quot  name  quot my element name quot  onfocus  quot  this type  date   quot    gt         lt  div gt

User · Answer

Try this   Add a placeholder attribute to your field with the value you want  then add this jQuery       placeholder    each function          this  val   this  attr  placeholder          focus function        if    this  val        this  attr  placeholder        this  val             blur function        if    this  val              this  val   this  attr  placeholder               I ve not tested it for fields that can t take placeholders but you shouldn t need to change anything in the code at all   On another note  this code is also a great solution for browsers that don t support the placeholder attribute

User · Answer

You can use CSS s before pseudo   x000D   x000D   dateclass     width  100       dateclass placeholderclass  before     width  100     content  attr placeholder       dateclass placeholderclass hover  before     width  0     content        x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 1 12 4 jquery min js  gt  lt  script gt    lt input   type  date    placeholder  Please specify a date    onClick    this  removeClass  placeholderclass      class  dateclass placeholderclass  gt  x000D   x000D   x000D   FIDDLE

User · Answer

You can do something like this    lt input onfocus   this type  date    class  js-form-control  placeholder  Enter Date  gt

User · Answer

I m using the following CSS only trick    x000D   x000D    input type  date   before   x000D      content  attr placeholder   important  x000D      color   aaa  x000D      margin-right  0 5em  x000D      x000D    input type  date   focus before  x000D    input type  date   valid before   x000D      content      x000D      x000D   lt input type  date  placeholder  Choose a Date    gt  x000D   x000D   x000D

User · Answer

CSS   x000D   x000D  input type  date    position  relative   x000D  input type  date   before   x000D   position  absolute left  0px top  0px  x000D   content   Enter DOB   x000D   color   999  x000D   width  100  line-height  32px  x000D    x000D  input type  date   valid before  display  none   x000D   lt input type  date  required   gt  x000D   x000D   x000D

User · Answer

Using a jQuery  sure you can achieve this with Vanilla  This make sure the date format still the same    x000D   x000D    function     x000D        sdate   on  focus   function     x000D        this  attr  type    date    x000D        x000D        sdate   on  blur   function     x000D      if    this  val         important x000D          this  attr  type    text    x000D        x000D        x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 0 0 jquery min js  gt  lt  script gt  x000D   x000D   lt input type  text  class  sdate  placeholder  From  gt  x000D   x000D   x000D

User · Answer

As mentionned here  I ve made it work with some   before  pseudo-class and a small bit of javascript  Here is the idea      myInput before  content  Date of birth   width 100   color  AAA       myInput focus before    myInput not empty before  content none     Then in javascript  add the  not empty  class depending on the value in the onChange and onKeyUp events   You can even add all of this dynamically on every date fields  Check my answer on the other thread for the code   It s not perfect but it s working well in Chrome and iOS7 webviews  Maybe it could help you

User · Answer

The input type  date   DOMElement only takes the following value  YYYY-MM-DD  any other format or text with be skipped   Live Demo  HTML   lt input type  text  placeholder  bingo    gt   lt input type  date  placeholder  2013-01-25    gt    Pure JavaScript  window onload   function             Grab all elements with a placeholder attribute        var element   document querySelectorAll   placeholder             Loop through each found elements        for  var i in element               If the element is a DOMElement and has the nodeName  INPUT             if  element i  nodeType    1  amp  amp  element i  nodeName     INPUT                     We change the value of the element to its placeholder attr value                element i  value   element i  getAttribute  placeholder                   We change its color to a light gray                element i  style color     777                   When the input is selected clicked on                element i  onfocus   function  event                       If the value within it is the placeholder  we clear it                    if  this value    this getAttribute  placeholder                          this value                              Setting default text color                        this style color     000                                                     We the input is left                element i  onblur   function  event                       If the field is empty  we set its value to the placeholder                    if  this value                              this value   this getAttribute  placeholder                        this style color     777                                                          Performance review  In this exact case  with 2 input elements  Pure JavaScript is  40     10  faster   With 32 input elements  the difference remains the same   43     10  faster for Pure JS

User · Answer

As i mentioned here   initially set the field type to text   on focus change it to type date

[html] How do I simulate placeholder functionality on input date field?

Examples related to html