I am busy working on migrating our universal login experience from classic to New.
We have custom fields on sign up and one of them is a date picker for date of birth. The field requires an SVG icon styles in the input box.
when I try port over the custom JS date picker (has to be custom due to styling requirements, the SVG is displayed above the input text box and the input text box does not inherit the page style at all
Current formatting:
Using custom prompts:
Prompt code:
<script src="https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.3.4/dist/js/datepicker-full.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.3.4/dist/js/locales/es.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.3.4/dist/js/locales/en-GB.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.3.4/dist/js/locales/fr.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.3.4/dist/js/locales/de.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.3.4/dist/js/locales/nl.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.3.4/dist/js/locales/fr-CH.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.3.4/dist/css/datepicker.min.css">
<style>
/*Selected date on datepicker - overriding the class that sets the colour*/
.datepicker-cell.selected {
background-color: #000000 !important;
}
</style>
<script>
window.addEventListener("load", function() {
let locale = new URL(window.location).searchParams.get("locale");
locale = locale ? locale : "en-GB";
let datepicker = document.getElementById("date-of-birth");
let currentDate = new Date();
let date16yearsAgo = new Date(currentDate.setFullYear(currentDate.getFullYear() - 16));
new Datepicker(datepicker, {
language: locale,
maxDate: date16yearsAgo,
autohide: true,
enableOnReadonly: true,
format: "yyyy-mm-dd"
});
});
</script>
<div class="ulp-field">
<label for="date-of-birth">
{{ prompt.screen.texts.varDateOfBirthLabel }}
</label>
<div id="date-of-birth-div">
<div>
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.5 2H6.5V3H9.5V2H10.5V3H13H14V4V5.5V6.5V13V14H13H3H2V13V6.5V5.5V4V3H3H5.5V2ZM3 4H13V5.5H3V4ZM13 6.5H3V13H13V6.5Z" fill="black"/>
</svg>
</div>
<input type="text" name="ulp-date-of-birth" id="date-of-birth" readonly>
</div>
</div>
I could not find anything in the docs or on the community about this. anyone had any luck using a JS date picker and an SVG icon?
I’d appreciate any help on this please 
