Not showing placeholder for input type date field

Question

I am doing a phonegap app  When I am trying type  date  input field as shown below  it shows date picker in iPhone as I expected but it doesn t show the placeholder I have given  I found the same issue here in SO  but no solution anywhere     lt input placeholder  Date  class  textbox-n  type  date  id  date  gt

User · Answer

Adressing the problem in the current correct answer "clicking the field shows the onscreen keyboard instead of the datepicker":

The problem is caused by the Browser behaving according to the type of input when clicking (=text). Therefore it is necessary to stop from focussing on the input element (blur) and then restart focus programmatically on the input element which was defined as type=date by JS in the first step. Keyboard displays in phonenumber-mode.

<input placeholder="Date" type="text" onfocus="this.type='date';
                      this.setAttribute('onfocus','');this.blur();this.focus();">

User · Answer

None of the solutions were working correctly for me on Chrome in iOS 12 and most of them are not tailored to cope with possible multiple date inputs on a page  I did the following  which basically creates a fake label over the date input and removes it on tap  I am also removing the fake label if viewport width is beyond 992px   JS   function addMobileDatePlaceholder         if  window matchMedia   min-width  992px    matches               input type  date     next  span date-label   remove            return false                input type  date     after   lt span class  date-label    gt             span date-label   each function             var  placeholderText     this  prev  input type  date     attr  placeholder              this  text  placeholderText                   input type  date     on  click   function               this  next  span date-label   remove                CSS    media  max-width  991px        input type  date             padding-left  calc 50  - 45px              span date-label           pointer-events  none          position  absolute          top  2px          left  50           transform  translateX -50            text-align  center          height  27px          width  70           padding-top  5px

User · Answer

According to the HTML standard      The following content attributes must not be specified and do not apply to the element  accept  alt  checked  dirname  formaction  formenctype  formmethod  formnovalidate  formtarget  height  inputmode  maxlength  minlength  multiple  pattern  placeholder  size  src  and width

User · Answer

Based on deadproxor and Alessio answers  I would try only using CSS   input type  date    before      color   999      content  attr placeholder          input type  date   focus  before       content      important      And if you need to make the placeholder invisible after writing something in the input  we could try using the  valid and  invalid selectors  if your input is a required one   EDIT  Here the code if you are using required in your input    x000D   x000D  input type  date    before   x000D   color   999999  x000D   content  attr placeholder   x000D    x000D  input type  date     x000D   color   ffffff  x000D    x000D  input type  date   focus  x000D  input type  date   valid   x000D   color   666666  x000D    x000D  input type  date   focus  before  x000D  input type  date   valid  before   x000D   content      important  x000D    x000D   lt input type  date  placeholder  Date  required gt  x000D   x000D   x000D

User · Answer

I used this in my css   input type  date   before      color lightgray      content attr placeholder      input type  date   full before       color black      content    important      and put somenthing like this into javascript       myel   on  input  function        if   this  val   length gt 0         this  addClass  full      else       this  removeClass  full                it works for me for mobile devices  Ios8 and android   But I used jquery inputmask for desktop with input text type  This solution it s a nice way if your code run on ie8

User · Answer

Here is another possible hack not using js and still using css content  Note that as  after is not supported on some browser for inputs  we need to select the input in another way  same for content attr       x000D   x000D  input type date  invalid span after   x000D    content  Birthday   x000D    position absolute  x000D    left 0  x000D    top 0  x000D    x000D   x000D  input type date  focus invalid span after   x000D    display none  x000D    x000D   x000D  input not  focus  invalid   x000D    color transparent  x000D    x000D   x000D  label wrapper   x000D   position relative  x000D    x000D   lt label class  wrapper  gt  x000D    lt input x000D      type  date  x000D       required  required   x000D     gt  x000D    lt span gt  lt  span gt  x000D   lt  label gt  x000D   x000D   x000D

User · Answer

It works for me   input type  date   after     content  attr placeholder

User · Answer

