CODEWITHSUNDEEP
html
Antoine Clavijo
Antoine Clavijo

Reputation: 1305

Html5 month input placeholder

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

Upvotes: 0

Views: 5405

Answers (3)

Pabasaraa
Pabasaraa

Reputation: 1

Someone still looking for an answer I have a workaround to solve this. There is no actual "easy" way to add a placeholder to and input type date, time, or month fields, but you can do this,

<input
      type="text"
      name="month"
      id="month"
      onFocus={(e) => (e.target.type = "month")}
      onChange={handleDateChange}
      placeholder="Select a month"
    />

This will treat the input type as text until we focus on it, then it will change the type to month.

Hope this will help :)

Upvotes: 0

Thando
Thando

Reputation: 11

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

Upvotes: 1

blurfus
blurfus

Reputation: 14031

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">

Upvotes: 3

Related Questions