Release v2.6.19

src/web/public/js/shared/time-date-placeholders.js

@@ -2,47 +2,79 @@
 
 (function () {
   var root = window;
-  var PLACEHOLDERS = [
-    { token: 'h', label: 'h' },
-    { token: 'hh', label: 'hh' },
-    { token: 'm', label: 'm' },
-    { token: 'mm', label: 'mm' },
-    { token: 's', label: 's' },
-    { token: 'ss', label: 'ss' },
-    { token: 'd', label: 'd' },
-    { token: 'dd', label: 'dd' },
-    { token: 'M', label: 'M' },
-    { token: 'MM', label: 'MM' },
-    { token: 'y', label: 'y' },
-    { token: 'yyyy', label: 'yyyy' },
-    { token: 'yy', label: 'yy' },
-    { token: 'ddd', label: 'ddd' },
-    { token: 'dddd', label: 'dddd' },
-    { token: 'MMM', label: 'MMM' },
-    { token: 'MMMM', label: 'MMMM' },
-    { token: 'a', label: 'a' },
-    { token: 'tz', label: 'tz' },
-    { token: 'tz_short', label: 'tz_short' }
+  var FORMAT_PLACEHOLDERS = [
+    { token: 'h', output: '1-12', description: 'The hour, 12-hour clock' },
+    { token: 'hh', output: '01-12', description: 'The hour, 12-hour clock, 2-digits' },
+    { token: 'm', output: '0-59', description: 'The minute' },
+    { token: 'mm', output: '00-59', description: 'The minute, 2-digits' },
+    { token: 's', output: '0-59', description: 'The second' },
+    { token: 'ss', output: '00-59', description: 'The second, 2-digits' },
+    { token: 'A', output: 'AM/PM', description: 'Uppercase day period' },
+    { token: 'a', output: 'am/pm', description: 'Lowercase day period' },
+    { token: 'D', output: '1-31', description: 'The day of the month' },
+    { token: 'DD', output: '01-31', description: 'The day of the month, 2-digits' },
+    { token: 'ddd', output: 'Mon', description: 'The abbreviated weekday name' },
+    { token: 'dddd', output: 'Monday', description: 'The full weekday name' },
+    { token: 'M', output: '1-12', description: 'The month, beginning at 1' },
+    { token: 'MM', output: '01-12', description: 'The month, 2-digits' },
+    { token: 'MMM', output: 'Jan-Dec', description: 'The abbreviated month name' },
+    { token: 'MMMM', output: 'January-December', description: 'The full month name' },
+    { token: 'YY', output: '18', description: 'The two-digit year' },
+    { token: 'YYYY', output: '2018', description: 'The four-digit year' }
   ];
 
+  var HELPER_PLACEHOLDERS = [
+    { token: 'tz', output: 'Europe/London', description: 'The resolved time zone name' },
+    { token: 'tz_short', output: 'BST/GMT', description: 'The time zone abbreviation for the selected date' }
+  ];
+
+  var PLACEHOLDERS = FORMAT_PLACEHOLDERS.concat(HELPER_PLACEHOLDERS);
+
   function getTokens() {
     return PLACEHOLDERS.slice();
   }
 
-  function renderChips() {
-    if (root.placeholderChips && typeof root.placeholderChips.renderChips === 'function') {
-      return root.placeholderChips.renderChips(PLACEHOLDERS.map(function (item) {
-        return item.token;
-      }));
-    }
+  function getFormatTokens() {
+    return FORMAT_PLACEHOLDERS.slice();
+  }
 
-    return PLACEHOLDERS.map(function (item) {
-      return '<span class="chip">{{' + item.token + '}}</span>';
-    }).join('');
+  function renderTable() {
+    return '' +
+      '<div class="table-responsive">' +
+        '<table class="table table-sm align-middle mb-0">' +
+          '<thead>' +
+            '<tr>' +
+              '<th scope="col">Format</th>' +
+              '<th scope="col">Output</th>' +
+              '<th scope="col">Description</th>' +
+            '</tr>' +
+          '</thead>' +
+          '<tbody>' +
+            FORMAT_PLACEHOLDERS.map(function (item) {
+              return '' +
+                '<tr>' +
+                  '<td><code>' + item.token + '</code></td>' +
+                  '<td>' + escapeHtml(item.output || '') + '</td>' +
+                  '<td>' + escapeHtml(item.description || '') + '</td>' +
+                '</tr>';
+            }).join('') +
+          '</tbody>' +
+        '</table>' +
+      '</div>';
+  }
+
+  function escapeHtml(value) {
+    return String(value === undefined || value === null ? '' : value)
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;')
+      .replace(/'/g, '&#39;');
   }
 
   root.timeDatePlaceholders = {
     getTokens: getTokens,
-    renderChips: renderChips
+    getFormatTokens: getFormatTokens,
+    renderTable: renderTable
   };
 }());