First, on the DateTime property of your page type, decorate a UIHint, says "DateOnly". Then, just create an editor descriptor which is regsitered for DateTime type and "DateOnly" hint, set ClientEditorClass to "dijit/form/DateTextBox".

I have followed the same concept but the property style will not apply to the page, it showing the simple Date and Time picker format.

Here is the code

// Editor Descriptor

 [EditorDescriptorRegistration(TargetType = typeof(string), UIHint = "DateOnly")]
    public class DateEditorDescriptor : EditorDescriptor
    {
        public override void ModifyMetadata(ExtendedMetadata metadata, IEnumerable<Attribute> attributes)
        {
           
            ClientEditingClass = "dijit/form/DateTextBox";

            base.ModifyMetadata(metadata, attributes);
        }
    }

//Page Type

  [Editable(true)]
        [Display(
            Name = "Event Start Date",
            Description = "The Event Start Date will be shown in the Page",
            GroupName = SystemTabNames.Content,
            Order = 200)]
        [UIHint("DateOnly")]
        public virtual DateTime EventStartDate { get; set; }

Please advise.

Hi, your editor descriptor was registered for string, that would not affect your datetime property. It should look like:

[EditorDescriptorRegistration(TargetType = typeof(DateTime), UIHint = "DateOnly")]

Regards.

Thank you for the quick reply. I have changed the value string to Datetime, but still the problem exists.

I was trying to create the property 'Event start date', 'Event end date','Event start time' & 'Event end time'. But I am always getting the Date and time value together in the date value selection.

Please help us to resolve this dojo problem.

Hi, 2 things you could try then:

- Check if you got any red line in Firebug/Chrome's console and network tab

- Change the attribute in your properties to: UIHint("DateOnly", PresentationLayer.Edit)

Regards

 

I am not getting any red line message,  but every time the below message will apear

 
DEPRECATED: ValidationTextBox id=dijit_form_ValidationTextBox_9, set('regExp', ...) is deprecated. Use set('pattern', ...) instead. -- will be removed in version: 2.0 dojo.js:2222
DEPRECATED: ValidationTextBox id=dijit_form_ValidationTextBox_11, set('regExp', ...) is deprecated. Use set('pattern', ...) instead. -- will be removed in version: 2.0
 
Thanks,

The below error also will be appear sometimes

TypeError: ctor is not a constructor

var widget = new ctor(settings);

WidgetFactory.js (line 377)

constructorExecutor@http://phoenixcms.local/episerver/Shell/2.0.86/ClientResources/EPi/shell/widget/WidgetFactory.js:377 .cache["dojo/_base/lang"]/</lang.hitch/<@http://phoenixcms.local/episerver/Shell/2.0.86/ClientResources/dtk

The below error will also apear some times

TypeError: this._autoSaveButton is null

this._autoSaveButton.set("model", this.viewModel);

EditingBase.js (line 288)

.setupEditMode/<@http://phoenixcms.local/episerver/CMS/2.0.79/ClientResources/EPi/Cms/contentediting/EditingBase.js:288 .cache["dojo/_base/lang"]/</lang.hitch/<@http://phoenixcms.local/episerver/Shell/2.0.86/ClientResources/dtk/dojo/dojo.js:3135 notify@http://phoenixcms.local/episerver/Shell/2.0.86/Client

Hi,

I bet you are on EPiServer 7.0 with dojo 1.7. If so, changing the ClientEditingClass to "dijit.form.DateTextBox" (dot notation instead of slash notation) could help.

/Duong

Hi, thanks for keep replying to help me. Still my problem not resolved, Please refer the image below for the datetime picker after using the UIHint class.

Now I know what's the fault.

Quite strange but you need to register the editor descriptor to DateTime? (Nullable<DateTime>). The reason is that value type of the backing property type (PropertyDateTime) is DateTime?, not DateTime.

Tell me if it works.

Regards

Can you please provide some more informaiton on this. Do you have have any reference URL, if anything please share.

Finally I got the solution... :) the problem is using DateTime in the TargetType and PageType, now i have changed to String. 

I really appreciate your help. Here is the updated code which will work for me.

//EditorDescriptor

 [EditorDescriptorRegistration(TargetType = typeof(string), UIHint = "DateOnly")]

    public class DateEditorDescriptor : EditorDescriptor
    {
        /// <summary>
        /// Initializes a new instance of the class.
        /// </summary>
        public DateEditorDescriptor()
        {
            //The default editing class that will be used in forms editing mode.
            ClientEditingClass = "dijit.form.DateTextBox";
        }

        public override void ModifyMetadata(ExtendedMetadata metadata, IEnumerable<Attribute> attributes)
        {
            base.ModifyMetadata(metadata, attributes);
            //Define what kind of editor we want to have, in this case we want to create an inline editor. This is used
            //when the user is in "on page editing" mode.
            metadata.CustomEditorSettings["uiWrapperType"] = "inline";
            //Specify the class for a custom editor responsible for the actual editing.
            //If not defined the default (forms) editor will be used.
            metadata.CustomEditorSettings["uiType"] = "dijit.form.DateTextBox";
            
        }
    }

//PageType

  [Editable(true)]
        [Display(
            Name = "Event Dummy Date",
            Description = "The Event Start Date will be shown in the Page",
            GroupName = SystemTabNames.Content,
            Order = 201)]
        [UIHint("DateOnly")]
        public virtual string EventDummytDate { get; set; }

For anyone that runs into this problem on a later version of EPiServer (8/9/10 onwards), as the version of Dojo has been updated I was experiencing JavaScript errors as the DateTextBox classname is now dijit/form/DateTextBox in oppose to fullstops.

A solution that worked for me at the time of writing this blog post: https://www.dcaric.com/blog/creating-a-date-picker-in-episerver-10