Change Session Date Format On Event Registration Forms

Are you using the Event Registration Forms with Sessions in Customer Insights – Journeys yet? I wrote about how you can format it nicely in a previous post, but one thing that bugs me about the form is the way the session date is displayed. It’s in US format (month, day, year) with no way to change it. Quite a glaring oversite from Microsoft and not sure if/when this is going to be changed. So this post is out of my own frustration on seeing the dates look entirely wrong for most of the world and wondering if there was another way to change the formatting. Let’s take a look and see four alternatives to change session date formats to modify how they look on your event registration forms.

So first, what do things look like out of the box? This is how the sessions are displayed. If you are in the USA this would look perfectly fine to you right? Well, for the rest of the world, not so accurate. Different countries have different formats. In the UK it is d/m/y rather than m/d/y. If your event is global, you might even want to display it as y/m/d or actually spell out the name of the month and even the name of the day to avoid any confusion altogether.

Adding in a script to the HTML of the form can help us alter the date formatting when the form loads. If you haven’t added a script before, it’s pretty simple. Just paste it in to the HTML directly below the closing style tag like you see below.

Option 1

The first option is to swap the month and the day so it reads day, month, year.

<script>
document.addEventListener("d365mkt-afterformload", function () {
  const spans = document.querySelectorAll("span.msdynmkt_personalization");

  spans.forEach(span => {
    const text = span.textContent.trim();

    // Match US-style date m/d/yyyy
    const usDatePattern = /^(d{1,2})/(d{1,2})/(d{4})$/;

    if (usDatePattern.test(text)) {
      const [, month, day, year] = text.match(usDatePattern);

      // Swap month and day for UK format
      const ukDate = `${day}/${month}/${year}`;
      span.textContent = ukDate;
    }
  });
});
</script>

Option 2

The second option is to use year, month, day instead so it is perhaps more globally acceptable as a date format.

<script>
document.addEventListener("d365mkt-afterformload", function () {
  const spans = document.querySelectorAll("span.msdynmkt_personalization");

  spans.forEach(span => {
    const text = span.textContent.trim();

    // Match US-style date m/d/yyyy
    const usDatePattern = /^(d{1,2})/(d{1,2})/(d{4})$/;

    if (usDatePattern.test(text)) {
      const [, month, day, year] = text.match(usDatePattern);

      // Swap month and day for UK format
      const ukDate = `${year}-${month}-${day} - `;
      span.textContent = ukDate;
    }
  });
});
</script>

Option 3

The third option is to actually display the wording for the month and also include the day of the week to avoid any possible confusion.

  <script>
    document.addEventListener("d365mkt-afterformload", function () {
  const spans = document.querySelectorAll("span.msdynmkt_personalization");

  // If a date like 09/10/2025 is ambiguous (both parts <= 12),
  // set this to true to always swap month and day which would be needed for non US format
  const alwaysSwapAmbiguous = true;

  function getOrdinal(n) {
    n = Number(n);
    if (Number.isNaN(n)) return '';
    const rem100 = n % 100;
    if (rem100 >= 11 && rem100 <= 13) return 'th';
    switch (n % 10) {
      case 1: return 'st';
      case 2: return 'nd';
      case 3: return 'rd';
      default: return 'th';
    }
  }

  spans.forEach(span => {
    const raw = span.textContent.trim();

    // find a date like 9/17/2025 or 17/9/2025 (first match only)
    const match = raw.match(/b(d{1,2})/(d{1,2})/(d{4})b/);
    if (!match) return;

    const a = parseInt(match[1], 10);
    const b = parseInt(match[2], 10);
    const year = parseInt(match[3], 10);

    let day, month; // month as 1..12
    if (a > 12 && b <= 12) {
      // a can't be a month, so it's day (UK style)
      day = a;
      month = b;
    } else if (b > 12 && a <= 12) {
      // b can't be a month, so a is month (US style)
      month = a;
      day = b;
    } else {
      // both <= 12 => ambiguous. follow the swap rule if requested
      if (alwaysSwapAmbiguous) {
        month = b;
        day = a;
      } else {
        month = a;
        day = b;
      }
    }

    // Build the Date using numeric args (year, monthIndex, day)
    const dateObj = new Date(year, month - 1, day);
    if (isNaN(dateObj.getTime())) return; // invalid date, skip

    const weekday = dateObj.toLocaleDateString('en-GB', { weekday: 'long' });
    const monthName = dateObj.toLocaleDateString('en-GB', { month: 'long' });
    const suffix = getOrdinal(day);
 const formatted = `${weekday} ${monthName} ${day}${suffix}, ${year}<br>`;
span.innerHTML = raw.replace(match[0], formatted);
  });
});
  </script>

