DatePicker displays incorrect format in Experience Editor

Question

We have a date field on an item in Sitecore (version 8.1 Update 3). When that field is rendered in the Content Editor, the correct date formatting is used (US, in our case: MM/DD/YYYY):

However, when that page is loaded in the Experience Editor, the date picker displays the wrong format (DD/MM/YYYY):

Does anyone know how to make the Experience Editor date picker show the proper format?

I've already reviewed a similar-looking question, but our DatePicker.js already had the updated code, so that's not the issue.

Answer 1

Sitecore has a hotfix for this issue (reference number 51661).

Fixing the issue involves adding the Sitecore Support DLL (Sitecore.Support.51661.dll) and making a modification to the SPEAK presentation details of the SelectDateTime dialog in the Experience Editor to use the new type from the DLL.

Answer 2

Sitecore support sent me a link to the following KB article. So what I ended up doing was modifying the sitecore\shell\client\Business Component Library\Layouts\Renderings\Common\DatePickers\datepicker.js file.

In the view: {....}which is near the top of the file, add this.setDateFormat("mm/dd/yyyy");

this is what it looks like in my file

    view: {
  initialized: function () {
    var days = {
      "Monday": 1,
      "Tuesday": 2,
      "Wednesday": 3,
      "Thursday": 4,
      "Friday": 5,
      "Saturday": 6,
      "Sunday": 7
    };

    this.model.on("change:date", this.setFormattedDateAttribute, this);

    this.model.on("change:formattedDate", this.setDateAttribute, this);

    this.model.set("firstDay", days[this.$el.attr("data-firstday")]);
    this.model.set("showOtherMonths", this.$el.attr("data-showothermonths") === "true");
    this.model.set("showButtonPanel", this.$el.attr("data-showtoday") === "true");
    this.model.set("viewMode", this.$el.data("viewmode"));

    this.model.set("isEnabled", this.model.get("viewMode") != "calendar" ?
      !this.$el.is(":disabled") : this.$el.attr("data-isenabled") === "true");

    if (this.$el.attr("readonly")) {
      this.model.set("isReadOnly", this.$el.attr("readonly"));
    } else {
      $.noop();
    }
     this.model.set("disabled", !this.model.get("isEnabled"));

    this.model.on("change:dateFormat", this.changeDateFormat, this);
    this.model.on("change:isEnabled", $.proxy(changeDisabled, this));

    this.model.set("dateFormat", this.$el.attr("data-dateformat"));

    this.model.set("time", this.$el.attr("data-time"));
    this.model.on("change:time", this.timeUpdated, this);

    this.model.on("change:minDate change:maxDate", this.changeRange, this);
    this.model.set("minDate", this.$el.attr("data-mindate"));
    this.model.set("maxDate", this.$el.attr("data-maxdate"));

    if (this.$el.attr("data-localization")) {
      this.setLocalization();
    }

    this.overWriteSetDateMethod(this.setDate);      
    this.setDateFormat("mm/dd/yyyy");
  },

this corrected my issue as shown in the screen shot.