It may not be appropriate    but it helped me    x000D   x000D   lt input placeholder  Date  class  textbox-n  type  text  onfocus   this type  date    id  date  gt  x000D   x000D   x000D

User · Answer

I used this whit jQuery  http   jsfiddle net daviderussoabram 65w1qhLz      input type  date    input type  datetime    input type  datetime-local    input type  month    input type  time    input type  week     each function         var el   this  type     el  attr  type        if    el  val            el  attr  type    text          el  focus function               el  attr  type   type           el click                  el  blur function             if    el  val            el  attr  type    text

User · Answer

If you use mvp s method but add the onblur event to change it back to a text field so the placeholder text appears again when the input field looses focus  It just makes the hack a little bit nicer    x000D   x000D   lt input placeholder  Date  class  textbox-n  type  text  onfocus   this type  date    onblur   this type  text    id  date    gt  x000D   x000D   x000D    Hope this helps

User · Answer

You could use the  value  attribute  for example    lt input type  date  value  Date  class  textbox-n  id  date   gt

User · Answer

You can    set it as type text  convert to date on focus make click on it    let user check date on change store the value set input to type text set text type input value to the stored value   like this      x000D   x000D      dateplaceholder   change function evt    x000D    var date   new Date     dateplaceholder   val     x000D        dateplaceholder   attr  type    text    x000D        dateplaceholder   val date getDate            date getMonth     1          date getFullYear     x000D      x000D      dateplaceholder   focus function evt    x000D        dateplaceholder   attr  type    date    x000D    setTimeout      dateplaceholder   click      500   x000D      x000D      dateplaceholder   attr  type    text    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 0 3 jquery min js  gt  lt  script gt  x000D   lt input type  date  id  dateplaceholder  placeholder  Set the date    gt  x000D   x000D   x000D

User · Answer

I think all you have to do is change the model to say the date field is nullable and then put  Required  on it if it is required   If you do this the placeholder text does appear

User · Answer

x000D   x000D   lt input placeholder  Date  type  text  onMouseOver   this type  date    onMouseOut   this type  text     id  date  class  form-control  gt  x000D   x000D   x000D    Revised code of mumthezir

User · Answer

Took me a while figuring this one out  leave it as type  text   and add onfocus   this type  date     just as shown above   I even like the onBlur idea mentioned above   lt input placeholder  Date  class  textbox-n  type  text  onfocus   this type  date    onblur   this type  text    id  date  gt   Hope this helps anyone who didn t quite gather whats going on above

User · Answer

HTML    lt div gt       lt input class  ui-btn ui-btn-icon-right ui-corner-all ui-icon-calendar ui-shadow  id  inputDate  type  date   gt       lt h3 id  placeholder-inputDate  gt Date Text lt  h3 gt   lt  div gt    JavaScript       inputDate   ready function          placeholder-inputDate   attr  style         top           placeholder-inputDate   parent   position   top   10         px  left           placeholder-inputDate   parent   position   left   0     px  position  absolute         inputDate   attr  style         width           placeholder-inputDate   width     32     px

User · Answer

Hey so I ran into the same issue last night and figured out a combination of all of your answer and some sparkling magic are doing a good job   The HTML    lt input type  date   name  flb5  placeholder  Datum      class  datePickerPlaceHolder   gt    The CSS    media max-width  1024px       input datePickerPlaceHolder before         color   A5A5A5    here you have to match the placeholder color of other inputs       content  attr placeholder   important           The jQuery     document  ready function            input type  date     change function                if   this  val   length  lt  1                      this  addClass  datePickerPlaceHolder                  else                     this  removeClass  datePickerPlaceHolder                                Explanation  So  what is happening here  first of all in the HTML  this is pretty straight forward just doing a basic HMTL5-date-input and set a placeholder  Next stop  CSS  we are setting a  before-pseudo-element to fake our placeholder  it just takes the placeholder s attribute from the input itself  I made this only available down from a viewport width of 1024px - why im going to tell later  And now the jQuery  after refactoring a couple of times I came up with this bit of code which will check on every change if there is a value set or not  if its not it will  re- add the class  vice-versa   KNOW ISSUES    there is a problem in chrome with its default date-picker  thats what the media-query is for  It will add the placeholder infront of the default  dd mm yyyy -thing  You could also set the placeholder of the date-input to  date  nbsp   and adjust the color incase of no value inside the input   for me this resulted in some other smaller issues so i went with just not showing it on  bigger  screens   hope that helps  cheerio

