How to change date value to text/string

[Dya]

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>
            </select>
            <button type="submit">Book Now</button>
          </form>

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!

[miguelgiacobbe]

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

[miguelgiacobbe]

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

onfocusout=(this.type='text') 

so when focus out it backs to type: text

[Dya]

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

[miguelgiacobbe]

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

[Dya]

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