Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I change the HTML5 placeholder text that appears in date field in Chrome

I was pleasantly surprised to discover that the following code, when viewed in Chrome, renders a datepicker:

<input type="date" name="wdate" id="wdate" value="" placeholder="date of purchase" />

However, the placeholder text is ignored and "Date/Month/Year" is shown instead.

How can I change the placeholder text and use my own?

I have already tried:

<script>
    $("#wdate").attr("placeholder", "Day/Month/Year of purchase");
</script>

but to no avail.

like image 376
Jez D Avatar asked Oct 12 '12 14:10

Jez D


People also ask

How we can change the placeholder of input type date?

The placeholder attribute does not work with the input type Date, so place any value as a placeholder in the input type Date. You can use the onfocus=”(this. type='date') inside the input filed.

How do I change placeholder text in HTML?

You can use the ::placeholder pseudo-element to change the styles of the placeholder text, which includes the ability to change the background. The code in this example uses a Sass function to generate code for support in older browsers as well.

How do you style placeholder text?

Use the ::placeholder pseudo-element to style your placeholder text in an <input> or <textarea> form element. Most modern browsers support this, but for older browsers, vendor prefixes will be required.

How do I change the date format in HTML?

To set and get the input type date in dd-mm-yyyy format we will use <input> type attribute. The <input> type attribute is used to define a date picker or control field. In this attribute, you can set the range from which day-month-year to which day-month-year date can be selected from.


1 Answers

The date type doesn't support placeholder attribute. Also, the WebKit implementation says it's fixed.

like image 128
int32_t Avatar answered Oct 13 '22 00:10

int32_t