User · Answer

Found a better way to handle user basic comprehension with mouseover and opening datepicker on click     lt input type  text  onfocus   this type  date    onmouseover   this type    date    onblur   this value   this type    date    this type    text    id  date start  placeholder  Date  gt   Also hide webkit arrow and make it 100  wide to cover the click    input type  date         position  relative    input type  date    -webkit-calendar-picker-indicator     position  absolute    height  100     width  100     opacity  0    left  0    right  0    top 0    bottom  0

User · Answer

Expanding on  mvp s solution with unobtrusive javascript in mind  here s the approach   HTML    lt input type  text  placeholder  Date  class  js-text-date-toggle  gt    Javascript       js-text-date-toggle   on  focus   function         this  attr  type    date       on  blur   function         this  attr  type     text

User · Answer

From Angular point of view I managed to put a placeholder in input type date element   First of all I defined the following css    placeholder       color   text-grey         input type  date    before       content  attr placeholder          input  -webkit-input-placeholder       color   text-grey        The reason why this is neccessary is that if css3 content has different color that the normal placeholder  so I had to use a common one    lt input  birthDate          class  birthDate placeholder           type  date           formControlName  birthDate           placeholder    getBirthDatePlaceholder     translate              class error    onboardingForm controls birthDate valid  amp  amp  onboardingForm controls birthDate dirty           autocomplete  off            gt    Then in the template used a viewchild birthDate attribute  to be able to access this input from the component  And defined an angular expression on the placeholder attribute  which will decide if we show the placeholder or not  This is the major drawback of the solution  is that you have to manage the visibility of the placeholder    ViewChild  birthDate   birthDate   getBirthDatePlaceholder       if   this birthDate        return      else       return this birthDate nativeElement value               ONBOARDING FORM COMPONENT HINT BIRTH DATE

User · Answer

This works for me using this as input element    lt input name  birthdate  class    class  wpcf7-form-control wpcf7-date   wpcf7-validates-as-required wpcf7-validates-as-date birthdate  value      aria-required  true  aria-invalid  false  placeholder  birthdate      type  date  gt    This CSS shows a permanent placeholder  The selected value is shown after the placeholder   input type  date   before       content  attr placeholder   important      margin-right  0 5em      display  block       only for FF     -moz-document url-prefix         input type  date   before           content  attr placeholder   important          margin-right  0 5em          display  block          position  absolute          left  200px     please adopt              I use this solution for a Wordpress form with contact-form-7 plugin

User · Answer

I took jbarlow idea  but I added an if in the onblur function so the fields only change its type if the value is empty   lt input placeholder  Date  class  textbox-n  type  text  onfocus   this type  date    onblur   this value         this type  text    this type  date    id  date  gt

User · Answer

Im working with ionicframework and solution provided by  Mumthezir is almost perfect  In case if somebody would have same problem as me after change  input is still focused and when scrolling  value simply dissapears  So I added onchange to make input blur     lt input placeholder  Date  class  textbox-n  type  text  onfocus    this type  date    onchange  this blur      id  date  gt

User · Answer

Extension of Mumthezir s version that works better on iOS  based on Mathijs Segers  comment    Uses some AngularJS but hopefully you get the idea     lt label style  position relative  gt       lt input type  date              name  dateField              onfocus   this type  date               ng-focus  dateFocus true  ng-blur  dateFocus false    gt       lt span ng-if   dateFocus  amp  amp   form date  class  date-placeholder  gt          Enter date      lt  span gt   lt  label gt    Because it s all wrapped in a label  clicking the span automatically focuses the input   CSS     date-placeholder       display  inline-block      position  absolute      text-align  left      color   aaa      background-color  white      cursor  text         Customize this stuff based on your styles        top  4px      left  4px      right  4px      bottom  4px      line-height  32px      padding-left  12px

