Property Editors: New Date Time property editors (#19915)

* Started the implementation of the new date time property editor

* Display picked time in local and UTC

* Adjustments to the way the timezones are displayed and the picker is configured

* Filter out `Etc/` (offset) timezones from the list

* Additional adjustments

* Introduced date format and time zone options (all, local or custom)

* Adjustments to the property editor configuration and value converter

* Use UUICombobox instead of UUISelect for displaying time zone options. Display UTC offset instead of short offset name in label.

* Allow searching by offset

* Ignore case when searching for time zone

* Store dates consistently (always same format)

* Add custom PropertyIndexValueFactory for the new property editor

* Adjustments when switching between time zone modes

* Small fixes and cleanup

* Started improving time zone config selection

* Small adjustments

* Remove selected time zones from the list + display label instead of value

* Localizing labels

* Remove unwanted character

* Fix incorrect order of custom time zones list

* Small fixes (mostly validation)

* Rename input time zone component

* Small adjustments

* Using model for stored value

* Save examine value as ISO format

* Adjusting class names for consistency

* Small fixes

* Add default data type configuration

* Rename `TimeZone` to `UmbTimeZone`

* Fix failing tests

* Started adding unit tests for DateWithTimeZonePropertyEditor

* Additional tests

* Additional tests

* Additional tests

* Fixed searches with regex special characters throwing errors

* Remove offset from generic UmbTimeZone type and added new type specific for the property editor

* Adjust property editor to show error when selected time zone is no longer available, instead of pre-selecting another one

* Do not preselect a time zone if a date is stored without time zone

This most likely means that the configuration of the editor changed to add time zone support. In this case we want to force the editor to select the applicable time zone.

* Fix failing backoffice build

* Added tests for DateTimeWithTimeZonePropertyIndexValueFactory

* Improved picker validation

* Remove unused code

* Move models to their corresponding places

* Renaming `DateTimeWithTimeZone` to `DateTime2`

* Fix data type count tests

* Simplifying code + adjusting value converter to support old picker value

* Adjustments to property editor unit tests

* Fix validation issue

* Fix default configuration for 'Date Time (Unspecified)'

* Rename validator

* Fix comment

* Adjust database creator default DateTime2 data types

* Update tests after adjusting default data types

* Add integration test for DateTime2 returned value type

* Apply suggestions from code review

Co-authored-by: Andy Butland <[email protected]>

* Aligning DateTime2Validator with other JSON validators. Added new model for API.

* Removed unused code and updated tests

* Fix validation error message

* Apply suggestions from code review

Co-authored-by: Copilot <[email protected]>

* Splitting the new date time editor into multiple (per output type)

* Adjust tests in DateTime2PropertyIndexValueFactoryTest

* Update value converter tests

* Group the new date time tests

* Adjust new property editor tests

* Adjust property editor integration tests

* Update data editor count tests

* Naming adjustments

* Small fixes

* Cleanup

- Remove unused files
- Remove 'None' option from configuration and update all the tests

* Update luxon depedencies

* Move GetValueFromSource to the value converter

* Add new property editor examples to mock data

* Re-organizing the code

* Adjustments from code review

* Place the date time property index value factories in their own files

* Small adjustments for code consistency

* Small adjustments

* Minor adjustment

* Small fix from copilot review

* Completed the set of XML header comments.

* use already existing query property

* fail is form control element is null or undefined

* using lit ref for querying and form control registration

* state for timeZonePickerValue and remove _disableAddButton

* Adjustments to form control registration

* Remove unused declaration

---------

Co-authored-by: Andy Butland <[email protected]>
Co-authored-by: Copilot <[email protected]>
Co-authored-by: Niels Lyngsø <[email protected]>
Co-authored-by: Niels Lyngsø <[email protected]>

Author: 4 people

src/Umbraco.Core/Constants-DataTypes.cs

@@ -111,6 +111,11 @@ public static class Guids
             /// </summary>
             public const string DatePickerWithTime = "e4d66c0f-b935-4200-81f0-025f7256b89a";
 
+            /// <summary>
+            ///     Guid for Date Time Picker (with Timezone) as string
+            /// </summary>
+            public const string DateTimePickerWithTimeZone = "88E8A052-30EE-4D44-A507-59F2CDFC769C";
+
             /// <summary>
             ///     Guid for Approved Color as string
             /// </summary>
@@ -296,6 +301,11 @@ public static class Guids
             /// </summary>
             public static readonly Guid DatePickerWithTimeGuid = new(DatePickerWithTime);
 
+            /// <summary>
+            ///     Guid for Date Time Picker (with Timezone).
+            /// </summary>
+            public static readonly Guid DateTimePickerWithTimeZoneGuid = new(DateTimePickerWithTimeZone);
+
             /// <summary>
             ///     Guid for Approved Color
             /// </summary>

src/Umbraco.Core/Constants-PropertyEditors.cs

@@ -75,6 +75,26 @@ public static class Aliases
             /// </summary>
             public const string DateTime = "Umbraco.DateTime";
 
+            /// <summary>
+            ///     Date Time (unspecified).
+            /// </summary>
+            public const string DateTimeUnspecified = "Umbraco.DateTimeUnspecified";
+
+            /// <summary>
+            ///     Date Time (with time zone).
+            /// </summary>
+            public const string DateTimeWithTimeZone = "Umbraco.DateTimeWithTimeZone";
+
+            /// <summary>
+            ///     Date Only.
+            /// </summary>
+            public const string DateOnly = "Umbraco.DateOnly";
+
+            /// <summary>
+            ///     Time Only.
+            /// </summary>
+            public const string TimeOnly = "Umbraco.TimeOnly";
+
             /// <summary>
             ///     DropDown List.
             /// </summary>

src/Umbraco.Core/EmbeddedResources/Lang/en.xml

@@ -376,6 +376,7 @@
     <key alias="invalidNull">Value cannot be null</key>
     <key alias="invalidEmpty">Value cannot be empty</key>
     <key alias="invalidPattern">Value is invalid, it does not match the correct pattern</key>
+    <key alias="invalidDate">Invalid date</key>
     <key alias="entriesShort"><![CDATA[Minimum %0% entries, requires <strong>%1%</strong> more.]]></key>
     <key alias="entriesExceed"><![CDATA[Maximum %0% entries, you have entered <strong>%1%</strong> too many.]]></key>
     <key alias="stringLengthExceeded">The string length exceeds the maximum length of %0% characters, %1% too many.</key>

src/Umbraco.Core/PropertyEditors/DateTimeConfiguration.cs

@@ -0,0 +1,49 @@
+// Copyright (c) Umbraco.
+// See LICENSE for more details.
+
+using System.Text.Json.Serialization;
+
+namespace Umbraco.Cms.Core.PropertyEditors;
+
+public class DateTimeConfiguration
+{
+    /// <summary>
+    /// Gets or sets the time zones configuration.
+    /// </summary>
+    [ConfigurationField("timeZones")]
+    public TimeZonesConfiguration? TimeZones { get; set; }
+
+    public class TimeZonesConfiguration
+    {
+        /// <summary>
+        /// The mode for time zones.
+        /// </summary>
+        public TimeZoneMode Mode { get; set; }
+
+        /// <summary>
+        /// A list of time zones to use when the mode is set to Custom.
+        /// </summary>
+        public List<string> TimeZones { get; set; } = [];
+    }
+
+    public enum TimeZoneMode
+    {
+        /// <summary>
+        /// Display all time zones.
+        /// </summary>
+        [JsonStringEnumMemberName("all")]
+        All,
+
+        /// <summary>
+        /// Display only the local time zone of the user.
+        /// </summary>
+        [JsonStringEnumMemberName("local")]
+        Local,
+
+        /// <summary>
+        /// Display a custom list of time zones defined in the configuration.
+        /// </summary>
+        [JsonStringEnumMemberName("custom")]
+        Custom,
+    }
+}

src/Umbraco.Core/PropertyEditors/IDateOnlyPropertyIndexValueFactory.cs

@@ -0,0 +1,6 @@
+namespace Umbraco.Cms.Core.PropertyEditors;
+
+/// <summary>
+/// Factory for creating index values for Date Only properties.
+/// </summary>
+public interface IDateOnlyPropertyIndexValueFactory : IPropertyIndexValueFactory;

src/Umbraco.Core/PropertyEditors/IDateTimeUnspecifiedPropertyIndexValueFactory.cs

@@ -0,0 +1,6 @@
+namespace Umbraco.Cms.Core.PropertyEditors;
+
+/// <summary>
+/// Factory for creating index values for Date Time Unspecified properties.
+/// </summary>
+public interface IDateTimeUnspecifiedPropertyIndexValueFactory : IPropertyIndexValueFactory;

src/Umbraco.Core/PropertyEditors/IDateTimeWithTimeZonePropertyIndexValueFactory.cs

@@ -0,0 +1,6 @@
+namespace Umbraco.Cms.Core.PropertyEditors;
+
+/// <summary>
+/// Factory for creating index values for Date Time with Time Zone properties.
+/// </summary>
+public interface IDateTimeWithTimeZonePropertyIndexValueFactory : IPropertyIndexValueFactory;

src/Umbraco.Core/PropertyEditors/ITimeOnlyPropertyIndexValueFactory.cs

@@ -0,0 +1,6 @@
+namespace Umbraco.Cms.Core.PropertyEditors;
+
+/// <summary>
+/// Factory for creating index values for Time Only properties.
+/// </summary>
+public interface ITimeOnlyPropertyIndexValueFactory : IPropertyIndexValueFactory;

src/Umbraco.Infrastructure/DependencyInjection/UmbracoBuilder.CoreServices.cs

@@ -263,6 +263,10 @@ public static IUmbracoBuilder AddPropertyIndexValueFactories(this IUmbracoBuilde
         builder.Services.AddSingleton<IBlockValuePropertyIndexValueFactory, BlockValuePropertyIndexValueFactory>();
         builder.Services.AddSingleton<ITagPropertyIndexValueFactory, TagPropertyIndexValueFactory>();
         builder.Services.AddSingleton<IRichTextPropertyIndexValueFactory, RichTextPropertyIndexValueFactory>();
+        builder.Services.AddSingleton<IDateOnlyPropertyIndexValueFactory, DateOnlyPropertyIndexValueFactory>();
+        builder.Services.AddSingleton<ITimeOnlyPropertyIndexValueFactory, TimeOnlyPropertyIndexValueFactory>();
+        builder.Services.AddSingleton<IDateTimeUnspecifiedPropertyIndexValueFactory, DateTimeUnspecifiedPropertyIndexValueFactory>();
+        builder.Services.AddSingleton<IDateTimeWithTimeZonePropertyIndexValueFactory, DateTimeWithTimeZonePropertyIndexValueFactory>();
 
         return builder;
     }

src/Umbraco.Infrastructure/Migrations/Install/DatabaseDataCreator.cs

@@ -863,6 +863,25 @@ void InsertDataTypeNodeDto(int id, int sortOrder, string uniqueId, string text)
             },
             Constants.DatabaseSchema.Tables.Node,
             "id");
