Contact Form 7 - Adding placeholder to Date Field

Question

I've got two fields on a site to let users choose a date to pickup and return a rental vehicle.

I need a placeholder in both fields to indicate what information is required in each field.

I've followed the official advice here, by doing the below:

[date* FromDate placeholder "Start Date"]

[date* ToDate placeholder "Return Date"]

However, the result is simply the blank date.

The placeholder is present in the HTML code outputted too:

<input type="date" name="FromDate" value="" class="wpcf7-form-control wpcf7-date wpcf7-validates-as-required wpcf7-validates-as-date" aria-required="true" aria-invalid="false" placeholder="Start Date">

Solution 1

Add this:

<input type="text" onfocus="(this.type='date')" onblur="(this.type='text')"  name="FromDate" value="" class="wpcf7-form-control wpcf7-date wpcf7-validates-as-required wpcf7-validates-as-date" aria-required="true" aria-invalid="false" placeholder="Start Date">

Solution 2

You can use this WordPress plugin: https://wordpress.org/plugins/date-time-picker-for-contact-form-7/

After you've installed and activated the plugin just add text field and add appropriate class:

[text EventDate class:walcf7-datepicker placeholder"Event date"]

Classes:
Only for Date Picker: walcf7-datepicker
Only for Time Picker: walcf7-timepicker
For both Date and Time Picker: walcf7-datetimepicker

Comments

[WP Learner]

Refer contactform7.com/date-field. It explains how to add placeholders in date field.

[Sam Johnson]

@user2584538 Sorry if I'm completely missing it, but I think that page just refers to the page I linked above which isn't working for me?

[WP Learner]

That reference has complete code [date* your-date min:2013-01-01 max:2013-12-31 step:7 class:required "2013-04-01"]

[Sam Johnson]

@user2584538 Again, perhaps I'm misunderstanding - but that doesn't appear to create a placeholder. If I copy and paste that exact code, it just sets restrictions on the dates that can be selected.

[WP Learner]

"2013-04-01" this is the placeholder text of above snippet. Ignore what you don't want like min and/or max.

[Sam Johnson]

@user2584538 Ahh I see what you mean. In the question I mentioned I wanted 'Start Date' as the placeholder, but your suggestion would just set a date as the placeholder.

[Sam Johnson]

Thanks, how would I add that to the shortcode though?

[Thomas Miller]

When editing the form via the Contact form 7 interface, you can simply replace the generated [date ... ] tag with this html directly.

[Maulik patel]

this is not working in ios device Please give me any solution

[Jean Willian S. J.]

Any idea how to change the display format?