User · Answer

As of today  2016   I have successfully used those 2 snippets  plus they work great with Bootstrap4    Input data on the left  placeholder on the left  input type date      text-align  right     input type  date   before     color  lightgrey    content  attr placeholder   important    margin-right  0 5em      Placeholder disappear when clicking  input type  date   before     color  lightgrey    content  attr placeholder   important    margin-right  0 5em    input type  date   focus before     content      important

User · Answer

To summarize the date inputs problem    You have to display them  i e  avoid display none  otherwise the input UI will not be triggered   a placeholder is contradictory with them  as per the spec  and because they have to display a specific UI    converting them to another input type for the unfocused time do allows placeholders  but focus then triggers the wrong input UI  keyboard   at least for a small time  because focus events cannot be cancelled  inserting  before  or adding  after  content doesn t prevent the date input value to be displayed    The solution I found to meet those requirements is to use the usual trick to style native form elements   ensure the element is displayed but not visible  and display its expected style through its associated label  Typically  the label will display as the input  including a placeholder   but over it    So  an HTML like    lt div class  date-input gt     lt input id  myInput  type  date  gt      lt label for  myInput  gt        lt span class  place-holder  gt Enter a date lt  span gt      lt  label gt   lt  div gt    Could be styled as    date-input     display  inline-block    position  relative       Fields overriding    input type date    label     position  absolute      Same origin as the input  to display over it      background  white       Opaque background to hide the input behind      left  0                 Start at same x coordinate          Common input styling    input type date   label          Must share same size to display properly  focus  etc        width  15em    height  1em    font-size  1em      Any event  click  focus  on such an associated label will be reflected on the field itself  and so trigger the date input UI   Should you want to test such a solution live  you can run this Angular version from your tablet or mobile

User · Answer

SO what i have decided to do finally is here and its working fine on all mobile browsers including iPhones and Androids    x000D   x000D    document  ready function    x000D   x000D       input type  date     each function e    x000D      var  el     this    x000D           this placeholder     this  closest  label   find   custom-placeholder    x000D       el on  change  function    x000D        if  el val     x000D           this placeholder text      x000D         else   x000D           this placeholder text  el attr  placeholder     x000D          x000D          x000D        x000D     x000D      x000D  label   x000D    position  relative    x000D    x000D   custom-placeholder   x000D       font  gt   proxima-nova-light 26px 40px   x000D      position  absolute  x000D      top  0  x000D      left  0  x000D      z-index  10  x000D      color   999  x000D    x000D   lt label gt  x000D     lt input type  date  placeholder  Date  gt  x000D     lt span class  custom-placeholder  gt Date lt  span gt  x000D   lt  label gt  x000D   x000D   x000D                                      Date

User · Answer

Found a better way to solve your problem  I think this will help you  when focused out  the box will change type into text so it will show your placeholder  when focused in  its type changes into date so the calendar view will be shown    lt input placeholder  Date  class  textbox-n  type  text  onfocusin   this type  date    onfocusout   this type  text     id  date  gt

User · Answer

try my solution  I use  required  attribute to get know whether input is filled and if not I show the text from attribute  placeholder     HTML  lt input required placeholder  Date  class  textbox-n  type  date  id  date  gt     CSS input type  date   not  valid  before      content  attr placeholder         style it like it real placeholder

User · Answer

If you re only concerned with mobile   input type  date   invalid before      color  rgb 117  117  117       content  attr placeholder

User · Answer

