Fixing Optimizely DateTime Picker: Handle Dates Prior to 1970

The issue is straightforward: the DateTime picker in Optimizely CMS cannot select dates before the year 1970.

When I looked into it more closely, I discovered that the issue was with Dojo not sending the correct date to the CMS because of validations in the Dojo script.

Although it's always daunting to look into Dojo, I was fortunate to find the problem quite easily.

The function in the original script _setValueAttr was checking if the value’s timestamp was greater than 0, which wasn't necessary in this case. It seems to me like an unnecessary check because the datetime picker should always set the value with validation, of course!

Here is the modified Dojo script to use in the project:

define([
  "dojo/_base/declare",
  "dojo/_base/lang",
  "dojo/keys",
  "dijit/form/_DateTimeTextBox",
  "epi/shell/widget/DateTimeSelector"
], function (declare, lang, keys, datetime, datetimeSelector) {
  return declare([datetime], {
    baseClass: "dijitTextBox dijitComboBox dijitDateTextBox",
    popupClass: datetimeSelector,
    forceWidth: false,
    isSelecting: false,
    canceled: false,
    isDropDownShowing: false,

    constructor: function () {
      this.constraints = {
        formatLength: "short",
        fullYear: "true"
      };
    },

    toggleDropDown: function () {
      this.isSelecting = !this._isSelecting;
      this.inherited(arguments);
    },

    openDropDown: function () {
      this.inherited(arguments);
      this.dropDown.onChange = function () { };
      this.connect(this.dropDown.domNode, "onkeypress", lang.hitch(this, function (e) {
        this._canceled = e.keyCode === keys.ESCAPE;
        if (e.keyCode === keys.ESCAPE || e.keyCode === keys.ENTER) {
          this._isSelecting = false;
          this.closeDropDown(true);
        }
      }));
      this._isSelecting = true;
      this._canceled = false;
      this._dropDownShowing = true;
    },

    setValueAttr: function () {
      this.inherited(arguments);
    },

    closeDropDown: function (_9) {
      if (!this._isSelecting && this._dropDownShowing) {
        if (!this._canceled && this.dropDown) {
          this.set("value", this.dropDown.get("value"));
        }
        this.inherited(arguments);
        this._dropDownShowing = false;
      }
    },

    onBlur: function () {
      this.isSelecting = false;
      if (this._dropDownShowing) {
        this.closeDropDown();
      }
      this.inherited(arguments);
    }
  });
});

To use it with an existing property,

[UIHint(UIHints.UTCDateTime)]
public virtual DateTime DateOfBirth { get; set; }

And an editor descriptor

[EditorDescriptorRegistration(TargetType = typeof(DateTime?), UIHint = UIHints.UTCDateTime)]
[EditorDescriptorRegistration(TargetType = typeof(DateTime), UIHint = UIHints.UTCDateTime)]
public class UTCDateEditorDescriptor : DateTimeEditorDescriptor
{
    public override void ModifyMetadata(ExtendedMetadata metadata, IEnumerable attributes)
    {
        ClientEditingClass = "custom-episerver/Editors/UTCDateTime";
        base.ModifyMetadata(metadata, attributes);
    }
}

That’s it.