Implementing date picker on new hubspot form's date field

[dhruvang]

First add jQuery UI (Here you can add any other datepicker library you want to use): 

 <link rel="stylesheet" href="https://code.jquery.com/ui/1.14.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
  <script src="https://code.jquery.com/ui/1.14.1/jquery-ui.js"></script>

Implementation code: 

function bindHubSpotDatepicker(hubspotFieldName, event) {
    const inputEl = document.querySelector("input[name='" + hubspotFieldName + "']");
    const fieldBox = inputEl.parentNode.querySelector("[data-hsfc-id='DateInput']")

    $(fieldBox).datepicker({
        dateFormat: "mm - dd - yy",
        onSelect: function () {
            const localDate = $(this).datepicker("getDate");
            const utcTimestamp = Date.UTC(localDate.getFullYear(), localDate.getMonth(), localDate.getDate());
            HubSpotFormsV4.getFormFromEvent(event).setFieldValue(hubspotFieldName, utcTimestamp);
        }
    });
}

window.addEventListener('hs-form-event:on-ready', (event) => {
    const { formId } = event.detail;

    switch (formId) {
        case "xxxxxxxx-abcd-xxxx-xxxx-1111xxx57xxx": // formId
            bindHubSpotDatepicker("0-1/birthdate", event);
            break;
        default:
            break;
    }
});

you code should be placed inside Hubspot form's callback. 

[SamTassey]

Hi @dhruvang, 

Welcome to the Community, and thanks for sharing this! 

Would you be willing to kindly provide some additional details to help the Community understand how you're using this code snippet and what your use case was? Otherwise, if this was intended as a reply to another post, please feel free to send me a direct message, and I’ll be happy to help move it to the appropriate place! 

Thank you! 

Sam, Community Manager