Hi,

You could try to specify constraints for dijit/form/DateTextBox where you could set datePattern, timePattern and locale. 

Hi Grzegorz,

Read up on dojo constraints and had them set by creating an editor descriptor in EPiServer. It solves the the date/time format issue but does not help to change the dojox.form.TimeSpinner to use 24-hour format rather than am/pm. Do you know how to do this?

The constraints for the TimeSpinner in some cases overlap with the constraints of DateTimeSelectorDropDown (ex. min, max).

This is the code:

    [EditorDescriptorRegistration(TargetType = typeof(DateTime?), UIHint = Global.SiteUIHints.DateTimeIso)]
    [EditorDescriptorRegistration(TargetType = typeof(DateTime), UIHint = Global.SiteUIHints.DateTimeIso)]
    public class DateTimeEditorDescriptor : EditorDescriptor
    {
        public override void ModifyMetadata(ExtendedMetadata metadata, IEnumerable<Attribute> attributes)
        {
            ClientEditingClass = "epi/shell/widget/DateTimeSelectorDropDown";
            base.ModifyMetadata(metadata, attributes);

            var constraints = new Dictionary<string, object>() 
            {
                { "datePattern", "yyyy-MM-dd" },
                { "timePattern", "HH:mm" },
                { "locale", "sv-SE" }
            };
            metadata.EditorConfiguration.Add("constraints", constraints);
            
        }
    }

Hi Tobias,

You are right. Changing constraints have no effect regarding TimeSpinner. This widget comes from dojox area and have very limited set of options. I don't see possibility to pass constraints for this control. Probably the ideal solution would be to create your own TimeSpinner and place it into your own DateTimeSelectorDropDown, but it could be a lot of work.

There is a fast workaround. You could replace two methods of TimeSpinner - parse and format to use 24 hours format. Those methods will be replaced in you own DateTimeSelectorDropdown. The only change is to ensure that timePattern: 'HH:mm' format setting is used.

You should notice that it's possible that if EPiServer or Dojo change the implementation in future this solution could stop working.

You need custom EditorDescriptor (you already have). The editor will use custom ClientEditingClass - "alloy.editors.customDateTimeSelectorDropDown" instead of "epi/shell/widget/DateTimeSelectorDropDown".

[EditorDescriptorRegistration(TargetType = typeof (DateTime?), UIHint = UIHint)]
    public class CustomDateEditorDescriptor : DateTimeEditorDescriptor
    {
        public const string UIHint = "custom-date";

        public CustomDateEditorDescriptor()
        {
            this.ClientEditingClass = "alloy.editors.customDateTimeSelectorDropDown";
        }

        public override void ModifyMetadata(ExtendedMetadata metadata, IEnumerable<Attribute> attributes)
        {
            base.ModifyMetadata(metadata, attributes);

            var constraints = new Dictionary<string, object>
            {
                {"datePattern", "yyyy-MM-dd"},
                {"timePattern", "HH:mm"},
                {"locale", "sv-SE"}
            };
            metadata.EditorConfiguration.Add("constraints", constraints);
        }
    }

And then use custom widget. Widget will inherit from epi/shell/widget/DateTimeSelectorDropDown and override just one method - openDropDown

define([
        "dojo/_base/declare",
         "dojo/_base/lang",
        "dojo/date/locale",
        "epi/shell/widget/DateTimeSelectorDropDown"
],
    function (
        declare,
        lang,
        dateLocale,
        DateTimeSelectorDropDown
    ) {
        return declare("alloy.editors.nullableDateTimeSelectorDropDown", [DateTimeSelectorDropDown], {
            
            openDropDown: function () {
                var value = this.get('value');

                this.inherited(arguments);
                this.dropDown.timePicker.parse = function (time, locale) {
                    return dateLocale.parse(time, { selector: "time", formatLength: "short", timePattern: 'HH:mm' });
                };

                this.dropDown.timePicker.format = function (time, locale) {
                    if (lang.isString(time)) {
                        return time;
                    }
                    return dateLocale.format(time, { selector: "time", formatLength: "short", timePattern: 'HH:mm' });
                };

                this.dropDown.set('value', value);
            }
        });
    });

Hi Grzegorz,

Your solution works well. Thank you for your help with this issue, it is very much appreciated!

for ppl that used this and broke in Epi 10, its because of the breaking change in dot notation of dojo modules in version 10+.

http://world.episerver.com/blogs/Ben-McKernan/Dates/2016/9/the-dot-notation-breaking-change/

change the dots to slashes and it will work again.. 

Tried to implement this for the CMS UI 10.12.0 but receiving dojo error undefined. Are there any other breaking changes to this implementation?

I have tried to implement Tobias's solution for a custom DateTime editor in Episerver 11 but it is not working. What is the value of Global.SiteUIHints.DateTimeIso supposed to be? Are there any other changes that are required to make Tobias's solution work in Episerver 11? My descriptor currently looks like this: 

    [EditorDescriptorRegistration(TargetType = typeof(DateTime?), UIHint = "custom-date")]
    [EditorDescriptorRegistration(TargetType = typeof(DateTime), UIHint = "custom-date")]
    public class DateTimeEditorDescriptor : EditorDescriptor
    {
        
        public override void ModifyMetadata(ExtendedMetadata metadata, IEnumerable<Attribute> attributes)
        {
            ClientEditingClass = "epi/shell/widget/DateTimeSelectorDropDown";
            base.ModifyMetadata(metadata, attributes);

            var constraints = new Dictionary<string, object>()
            {
                { "datePattern", "yyyy-MM-dd" },
                { "timePattern", "HH:mm" },
                { "locale", "en" }
            };
            metadata.EditorConfiguration.Add("constraints", constraints);

        }
    }

Scratch that, I just needed to add the UiHint to my property - duh!