How to change date value to text/string

I have this code:

        <form class="form-inline">
            <input id="date" type="date" id="arrival" placeholder="arrival" name="arrival" value="Arrival">
            <input type="date" id="departure" placeholder="departure" name="departure">
            <select id="adults" name="adults" placeholder="People">
                <option value="0">Guests</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
            <button type="submit">Book Now</button>

the first 2 inputs are for date, when I see the site I get the dd/mm/yyyy format shown, I don’t want to show there any date but the text ‘Date of arrival’.
I tried to google it in the last 2 days, couldn’t find any HTML/CSS/JS code to get it sorted, tried with placeholder and value and it didn’t work, nor JS code that I found online.
will be happy to get any help, thanks!

Hi, I google it too and the first blog I found says:

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.
Because you are required to have a custom placeholder value for input type ‘date’, and you have a drop-down calendar where the user can select the date from.

here is the link

I have tried it and I think that you can also add:


so when focus out it backs to type: text

it works! thank you! not the nicest way, but it is something :slight_smile:

yes I know, but I think that’s the only way, (otherwise you should do it from scratch…)

thank you a lot! now just need to figure out how to get the focus out to work too

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.