allow for custom formats

app/src/displays/datetime/datetime.vue

@@ -20,6 +20,10 @@ export default defineComponent({
 			required: true,
 			validator: (val: string) => ['dateTime', 'date', 'time', 'timestamp'].includes(val),
 		},
+		format: {
+			type: String,
+			default: 'long',
+		},
 		relative: {
 			type: Boolean,
 			default: false,
@@ -57,9 +61,18 @@ export default defineComponent({
 						addSuffix: true,
 					});
 				} else {
-					let format = `${i18n.t('date-fns_date')} ${i18n.t('date-fns_time')}`;
-					if (props.type === 'date') format = String(i18n.t('date-fns_date'));
-					if (props.type === 'time') format = String(i18n.t('date-fns_time'));
+					let format;
+					if (props.format === 'long') {
+						format = `${i18n.t('date-fns_date')} ${i18n.t('date-fns_time')}`;
+						if (props.type === 'date') format = String(i18n.t('date-fns_date'));
+						if (props.type === 'time') format = String(i18n.t('date-fns_time'));
+					} else if (props.format === 'short') {
+						format = `${i18n.t('date-fns_date_short')} ${i18n.t('date-fns_time_short')}`;
+						if (props.type === 'date') format = String(i18n.t('date-fns_date_short'));
+						if (props.type === 'time') format = String(i18n.t('date-fns_time_short'));
+					} else {
+						format = props.format;
+					}
 
 					displayValue.value = await localizedFormat(newValue, format);
 				}

app/src/displays/datetime/index.ts

@@ -8,11 +8,32 @@ export default defineDisplay(({ i18n }) => ({
 	icon: 'query_builder',
 	handler: DisplayDateTime,
 	options: [
+		{
+			field: 'format',
+			name: i18n.t('displays.datetime.format'),
+			type: 'string',
+			meta: {
+				interface: 'dropdown',
+				width: 'half',
+				options: {
+					choices: [
+						{ text: i18n.t('displays.datetime.long'), value: 'long' },
+						{ text: i18n.t('displays.datetime.short'), value: 'short' },
+					],
+					allowOther: true,
+				},
+				note: i18n.t('displays.datetime.format_note'),
+			},
+			schema: {
+				default_value: 'long',
+			},
+		},
 		{
 			field: 'relative',
 			name: i18n.t('displays.datetime.relative'),
 			type: 'boolean',
 			meta: {
+				width: 'half',
 				interface: 'toggle',
 				options: {
 					label: i18n.t('displays.datetime.relative_label'),

app/src/lang/en-US/displays.json

@@ -26,6 +26,10 @@
 		"datetime": {
 			"datetime": "Datetime",
 			"description": "Display values related to time",
+			"format": "Format",
+			"format_note": "The custom format accetps the __[Date Field Symbol Table](https://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table)__",
+			"long": "Long",
+			"short": "Short",
 			"relative": "Relative",
 			"relative_label": "Show relative time, eg: 5 minutes ago"
 		},

app/src/lang/en-US/index.json

@@ -390,6 +390,7 @@
 	"date-fns_date": "PPP",
 	"date-fns_time": "h:mma",
 	"date-fns_date_short": "MMM d, u",
+	"date-fns_time_short": "hh:mm",
 	"date-fns_date_short_no_year": "MMM d",
 	"month": "Month",
 	"year": "Year",