How can you include an SVG icon in a custom prompt input?

Help
,
1

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:

image
image794×124 2.29 KB

Using custom prompts:

image
image770×160 2.24 KB

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 :pray:

2

Got the styling to be slightly better by changing the html to look like this

<div class="ulp-field">
    <label for="date-of-birth">
        {{ prompt.screen.texts.varDateOfBirthLabel }}
    </label>
        <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>

Result:

image
image578×524 6.4 KB

Still not quite there