SOLVED

Form Field Date: How to Change the Placeholder?

Go to solution
Anonymous
Not applicable

Form Field Date: How to Change the Placeholder?

Hi all,

I'm currently working on a project that includes Field Date on the form.
I'm trying to change the placeholder of the Field Date and I included this code on the CSS.

input[type="date"]:before {

    content: attr(placeholder) !important;

  }

  input[type="date"]:focus:before,

  input[type="date"]:valid:before {

    content: "Date of Birth" !important;

  }

It's working but the mm/dd/yyyy is still on the field and the placeholder is not working in firefox.

Does anyone have a solution for this?

Thank you!

1 ACCEPTED SOLUTION

Accepted Solutions
Level 10 - Community Moderator

Re: Form Field Date: How to Change the Placeholder?

Can't do it that way.

True <input type=date> fields (Chrome, Edge, the very latest Firefox) don't have string placeholders, they only show the date, ever.

However, polyfilled date fields (Firefox, Safari, IE) are actually <input type=text> fields with JS/CSS/HTML-powered datepicker widgets.  Those can have placeholders.

Marketo automatically switches between native and polyfilled versions. You need to override that auto-switching so that it uses the polyfill in all browsers:

MktoForms2.Modernizr.inputtypes.date = false;

MktoForms2.$("body").on("mkto_date_polyfilled", function(e) {

   MktoForms2.whenReady(function(form) {

      var formEl = form.getFormElem()[0],

         dateOfBirthEl = formEl.querySelector("#DateofBirth"),

         dateOfBirthPicker = formEl.querySelector("#DateofBirth ~ .mktoDateButton");

      dateOfBirthEl.type = "text";

      dateOfBirthEl.placeholder = "Date of Birth";

      dateOfBirthPicker.style.height = MktoForms2.$(dateOfBirthEl).outerHeight() + "px";

   });

});

Then you get cross-browser free-text placeholders. Chrome on left, Firefox on right:

pastedImage_0.png

View solution in original post

2 REPLIES 2
Level 10 - Community Moderator

Re: Form Field Date: How to Change the Placeholder?

Can't do it that way.

True <input type=date> fields (Chrome, Edge, the very latest Firefox) don't have string placeholders, they only show the date, ever.

However, polyfilled date fields (Firefox, Safari, IE) are actually <input type=text> fields with JS/CSS/HTML-powered datepicker widgets.  Those can have placeholders.

Marketo automatically switches between native and polyfilled versions. You need to override that auto-switching so that it uses the polyfill in all browsers:

MktoForms2.Modernizr.inputtypes.date = false;

MktoForms2.$("body").on("mkto_date_polyfilled", function(e) {

   MktoForms2.whenReady(function(form) {

      var formEl = form.getFormElem()[0],

         dateOfBirthEl = formEl.querySelector("#DateofBirth"),

         dateOfBirthPicker = formEl.querySelector("#DateofBirth ~ .mktoDateButton");

      dateOfBirthEl.type = "text";

      dateOfBirthEl.placeholder = "Date of Birth";

      dateOfBirthPicker.style.height = MktoForms2.$(dateOfBirthEl).outerHeight() + "px";

   });

});

Then you get cross-browser free-text placeholders. Chrome on left, Firefox on right:

pastedImage_0.png

View solution in original post

Anonymous
Not applicable

Re: Form Field Date: How to Change the Placeholder?

Hi Sanford,

Thank you for this!
Again you save the day!

Thank you!