Date format.

backend/i18n/frontend_en.json

@@ -764,6 +764,8 @@
   "schemas.fieldTypes.components.description": "Embed other schemas to this content as array.",
   "schemas.fieldTypes.dateTime.defaultMode": "Default Mode",
   "schemas.fieldTypes.dateTime.description": "Events date, opening hours.",
+  "schemas.fieldTypes.dateTime.format": "Pattern",
+  "schemas.fieldTypes.dateTime.formatHint": "The pattern when shown in the UI, see: https://date-fns.org/v2.22.1/docs/format",
   "schemas.fieldTypes.dateTime.rangeMax": "Max Value",
   "schemas.fieldTypes.dateTime.rangeMin": "Min Value",
   "schemas.fieldTypes.geolocation.description": "Coordinates: latitude and longitude.",

backend/i18n/frontend_it.json

@@ -764,6 +764,8 @@
   "schemas.fieldTypes.components.description": "Embed other schemas to this content as array.",
   "schemas.fieldTypes.dateTime.defaultMode": "Modalità predefinita",
   "schemas.fieldTypes.dateTime.description": "Data degli eventi, orari di apertura.",
+  "schemas.fieldTypes.dateTime.format": "Pattern",
+  "schemas.fieldTypes.dateTime.formatHint": "The pattern when shown in the UI, see: https://date-fns.org/v2.22.1/docs/format",
   "schemas.fieldTypes.dateTime.rangeMax": "Valore Max",
   "schemas.fieldTypes.dateTime.rangeMin": "Valore Min",
   "schemas.fieldTypes.geolocation.description": "Coordinate: latitudine e longitudine.",

backend/i18n/frontend_nl.json

@@ -764,6 +764,8 @@
   "schemas.fieldTypes.components.description": "Embed other schemas to this content as array.",
   "schemas.fieldTypes.dateTime.defaultMode": "Standaardmodus",
   "schemas.fieldTypes.dateTime.description": "Datum van evenementen, openingstijden.",
+  "schemas.fieldTypes.dateTime.format": "Pattern",
+  "schemas.fieldTypes.dateTime.formatHint": "The pattern when shown in the UI, see: https://date-fns.org/v2.22.1/docs/format",
   "schemas.fieldTypes.dateTime.rangeMax": "Max. waarde",
   "schemas.fieldTypes.dateTime.rangeMin": "Min. waarde",
   "schemas.fieldTypes.geolocation.description": "Coördinaten: lengte- en breedtegraad.",

backend/i18n/frontend_zh.json

@@ -764,6 +764,8 @@
   "schemas.fieldTypes.components.description": "将其他Schemas作为数组嵌入到此内容中。",
   "schemas.fieldTypes.dateTime.defaultMode": "默认模式",
   "schemas.fieldTypes.dateTime.description": "活动日期，开放时间。",
+  "schemas.fieldTypes.dateTime.format": "Pattern",
+  "schemas.fieldTypes.dateTime.formatHint": "The pattern when shown in the UI, see: https://date-fns.org/v2.22.1/docs/format",
   "schemas.fieldTypes.dateTime.rangeMax": "最大值",
   "schemas.fieldTypes.dateTime.rangeMin": "最小值",
   "schemas.fieldTypes.geolocation.description": "坐标：纬度和经度。",

backend/i18n/source/frontend_en.json

@@ -764,6 +764,8 @@
   "schemas.fieldTypes.components.description": "Embed other schemas to this content as array.",
   "schemas.fieldTypes.dateTime.defaultMode": "Default Mode",
   "schemas.fieldTypes.dateTime.description": "Events date, opening hours.",
+  "schemas.fieldTypes.dateTime.format": "Pattern",
+  "schemas.fieldTypes.dateTime.formatHint": "The pattern when shown in the UI, see: https://date-fns.org/v2.22.1/docs/format",
   "schemas.fieldTypes.dateTime.rangeMax": "Max Value",
   "schemas.fieldTypes.dateTime.rangeMin": "Min Value",
   "schemas.fieldTypes.geolocation.description": "Coordinates: latitude and longitude.",

backend/src/Squidex.Domain.Apps.Core.Model/Schemas/DateTimeFieldProperties.cs

@@ -19,6 +19,8 @@ namespace Squidex.Domain.Apps.Core.Schemas
 
         public Instant? MinValue { get; init; }
 
+        public string? Format { get; set; }
+
         public DateTimeCalculatedDefaultValue? CalculatedDefaultValue { get; init; }
 
         public DateTimeFieldEditor Editor { get; init; }

backend/src/Squidex/Areas/Api/Controllers/Schemas/Models/Fields/DateTimeFieldPropertiesDto.cs

@@ -33,6 +33,11 @@ namespace Squidex.Areas.Api.Controllers.Schemas.Models.Fields
         /// </summary>
         public Instant? MinValue { get; set; }
 
+        /// <summary>
+        /// The format pattern when displayed in the UI.
+        /// </summary>
+        public string? Format { get; set; }
+
         /// <summary>
         /// The editor that is used to manage this field.
         /// </summary>