I m surprised there s only one answer with an approach similar to the one I used  I got the inspiration from  Dtipson s comment on  Mumthezir VP s answer     I use two inputs for this  one is a fake input with type  text  on which I set the placeholder  the other one is the real field with type  date   On the mouseenter event on their container  I hide the fake input and show the real one  and I do the opposite on the mouseleave event  Obviously  I leave the real input visibile if it has a value set on it  I wrote the code to use pure Javascript but if you use jQuery  I do  it s very easy to  convert  it    x000D   x000D      isMobile  function taken from this reply  x000D     https   stackoverflow com a 20293441 3514976 x000D  function isMobile     x000D    try   document createEvent  TouchEvent    return true    x000D    catch e    return false    x000D    x000D   x000D  var deviceIsMobile   isMobile    x000D   x000D  function mouseEnterListener event    x000D    var realDate   this querySelector   real-date    x000D       if it has a value it s already visible  x000D    if  realDate value    x000D      this querySelector   fake-date   style display    none   x000D      realDate style display    block   x000D      x000D    x000D   x000D  function mouseLeaveListener event    x000D    var realDate   this querySelector   real-date    x000D       hide it if it doesn t have focus  except x000D       on mobile devices  and has no value  x000D    if  deviceIsMobile    document activeElement     realDate   amp  amp   realDate value    x000D      realDate style display    none   x000D      this querySelector   fake-date   style display    block   x000D      x000D    x000D   x000D  function fakeFieldActionListener event    x000D    event preventDefault    x000D    this parentElement dispatchEvent new Event  mouseenter     x000D    var realDate   this parentElement querySelector   real-date    x000D       to open the datepicker on mobile devices x000D       I need to focus and then click on the field  x000D    realDate focus    x000D    realDate click    x000D    x000D   x000D  var containers   document getElementsByClassName  date-container    x000D  for var i   0  i  lt  containers length    i    x000D    var container   containers i   x000D     x000D    container addEventListener  mouseenter   mouseEnterListener   x000D    container addEventListener  mouseleave   mouseLeaveListener   x000D     x000D    var fakeDate   container querySelector   fake-date    x000D       for mobile devices  clicking  tapping  x000D       on the fake input must show the real one  x000D    fakeDate addEventListener  click   fakeFieldActionListener   x000D       let s also listen to the  focus  event x000D       in case it s selected using a keyboard  x000D    fakeDate addEventListener  focus   fakeFieldActionListener   x000D     x000D    var realDate   container querySelector   real-date    x000D       trigger the  mouseleave  event on the x000D       container when the value changes  x000D    realDate addEventListener  change   function     x000D      container dispatchEvent new Event  mouseleave     x000D        x000D       also trigger the  mouseleave  event on x000D       the container when the input loses focus  x000D    realDate addEventListener  blur   function     x000D      container dispatchEvent new Event  mouseleave     x000D        x000D    x000D   real-date   x000D    display  none  x000D    x000D   x000D     a simple example of css to make  x000D  them look like it s the same element    x000D   real-date   x000D   fake-date   x000D    width  200px  x000D    height  20px  x000D    padding  0px  x000D    x000D   lt div class  date-container  gt  x000D     lt input type  text  class  fake-date  placeholder  Insert date  gt  x000D     lt input type  date  class  real-date  gt  x000D   lt  div gt  x000D   x000D   x000D    I tested this also on an Android phone and it works  when the user taps on the field the datepicker is shown  The only thing is  if the real input had no value and the user closes the datepicker without choosing a date  the input will remain visible until they tap outside of it  There s no event to listen to to know when the datepicker closes so I don t know how to solve that     I don t have an iOS device to test it on

User · Answer

I ended up using the following   Regarding Firefox comment s   Generally  Firefox will not show any text placeholder for inputs type date  But as this is a Cordova PhoneGap question this should be of no concern  Unless you want to develop against FirefoxOS     x000D   x000D  input type  date   not  has-value  before  x000D    color  lightgray  x000D    content  attr placeholder   x000D    x000D   lt input type  date  placeholder  MY PLACEHOLDER  onchange  this className  this value      has-value       gt  x000D   x000D   x000D

[html] Not showing placeholder for input type="date" field

Examples related to html

Examples related to cordova

Examples related to datepicker

Examples related to placeholder