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):

Date picker in Content Editor

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

Date picker in Experience Editor

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.

  • Which Sitecore version you are on Dan ? – Amitabh Vyas Nov 7 at 18:50
  • Sorry, Sitecore 8.1u3. (Question updated.) – Dan Sinclair Nov 7 at 18:51
  • I have a case open with sitecore for this same issue in sitecore 8.2u7. I'll post there solution when I here back from them – Mikeyp Nov 8 at 14:54
up vote 3 down vote accepted

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.

Sitecore does not like the hotfixes to be shared publicly, but you can get it by submitting a Sitecore Support ticket and mentioning reference number 51661.

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.

Date picker with valid format

  • If possible, I'd like to avoid hardcoding the format string into the JS. I've got a ticket open with Sitecore Support, too, and I'm hoping for a more comprehensive fix. – Dan Sinclair Nov 9 at 15:40
  • They are supposed to be back to me with the same. For now, I am using the above as a stop gap solution. – Mikeyp Nov 9 at 19:10
  • I found a much more elegant solution and updated my post. – Mikeyp Nov 9 at 20:34
  • I agree that this is better, but it's still hardcoding the format, unfortunately. I with it was just setting the right format in this.model.set("dateFormat", this.$el.attr("data-dateformat")) – Dan Sinclair Nov 12 at 12:51
  • Yep, me too. I added an answer with that info. – Dan Sinclair Nov 14 at 15:36

Your Answer

 

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.