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.
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.
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.
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.
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.
The date type doesn't support placeholder attribute. Also, the WebKit implementation says it's fixed.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With