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.