frontend/app/features/schemas/pages/schema/fields/types/date-time-ui.component.html

@@ -1,6 +1,6 @@
 <div [formGroup]="fieldForm">
     <div class="form-group row">
-        <label class="col-3 col-form-label" for="{{field.fieldId}}_fieldPlaceholder">Placeholder</label>
+        <label class="col-3 col-form-label" for="{{field.fieldId}}_fieldPlaceholder">{{ 'schemas.field.placeholder' | sqxTranslate }}</label>
 
         <div class="col-9">
             <input type="text" class="form-control" id="{{field.fieldId}}_fieldPlaceholder" maxlength="100" formControlName="placeholder">
@@ -10,6 +10,17 @@
             </sqx-form-hint>
         </div>
     </div>
+    <div class="form-group row">
+        <label class="col-3 col-form-label" for="{{field.fieldId}}_fieldFormat">{{ 'schemas.fieldTypes.dateTime.format' | sqxTranslate }}</label>
+
+        <div class="col-9">
+            <input type="text" class="form-control" id="{{field.fieldId}}_fieldFormat" maxlength="100" formControlName="format">
+
+            <sqx-form-hint>
+                <span [innerHTML]="'schemas.fieldTypes.dateTime.formatHint' | sqxTranslate | sqxMarkdownInline"></span>
+            </sqx-form-hint>
+        </div>
+    </div>
     <div class="form-group row">
         <label class="col-3 col-form-label">{{ 'schemas.field.editor' | sqxTranslate }}</label>
 

frontend/app/features/schemas/pages/schema/fields/types/tags-ui.component.html

@@ -1,6 +1,6 @@
 <div [formGroup]="fieldForm">
     <div class="form-group row">
-        <label class="col-3 col-form-label" for="{{field.fieldId}}_fieldPlaceholder">Placeholder</label>
+        <label class="col-3 col-form-label" for="{{field.fieldId}}_fieldPlaceholder">{{ 'schemas.field.placeholder' | sqxTranslate }}</label>
 
         <div class="col-9">
             <input type="text" class="form-control" id="{{field.fieldId}}_fieldPlaceholder" maxlength="100" formControlName="placeholder">

frontend/app/framework/angular/forms/editors/date-time-editor.component.html

@@ -10,7 +10,9 @@
                 </button>
             </div>
             <div class="input-group">
-                <input type="text" class="form-control form-date" [formControl]="dateControl" placeholder="{{ 'common.date' | sqxTranslate }}" [class.form-date-only]="!isDateTimeMode" [class.form-date-time-only]="isDateTimeMode && shouldShowDateTimeModeButton" 
+                <input type="text" class="form-control form-date" [formControl]="dateControl" placeholder="{{ 'common.date' | sqxTranslate }}" 
+                    [class.form-date-only]="!isDateTimeMode" 
+                    [class.form-date-time-only]="!isCompact && isDateTimeMode && shouldShowDateTimeModeButton" 
                     (blur)="callTouched()" maxlength="10" #dateInput>
 
                 <input type="text" class="form-control form-time" [formControl]="timeControl" placeholder="{{ 'common.time' | sqxTranslate }}" (blur)="callTouched()" *ngIf="isDateTimeMode">

frontend/app/shared/services/schemas.types.ts

@@ -293,6 +293,7 @@ export class DateTimeFieldPropertiesDto extends FieldPropertiesDto {
     public readonly calculatedDefaultValue?: string;
     public readonly defaultValue?: string;
     public readonly defaultValues?: DefaultValue<string>;
+    public readonly format?: string;
     public readonly editor: DateTimeFieldEditor = 'DateTime';
     public readonly maxValue?: string;
     public readonly minValue?: string;

frontend/app/shared/state/contents.forms.visitors.ts

@@ -136,9 +136,9 @@ export class FieldFormatter implements FieldPropertiesVisitor<FieldValue> {
             const parsed = DateTime.parseISO(this.value);
 
             if (properties.editor === 'Date') {
-                return parsed.toStringFormatUTC('P');
+                return parsed.toStringFormatUTC(properties.format ?? 'P');
             } else {
-                return parsed.toStringFormat('Ppp');
+                return parsed.toStringFormat(properties.format ?? 'Ppp');
             }
         } catch (ex) {
             return this.value;

frontend/app/shared/state/schemas.forms.ts

@@ -300,6 +300,7 @@ export class EditFieldFormVisitor implements FieldPropertiesVisitor<any> {
         this.config['calculatedDefaultValue'] = undefined;
         this.config['defaultValue'] = undefined;
         this.config['defaultValues'] = undefined;
+        this.config['format'] = undefined;
         this.config['maxValue'] = [undefined, ValidatorsEx.validDateTime()];
         this.config['minValue'] = [undefined, ValidatorsEx.validDateTime()];
     }

frontend/app/theme/_forms.scss

@@ -207,6 +207,12 @@
     }
 }
 
+.form-text {
+    a {
+        white-space: nowrap;
+    }
+}
+
 .col-form-label {
     font-size: 90%;
 }