Date Placeholder not working

I can see your problem is resolved – You may add a reply on how you resolved it to help others. Also remember to check it as [resolved]

Hi,
Thank you for your response but the problem has not been resolved – I’m not sure why you think it is?

I want it to show ‘event date (dd/mm/yyyy)’

I guess you want to show as placehoder in the date field? Please see https://prntscr.com/8v95lb??

That screenshot is exactly what I want but I don’t see that?

I’m using Chrome, what browser are you using?

I’m using Chrome, what browser are you using?

?
?I used Firefox

Hi, this is obviously a browser compatibility issue then.

Does anyone have a solution to get this to work across all browsers?
– Currently not working correctly in Chrome and IE/Edge.

Thanks

Please include all your input in the Form and Mail sections of the CF7 interface. If others here are able to understand your actual problem, they may be able to offer a possible solution.

Sure…

Contact Form Code:

<div class="one-half">
    [text* your-name placeholder "your name"]
</div>
<div class="one-half-last">
    [email* your-email placeholder "your email"]
</div>
<div class="clear"></div>
<div class="one-half">
    [tel your-tel placeholder "your telephone"]
</div>
<div class="one-half-last">
   [date event-date min:2015-10-01 max:2050-12-31 placeholder "event date (dd/mm/yyyy)"]
</div>
<div class="clear"></div>
    [textarea event 1x2 placeholder "event details"][hidden your-subject "New Enquiry from a profile on the ERM Website"][hidden hidden-act "post_title"]
    [submit "Send Enquiry"]

[date event-date min:2015-10-01 max:2050-12-31 placeholder “event date (dd/mm/yyyy)”]

That is an HTML5 date field not a text field. HTML 5 date field is supported in some browsers See HTML5 date type

Chrome supports HTML5 date type hence it displays it as a Datepicker using its default date format.

Firefox however does not support new HTML5 date type hence it displays it as a text field with the input placeholder. ????

Thanks again for your response.

I’ve looked into getting the HTML5 date field to show placeholder text and I can see it’s not possible in a clean way so I have changed the field to a text field with placeholder text.

I will now try and ensure only a date in the format dd/mm/yyyy can be entered – do you know how I can do this?

I will now try and ensure only a date in the format dd/mm/yyyy can be
entered – do you know how I can do this?

Refer https://contactform7.com/date-field/ – DD-MM-YYYY format is not supported.

Thanks but I meant validating a normal text field NOT a date field.

I add this to my jQuery, and placeholder for Date is now working ??

$('input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="time"], input[type="week"]').each(function() {
    var el = this, type = $(el).attr('type');
    if ($(el).val() == '') $(el).attr('type', 'text');
    $(el).focus(function() {
        $(el).attr('type', type);
        el.click();
    });
    $(el).blur(function() {
        if ($(el).val() == '') $(el).attr('type', 'text');
    });
});