0

Someone know how i can add a placeholder mm-aaaa for a input type month like we have with the input type date? I put an example snippet.

<body>
  <label for="month">Month: </label>
  <input type="month" placeholder="foo" name="foo" id="month">
  <label for="birth">Birth: </label>
  <input type="date" placeholder="foo" name="foo" id="birth">
</body>

I always have -------- caracters, and i don't see how to change it.

Thank's

Antoine Clavijo
  • 1,277
  • 2
  • 11
  • 19
  • `placeholder = "foo"` should work, and works in your code snippet as well. Hence, the issue is most likely caused by something else on your page. Edit: [this question](https://stackoverflow.com/questions/18146350/how-do-i-simulate-placeholder-functionality-on-input-date-field#21998995) might be relevant as well. – Tijmen Sep 05 '17 at 15:55
  • I'm on chrome. I test on firefox and i've got a simple input text. It's seem to not be supported a lots a browsers. – Antoine Clavijo Sep 05 '17 at 16:01
  • I've used `placeholder='foo'` a million times, and it's always worked on both Chrome and Firefox, so if you're using those, it's not browser-related. In that case, there must be *something* else on your page which is causing this behaviour. Are you using any sort of library, framework or other script you didn't write? – Tijmen Sep 05 '17 at 16:06
  • @Tijmen I see `--------` (instead of `foo`) as the placeholder. Viewed on Windows/Chrome; on Windows/IE & Windows/Firefox I do see `foo` as the placholder – blurfus Sep 05 '17 at 17:47
  • I looks like there is no support for this `input` type in FF or IE (http://caniuse.com/#search=input%20date) which would explain why it reverts to a generic `input` field (and hence why your placeholder works in those cases) – blurfus Sep 05 '17 at 17:57

2 Answers2

3

I looks like there is no support for this input type in FF or IE (caniuse.com/#search=input%20date)

For those browsers, it seems to set the type attribute to text where your placeholder works (as normal)

For Chrome (which seems to support it), it seems that it does not allow you to combine the two attributes.

You could fake the placeholder similar to below but I have not managed to make the values stay (and the placeholder to not reappear) after an input has been selected.

input[type="month"]::before{
  content: attr(placeholder) !important;
  color: #aaa;
  width: 100%;
}

input[type="month"]:focus::before,
input[type="month"]:active::before {
  content: "";
  width: 0%;
}
<input type="month" placeholder="foo" name="foo" id="month">
blurfus
  • 13,485
  • 8
  • 55
  • 61
  • Hey good altertative, not complete but smart. I'll switch to something more supported, like a jquery plugin but thank's – Antoine Clavijo Sep 06 '17 at 08:19
  • 2
    @blurfus I extended your solution to make it work! Just add :invalid attribute to the first selector and put required attribute in the input. Please update your answer. :) – Rico Apr 22 '21 at 09:29
  • 1
    @blurfus Add also the important keyword to the (content: "") so it overrides the first one – A. Salim Dec 24 '21 at 10:45
  • It breaks when you focus on the "year part" of selection - placeholders overlaps then – Antoniossss Mar 23 '23 at 12:33
  • Maybe it was just different 6 years ago ;) – Antoniossss Mar 23 '23 at 12:57
  • @Antoniossss yes, depending on which browser you are using the support for 'month' or 'week' might be only partial (so the solution above might not be suitable anymore) – blurfus Mar 23 '23 at 18:08
0

Input type month can be used to only select months, checkout the following example: 

<input type="month" value="2019-05" name="foo" id="month">

More details can be found here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/month

MaartenDev
  • 5,631
  • 5
  • 21
  • 33
Thando
  • 1
  • 1