Document time date placeholder transforms

CHANGELOG.md

@@ -10,6 +10,7 @@ All notable changes to this project will be documented in this file.
 - Fixed the template designer empty background message moving when the background image is removed.
 - Fixed cached API and RSS images not being served by the player after being downloaded.
 - Fixed blank time/date regions displaying the default clock format on the player.
+- Fixed the time/date placeholder popup omitting text and math transform help.
 
 ## 2.13.2 - 2026-09-11
 

src/player/regions/time-date.js

@@ -203,7 +203,7 @@ function getTimeDateFormattedParts(timeZone, date) {
     dddd: toTitleCase(getPart(weekdayLong, 'weekday')),
     MMM: toTitleCase(getPart(monthShort, 'month')),
     MMMM: toTitleCase(getPart(monthLong, 'month')),
-    a: toTitleCase(getPart(ampm, 'dayPeriod')),
+    a: String(getPart(ampm, 'dayPeriod') || '').toLowerCase(),
       tz: getPart(timezoneShort, 'timeZoneName'),
       tz_long: resolvedTimeZone,
     date: getPart(numericParts, 'year') + '-' + getPart(numericParts, 'month') + '-' + getPart(numericParts, 'day'),

src/web/public/js/regions/type/time-date.js

@@ -155,7 +155,7 @@
       dddd: toTitleCase(getPart(weekdayLong, 'weekday')),
       MMM: toTitleCase(getPart(monthShort, 'month')),
       MMMM: toTitleCase(getPart(monthLong, 'month')),
-      a: toTitleCase(getPart(ampm, 'dayPeriod')),
+      a: String(getPart(ampm, 'dayPeriod') || '').toLowerCase(),
       tz: getPart(getFormatter('tz-short:' + resolvedTimeZone, {
         timeZone: resolvedTimeZone,
         timeZoneName: 'short'
@@ -296,7 +296,10 @@
     var table = '<div class="table-responsive"><table class="table table-sm align-middle mb-0"><thead><tr><th>Placeholder</th><th>Output</th><th>Description</th></tr></thead><tbody>' + placeholders.map(function (item) {
       return '<tr><td><code>{{' + escapeHtml(item.token) + '}}</code></td><td>' + escapeHtml(item.output) + '</td><td>' + escapeHtml(item.description) + '</td></tr>';
     }).join('') + '</tbody></table></div>';
-    return window.placeholderInfo.render(regionId, 'Time and date placeholders', table);
+    var transforms = '' +
+      (typeof window.placeholderInfo.renderTextTransforms === 'function' ? window.placeholderInfo.renderTextTransforms() : '') +
+      (typeof window.placeholderInfo.renderMathTransforms === 'function' ? window.placeholderInfo.renderMathTransforms() : '');
+    return window.placeholderInfo.render(regionId, 'Time and date placeholders', table + transforms);
   }
 
   function renderEditorCard(context) {

test/player-time-date-region.test.js

@@ -64,6 +64,31 @@ test('time/date region renders placeholder tokens on the player side', () => {
   assert.match(markup, /<p>\d{2}:\d{2}<\/p>/);
 });
 
+test('time/date lowercase day period renders in lowercase', () => {
+  const module = loadTimeDateModule();
+  const markup = module.renderRegion(
+    {
+      pixelWidth: 320,
+      pixelHeight: 180,
+      canvasScale: 1,
+      baseStyle: 'position:absolute;'
+    },
+    {
+      value: '{{a}}',
+      timezone: 'UTC'
+    }
+  );
+
+  assert.match(markup, /<p>(am|pm)<\/p>/);
+});
+
+test('time/date editor popup documents text and math transforms', () => {
+  const editorSource = fs.readFileSync(require.resolve('../src/web/public/js/regions/type/time-date.js'), 'utf8');
+
+  assert.match(editorSource, /renderTextTransforms\(\)/);
+  assert.match(editorSource, /renderMathTransforms\(\)/);
+});
+
 test('time/date region stays blank when its format is blank', () => {
   const module = loadTimeDateModule();
   const markup = module.renderRegion(