Option 4

The fourth option is not so much about the dates but instead it removes the AM or PM and makes it 24 hour format on the start and end time of the sessions.

<script>
document.addEventListener("d365mkt-afterformload", function () {
  const spans = document.querySelectorAll("span.msdynmkt_personalization");
  const alwaysSwapAmbiguous = true; // keep your preference

  function getOrdinal(n) {
    n = Number(n);
    if (Number.isNaN(n)) return '';
    const rem100 = n % 100;
    if (rem100 >= 11 && rem100 <= 13) return 'th';
    switch (n % 10) {
      case 1: return 'st';
      case 2: return 'nd';
      case 3: return 'rd';
      default: return 'th';
    }
  }

  console.debug && console.debug('date/time formatter running, spans:', spans.length);

  spans.forEach(span => {
    try {
      const rawText = (span.textContent || '').trim();
      const rawHtml = span.innerHTML || '';

      // Try to match date optionally followed by a time:
      // groups: 1=partA, 2=partB, 3=year, 4=hour (optional), 5=minute (optional), 6=AM/PM (optional)
      const dateTimeMatch = rawText.match(/b(d{1,2})/(d{1,2})/(d{4})(?:s+(d{1,2}):(d{2})(?:s?(AM|PM))?)?b/i);

      if (dateTimeMatch) {
        const a = parseInt(dateTimeMatch[1], 10);
        const b = parseInt(dateTimeMatch[2], 10);
        const year = parseInt(dateTimeMatch[3], 10);

        let day, month;
        if (a > 12 && b <= 12) {
          day = a; month = b;
        } else if (b > 12 && a <= 12) {
          month = a; day = b;
        } else {
          if (alwaysSwapAmbiguous) { month = b; day = a; }
          else { month = a; day = b; }
        }

        // build date
        const dateObj = new Date(year, month - 1, day);
        if (!isNaN(dateObj.getTime())) {
          const weekday = dateObj.toLocaleDateString('en-GB', { weekday: 'long' });
          const monthName = dateObj.toLocaleDateString('en-GB', { month: 'long' });
          const suffix = getOrdinal(day);
          const formattedDate = `${weekday} ${monthName} ${day}${suffix}, ${year}`;

          // If a time was captured in the same span, format it too and include on next line
          if (dateTimeMatch[4] !== undefined && dateTimeMatch[5] !== undefined) {
            let hour = parseInt(dateTimeMatch[4], 10);
            const minute = parseInt(dateTimeMatch[5], 10);
            const meridian = dateTimeMatch[6];

            if (meridian) {
              const isPM = meridian.toUpperCase() === "PM";
              if (isPM && hour < 12) hour += 12;
              if (!isPM && hour === 12) hour = 0;
            }
            const hh = hour.toString().padStart(2, "0");
            const mm = minute.toString().padStart(2, "0");
            const formattedTime = `${hh}:${mm}`;

            // replace the matched date/time substring in the innerHTML and add <br> between date and time
            const replacement = `${formattedDate}<br>${formattedTime}`;
            span.innerHTML = rawHtml.replace(dateTimeMatch[0], replacement);
          } else {
            // date-only: replace and append <br> so times in following spans appear on next line
            const replacement = `${formattedDate}<br>`;
            span.innerHTML = rawHtml.replace(dateTimeMatch[0], replacement);
          }
        }
        // done with this span
        return;
      }

      // If we get here there's no date; check for time-only spans
      const timeMatch = rawText.match(/^(d{1,2}):(d{2})(?:s?(AM|PM))?$/i);
      if (timeMatch) {
        let hour = parseInt(timeMatch[1], 10);
        const minute = parseInt(timeMatch[2], 10);
        const meridian = timeMatch[3];

        if (meridian) {
          const isPM = meridian.toUpperCase() === "PM";
          if (isPM && hour < 12) hour += 12;
          if (!isPM && hour === 12) hour = 0;
        }

        const hh = hour.toString().padStart(2, "0");
        const mm = minute.toString().padStart(2, "0");
        span.textContent = `${hh}:${mm}`;
        return;
      }

      // no date or time found — do nothing
    } catch (err) {
      // log and continue so one broken span doesn't stop the rest
      console.error('date/time formatter error for span:', span, err);
    }
  });
});
</script>

What option do you prefer? Any other formats you think might be needed?

Original Post http://meganvwalker.com/change-session-date-format-on-event-forms/