The code snippet below adds the ability to transform data-o-member date values into more readable formats so you may create sentences like "5 days until renewal" or "You've been a member since 12/08/2024".

For all possible data-o-member options, see the list at the bottom of the Display user data on a page article.

⚠️⚠️⚠️ Does not work when using monitorDom: true

How to use

Add the data-transform-date attribute to your existing elements with the data-o-member attributes like so:

<!-- Days until the current subscription renewal date -->
<span 
  data-o-member="Account.CurrentSubscription.RenewalDate" 
  data-transform-date="DaysUntil">
</span>

<!-- Days since the subscription was created --> 
<span 
  data-o-member=""Account.CurrentSubscription.StartDate" 
  data-transform-date="DaysSince">
</span> 

<!-- Localized date + time of the last login --> 
<!-- 12/08/2024, 12:51:06 PM -->
<span 
 data-o-member="LastLoginDateTime" 
 data-transform-date="LocalString" 
 data-locale="en-US">
</span> 

<!-- Localized date of the last login -->
<!-- 12.8.2024
<span 
  data-o-member="LastLoginDateTime" 
  data-transform-date="LocalDateString" 
  data-locale="no-NO">
</span> 

<!-- Localized time of account creation -->
<!-- 14:35:34 or similar depending on default locale -->
<span 
  data-o-member="Account.Created" 
  data-transform-date="LocalTimeString">
</span>

Supported Transformations

  • DaysSince: Number of days since the date.
  • DaysUntil: Number of days until the date.
  • LocalString: Full localized date and time.
  • LocalDateString: Localized date only.
  • LocalTimeString: Localized time only.

Optional Locale

You can use the data-locale attribute to format dates according to a specific locale (e.g., en-US for English, fr-FR for French, or ja-JP for Japanese). If omitted, the browser’s default locale is used.

The snippet

Add the provided custom code snippet (found between <!-- ✨ Custom Code Snippet Start ✨ --> and <!-- ✨ Custom Code Snippet End ✨ -->) to the head of your site below the Outseta script, which should already be in your site's head tag.

<!-- Outseta Script Options -->
<script>
  var o_options = {
    domain: '[your-domain].outseta.com',
  }
</script>

<!-- Outseta Script (doing all the magic) -->
<script src="https://cdn.outseta.com/outseta.min.js" data-options="o_options"></script>

<!-- ✨ Custom Snippet Start ✨ -->
<style id="data-transform-date-css">
  /* Start by hiding all transform nodes */
  [data-transform-date] {
    display: none;
  }
</style>

<script>
  Outseta.on("nocode.initialized", () => {
    // Get all transform nodes
    var transformNodes = document.querySelectorAll("[data-transform-date]");

    // Process each transform node
    transformNodes.forEach((node) => {
      const transformType = node.getAttribute("data-transform-date");
      const content = node.textContent.trim();
      const locale = node.getAttribute("data-locale") || undefined; // Use locale if provided

      // Parse the date from the content
      const parsedDate = new Date(content);

      // If the date is invalid, leave the content as is
      if (isNaN(parsedDate)) {
        console.warn(`Invalid date format in node: ${node}`);
        return;
      }

      const currentDate = new Date();
      let transformedContent = "";

      switch (transformType) {
        case "DaysSince":
          transformedContent = Math.floor(
            (currentDate - parsedDate) / (1000 * 60 * 60 * 24)
          );
          break;
        case "DaysUntil":
          transformedContent = Math.ceil(
            (parsedDate - currentDate) / (1000 * 60 * 60 * 24)
          );
          break;
        case "LocalString":
          transformedContent = parsedDate.toLocaleString(locale);
          break;
        case "LocalDateString":
          transformedContent = parsedDate.toLocaleDateString(locale);
          break;
        case "LocalTimeString":
          transformedContent = parsedDate.toLocaleTimeString(locale);
          break;
        default:
          console.warn(
            `Unknown data-transform-date type: ${transformType}`
          );
          return;
      }

      // Update the node's content
      node.textContent = transformedContent;
    });

    // Remove the default hide-all transform nodes CSS
    var styleNode = document.getElementById("data-transform-date-css");
    if (styleNode) {
      styleNode.remove();
    }
  });
</script>
<!-- ✨ Custom Snippet End ✨ -->

Testing Your Setup

  1. Add Example Elements: Copy and paste the example HTML into your page.
  2. Load Your Page: Open your page in a browser. 
  3. Log In: The snippet will process the elements and transform the dates.
  4. Verify Output: Check that the dates are displayed correctly according to the specified transformations.

Troubleshooting

  • Invalid Date Format:
    • Ensure dates are in a valid format, such as YYYY-MM-DDTHH:mm:ss.
    • Invalid dates will not be transformed, and a warning will appear in the browser console.
  • Transformation Not Applied:
    • Verify that the data-transform-date value is correct.
    • Check for console warnings about unsupported transformation types.
  • Locale Issues:
    • Ensure the data-locale value is a valid BCP 47 language tag (e.g., en-US, fr-FR).

Full demo on Code Sandbox