Change DateTime-format in forms-edit mode?

Hello,

I'm looking to set the DateTime-format of a property in forms-edit mode so that it shows dates in dd-mm-yyyy format instead of mm/dd/yy and with 24-hour clock. 

Is it possible to do this?

This is the definition of the DateTimeSelector:

define([
"dojo/_base/declare",
"dojo/_base/lang",
"dojo/keys",
"dijit/form/_DateTimeTextBox",
"epi/shell/widget/DateTimeSelector"
],

function (declare, lang, keys, _DateTimeTextBox, DateTimeSelector) {

return declare([_DateTimeTextBox], {
baseClass: "dijitTextBox dijitComboBox dijitDateTextBox",

...

#122264 May 28, 2015 17:33
  • Hi,

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

    #122291 May 29, 2015 13:02
  • 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);
                
            }
        }



    #122306 May 29, 2015 15:57
  • 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);
                }
            });
        });

    #122346 May 31, 2015 20:04
  • Hi Grzegorz,

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

    #122390 Jun 01, 2015 16:33
  • Member since: 2011

    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.. 

    #176786 Mar 27, 2017 12:29