Create ui/timestamp-formats shortcode (#2259)

* create ui/timestamp-formats shortcode, closes #2249

* added time-format shortcode to other viz docs

* updated cloud viz docs with time format shortcode

content/influxdb/cloud/visualize-data/visualization-types/mosaic.md

@@ -31,17 +31,7 @@ To view **Mosaic** controls, click **{{< icon "gear" >}} Customize** next to the
 - **X Column**: Select a column to display on the x-axis.
 - **Y Column**: Select one or more columns to display on the y-axis.
 - **Time Format**: Select the time format. Options include:
-    - `YYYY-MM-DD HH:mm:ss ZZ`
-    - `DD/MM/YYYY HH:mm:ss.sss`
-    - `MM/DD/YYYY HH:mm:ss.sss`
-    - `MM/DD/YYYY HH:mm:ss.SSS`
-    - `YYYY/MM/DD HH:mm:ss`
-    - `hh:mm a`
-    - `HH:mm`
-    - `HH:mm:ss`
-    - `HH:mm:ss.sss`
-    - `MMMM D, YYYY HH:mm:ss`
-    - `dddd, MMMM D, YYYY HH:mm:ss`
+    {{< ui/timestamp-formats >}}
 
 ###### Options
 - **Color Scheme**: Select a color scheme to use for your graph.

content/influxdb/cloud/visualize-data/visualization-types/table.md

@@ -32,14 +32,8 @@ the visualization dropdown.
 
 - **Default Sort Field**: Select the default sort field. Default is **time**.
 - **Time Format**: Select the time format. Options include:
-    - `MM/DD/YYYY HH:mm:ss` (default)
-    - `MM/DD/YYYY HH:mm:ss.SSS`
-    - `YYYY-MM-DD HH:mm:ss`
-    - `HH:mm:ss`
-    - `HH:mm:ss.SSS`
-    - `MMMM D, YYYY HH:mm:ss`
-    - `dddd, MMMM D, YYYY HH:mm:ss`
-    - `Custom`
+    {{< ui/timestamp-formats >}}
+    
 - **Decimal Places**: Enter the number of decimal places. Default (empty field) is **unlimited**.
     - **Auto** or **Custom**: Enable or disable auto-setting.
 

content/influxdb/v2.0/visualize-data/visualization-types/band.md

@@ -102,17 +102,7 @@ To view **Band** controls, click **{{< icon "gear" >}} Customize** next to the v
 - **X Column**: Select a column to display on the x-axis.
 - **Y Column**: Select a column to display on the y-axis.
 - **Time Format**: Select the time format. Options include:
-    - `YYYY-MM-DD HH:mm:ss ZZ`
-    - `DD/MM/YYYY HH:mm:ss.sss`
-    - `MM/DD/YYYY HH:mm:ss.sss`
-    - `MM/DD/YYYY HH:mm:ss.SSS`
-    - `YYYY/MM/DD HH:mm:ss`
-    - `hh:mm a`
-    - `HH:mm`
-    - `HH:mm:ss`
-    - `HH:mm:ss.sss`
-    - `MMMM D, YYYY HH:mm:ss`
-    - `dddd, MMMM D, YYYY HH:mm:ss`
+    {{< ui/timestamp-formats >}}
 
 ###### Aggregate functions
 

content/influxdb/v2.0/visualize-data/visualization-types/graph-single-stat.md

@@ -45,17 +45,7 @@ the visualization dropdown.
 - **X Column**: Select a column to display on the x-axis.
 - **Y Column**: Select a column to display on the y-axis.
 - **Time Format**: Select the time format. Options include:
-    - `YYYY-MM-DD HH:mm:ss ZZ`
-    - `DD/MM/YYYY HH:mm:ss.sss`
-    - `MM/DD/YYYY HH:mm:ss.sss`
-    - `MM/DD/YYYY HH:mm:ss.SSS`
-    - `YYYY/MM/DD HH:mm:ss`
-    - `hh:mm a`
-    - `HH:mm`
-    - `HH:mm:ss`
-    - `HH:mm:ss.sss`
-    - `MMMM D, YYYY HH:mm:ss`
-    - `dddd, MMMM D, YYYY HH:mm:ss`
+    {{< ui/timestamp-formats >}}
 
 ###### Options
 - **Line Colors**: Select a color scheme to use for your graph.

content/influxdb/v2.0/visualize-data/visualization-types/graph.md

@@ -32,17 +32,7 @@ the visualization dropdown.
 - **X Column**: Select a column to display on the x-axis.
 - **Y Column**: Select a column to display on the y-axis.
 - **Time Format**: Select the time format. Options include:
-    - `YYYY-MM-DD HH:mm:ss ZZ`
-    - `DD/MM/YYYY HH:mm:ss.sss`
-    - `MM/DD/YYYY HH:mm:ss.sss`
-    - `MM/DD/YYYY HH:mm:ss.SSS`
-    - `YYYY/MM/DD HH:mm:ss`
-    - `hh:mm a`
-    - `HH:mm`
-    - `HH:mm:ss`
-    - `HH:mm:ss.sss`
-    - `MMMM D, YYYY HH:mm:ss`
-    - `dddd, MMMM D, YYYY HH:mm:ss`
+    {{< ui/timestamp-formats >}}
 
 ###### Options
 - **Interpolation**: Select from the following options:

content/influxdb/v2.0/visualize-data/visualization-types/heatmap.md

@@ -36,17 +36,7 @@ the visualization dropdown.
 - **X Column**: Select a column to display on the x-axis.
 - **Y Column**: Select a column to display on the y-axis.
 - **Time Format**: Select the time format. Options include:
-    - `YYYY-MM-DD HH:mm:ss ZZ`
-    - `DD/MM/YYYY HH:mm:ss.sss`
-    - `MM/DD/YYYY HH:mm:ss.sss`
-    - `MM/DD/YYYY HH:mm:ss.SSS`
-    - `YYYY/MM/DD HH:mm:ss`
-    - `hh:mm a`
-    - `HH:mm`
-    - `HH:mm:ss`
-    - `HH:mm:ss.sss`
-    - `MMMM D, YYYY HH:mm:ss`
-    - `dddd, MMMM D, YYYY HH:mm:ss`
+    {{< ui/timestamp-formats >}}
 
 ###### Options
 - **Color Scheme**: Select a color scheme to use for your heatmap.

content/influxdb/v2.0/visualize-data/visualization-types/mosaic.md

@@ -32,17 +32,7 @@ To view **Mosaic** controls, click **{{< icon "gear" >}} Customize** next to the
 - **X Column**: Select a column to display on the x-axis.
 - **Y Column**: Select one or more columns to display on the y-axis.
 - **Time Format**: Select the time format. Options include:
-    - `YYYY-MM-DD HH:mm:ss ZZ`
-    - `DD/MM/YYYY HH:mm:ss.sss`
-    - `MM/DD/YYYY HH:mm:ss.sss`
-    - `MM/DD/YYYY HH:mm:ss.SSS`
-    - `YYYY/MM/DD HH:mm:ss`
-    - `hh:mm a`
-    - `HH:mm`
-    - `HH:mm:ss`
-    - `HH:mm:ss.sss`
-    - `MMMM D, YYYY HH:mm:ss`
-    - `dddd, MMMM D, YYYY HH:mm:ss`
+    {{< ui/timestamp-formats >}}
 
 ###### Options
 - **Color Scheme**: Select a color scheme to use for your graph.

content/influxdb/v2.0/visualize-data/visualization-types/scatter.md

@@ -36,17 +36,7 @@ the visualization dropdown.
 - **X Column**: Select a column to display on the x-axis.
 - **Y Column**: Select a column to display on the y-axis.
 - **Time Format**: Select the time format. Options include:
-    - `YYYY-MM-DD HH:mm:ss ZZ`
-    - `DD/MM/YYYY HH:mm:ss.sss`
-    - `MM/DD/YYYY HH:mm:ss.sss`
-    - `MM/DD/YYYY HH:mm:ss.SSS`
-    - `YYYY/MM/DD HH:mm:ss`
-    - `hh:mm a`
-    - `HH:mm`
-    - `HH:mm:ss`
-    - `HH:mm:ss.sss`
-    - `MMMM D, YYYY HH:mm:ss`
-    - `dddd, MMMM D, YYYY HH:mm:ss`
+    {{< ui/timestamp-formats >}}
 
 ###### Options
 - **Color Scheme**: Select a color scheme to use for your scatter plot.

content/influxdb/v2.0/visualize-data/visualization-types/table.md

@@ -32,17 +32,8 @@ the visualization dropdown.
 
 - **Default Sort Field**: Select the default sort field. Default is **time**.
 - **Time Format**: Select the time format. Options include:
-    - `YYYY-MM-DD HH:mm:ss ZZ`
-    - `DD/MM/YYYY HH:mm:ss.sss`
-    - `MM/DD/YYYY HH:mm:ss.sss`
-    - `MM/DD/YYYY HH:mm:ss.SSS`
-    - `YYYY/MM/DD HH:mm:ss`
-    - `hh:mm a`
-    - `HH:mm`
-    - `HH:mm:ss`
-    - `HH:mm:ss.sss`
-    - `MMMM D, YYYY HH:mm:ss`
-    - `dddd, MMMM D, YYYY HH:mm:ss`
+    {{< ui/timestamp-formats >}}
+    
 - **Decimal Places**: Enter the number of decimal places. Default (empty field) is **unlimited**.
     - **Auto** or **Custom**: Enable or disable auto-setting.
 

layouts/shortcodes/ui/timestamp-formats.html

@@ -0,0 +1,22 @@
+<ul>
+  <li>YYYY-MM-DD HH:mm:ss ZZ</li>
+  <li>YYYY-MM-DD hh:mm:ss a ZZ</li>
+  <li>DD/MM/YYYY HH:mm:ss.sss</li>
+  <li>DD/MM/YYYY hh:mm:ss.sss a</li>
+  <li>MM/DD/YYYY HH:mm:ss.sss</li>
+  <li>MM/DD/YYYY hh:mm:ss.sss a</li>
+  <li>YYYY/MM/DD HH:mm:ss</li>
+  <li>YYYY/MM/DD hh:mm:ss a</li>
+  <li>HH:mm</li>
+  <li>hh:mm a</li>
+  <li>HH:mm:ss</li>
+  <li>hh:mm:ss a</li>
+  <li>HH:mm:ss ZZ</li>
+  <li>hh:mm:ss a ZZ</li>
+  <li>HH:mm:ss.sss</li>
+  <li>hh:mm:ss.sss a</li>
+  <li>MMMM D, YYYY HH:mm:ss</li>
+  <li>MMMM D, YYYY hh:mm:ss a</li>
+  <li>dddd, MMMM D, YYYY HH:mm:ss</li>
+  <li>dddd, MMMM D, YYYY hh:mm:ss a</li>
+</ul>