+        ConditionalInsert(
+            Constants.Configuration.NamedOptions.InstallDefaultData.DataTypes,
+            Constants.DataTypes.Guids.DateTimePickerWithTimeZone,
+            new NodeDto
+            {
+                NodeId = 1055,
+                Trashed = false,
+                ParentId = -1,
+                UserId = -1,
+                Level = 1,
+                Path = "-1,1055",
+                SortOrder = 2,
+                UniqueId = Constants.DataTypes.Guids.DateTimePickerWithTimeZoneGuid,
+                Text = "Date Time Picker (with time zone)",
+                NodeObjectType = Constants.ObjectTypes.DataType,
+                CreateDate = DateTime.UtcNow,
+            },
+            Constants.DatabaseSchema.Tables.Node,
+            "id");
     }
 
     private void CreateNodeDataForMediaTypes()
@@ -2302,6 +2321,22 @@ string GridCollectionView(string collectionViewType) =>
                                     "\", \"multiple\": true}",
                 });
         }
+
+        if (_database.Exists<NodeDto>(1055))
+        {
+            _database.Insert(
+                Constants.DatabaseSchema.Tables.DataType,
+                "pk",
+                false,
+                new DataTypeDto
+                {
+                    NodeId = 1055,
+                    EditorAlias = Constants.PropertyEditors.Aliases.DateTimeWithTimeZone,
+                    EditorUiAlias = "Umb.PropertyEditorUi.DateTimeWithTimeZonePicker",
+                    DbType = "Ntext",
+                    Configuration = "{\"timeFormat\": \"HH:mm\", \"timeZones\": {\"mode\": \"all\"}}",
+                });
+        }
     }
 
     private void CreateRelationTypeData()