Problem:

I have faced problem for using DateTime dojo property in the EPiserver page type template. My requirement is user needs to create the event with start and end date. So i'm using the default Date Time property, This perfectly work when EPiServer Admin / Editor user crating the page with same Time zone and also dates are displayed correctly in the page preview mode. 

But, when the users in different Time zone like EST & PST the dates are displayed one day ahead in EPiserver Editmode. for ex; if date is 7/10/2013 and in Editmode it displayed 7/11/2013. The problem is dojo stored value into ISO standared format, so in the client side event trigger it takes client TimeZone setting and convert the stored Date value. In my situation, the server Timezone is PST standard time, but client using the EPiServer edit mode in EST standard time, so dates are displayed incorrectly.

Solution:

For this problem I've used the below custom date dojo editor solution and fixed it. If there is any other option is greatly appreciated, please share.

DateTextboxEditor.JS

define([
    "dojo/_base/array",
    "dojo/_base/connect",
    "dojo/_base/declare",
    "dojo/_base/lang",

    "dijit/_CssStateMixin",
    "dijit/_Widget",
    "dijit/_TemplatedMixin",
    "dijit/_WidgetsInTemplateMixin",

     "dijit/dijit", // loads the optimized dijit layer
    "dijit/Calendar",
    "dijit/form/DateTextBox",
    "dijit/form/ValidationTextBox",
    "dijit/form/Button",

    "epi/epi",
      "phoenixweb/requiremodule!App",
        "dojo/text!phoenixweb/Editors/templates/dateTextboxeditor.html"

],
function (
    array,
    connect,
    declare,
    lang,

    _CssStateMixin,
    _Widget,
    _TemplatedMixin,
    _WidgetsInTemplateMixin,
    dijit,
    Calendar, DateTextBox, TextBox, Button,
    epi,
    appModule,
    template
) {

    return declare("phoenixweb.Editors.DateTextboxEditor", [_Widget, _TemplatedMixin, _WidgetsInTemplateMixin, _CssStateMixin], {

        templateString: template,
        
        
        postCreate: function () {
            this.set('value', this.value);
            this.dateInputWidgetTextbox.set("value", this.value);

            this.dateInputWidgetbtn.set("iconClass", "calendarIcon");
            this.dateInputWidgetbtn.set("showLabel", "false");
            this.dateInputWidgetbtn.set("label", "");
            // Init textarea and bind event
            this.connect(this.dateInputWidgetbtn, "onClick", this._onbutton);
            this.connect(this.dateInputWidgetCalendar, "onValueSelected", this._onCalendar);
            this.connect(this.dateInputWidgetTextbox, "onKeyPress", this._onTextAreaPress);
            this.connect(this.dateInputWidgetTextbox, "onBlur", this._onChange);

            
           
        },
 

        _onIntermediateChange: function (event) {
            if (this.intermediateChanges) {
                this._set('value', event.target.value);
                this.onChange(this.value);
            }
        },

        // Setter for value property
        _setValueAttr: function (value) {

            this.dateInputWidgetTextbox.set("value", value);
            this.dateInputWidgetbtn.set("showLabel", "false");
            this.dateInputWidgetbtn.set("label", "");
            this._set('value', value);
            
        },

        

        // Setter for intermediateChanges
        _setIntermediateChangesAttr: function (value) {
            this.dateInputWidgetTextbox.set("intermediateChanges", value);
            this._set("intermediateChanges", value);
        },

        // Event handler for textarea
        _onbutton: function () {
            
            this.dateInputWidgetCalendar.set("style", "display:block!important");
        },

        _onCalendar: function (date) {
            var dd = (date.getMonth() + 1) + "/" + date.getDate() + "/" + date.getFullYear();
            this.dateInputWidgetTextbox.setValue(dd);
            this._updateValue(this.dateInputWidgetTextbox.value);
            this.dateInputWidgetCalendar.set("style", "display:none!important");
        },

        _onTextAreaPress: function () {
            this._set('value', this.dateInputWidgetTextbox.value);
            this._updateValue(this.dateInputWidgetTextbox.value);
            this.dateInputWidgetCalendar.set("style", "display:block!important");
        },
        _onChange: function () 
         {
             this._set('value', this.dateInputWidgetTextbox.value);
             this._updateValue(this.dateInputWidgetTextbox.value);
             

          },
          onChange: function (value) {
               
          },

        // updates the value and tells epi to save
        _updateValue: function (value) {
            if (epi.areEqual(this.value, value)) {
                return;
            }

            this._set("value", value);
            this.onChange(value);
        }


    });
});

 dateTextboxeditor.html 

 <div class="dijitInline">
    <style>.nodisp {display:none;}
    
 	 .calendarIcon { 
    background-image: url("../../Plugins/ClientResources/Scripts/PhoenixWeb/Editors/templates/Images/Calendar_icon.png"); 
    background-position: center center; 
    background-repeat: no-repeat; 
    height: 18px; 
    width: 18px; 
    text-align:center;
} 
    </style>
    <input type="text" data-dojo-attach-point="dateInputWidgetTextbox" data-dojo-type="dijit/form/ValidationTextBox"
        data-dojo-props="regExp:'^([0]?[1-9]|[1][0-2])[./-]([0]?[1-9]|[1|2][0-9]|[3][0|1])[./-]([0-9]{4}|[0-9]{2})$',invalidMessage: 'Please enter a valid date [MM/dd/YYY].'"   />
    <button  data-dojo-attach-point="dateInputWidgetbtn" data-dojo-type="dijit/form/Button" type="button" data-dojo-props="showLabel: false"></button>
            
    <div data-dojo-attach-point="dateInputWidgetCalendar" data-dojo-type="dijit/Calendar" data-dojo-props="" class="nodisp">
    </div>
</div>