SaaS CMS has officially launched! Learn more now.

UIHint for Date (not DateTime)

Vote:
 

Has anybody already developed solution for showing DatePicker instead of default DateTimePicker?

I guess this have to be done with UIHint and some dojo code.

#66753
Mar 08, 2013 13:43
Vote:
 

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".

#66755
Mar 08, 2013 14:51
Vote:
 

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.

#71825
Edited, May 30, 2013 8:35
Vote:
 

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.

#71826
May 30, 2013 9:59
Vote:
 

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.

 

 

#71832
May 30, 2013 10:41
Vote:
 

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

#71836
May 30, 2013 10:49
Vote:
 

 

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,

#71840
Edited, May 30, 2013 11:27
Vote:
 

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

 

 

#71841
Edited, May 30, 2013 11:50
Vote:
 

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

#71842
Edited, May 30, 2013 11:58
Vote:
 

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.

 

 

 

#71854
May 30, 2013 13:51
Vote:
 

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

#71856
May 30, 2013 14:05
Vote:
 

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

#71857
May 30, 2013 14:56
Vote:
 

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; }

#71874
Edited, May 31, 2013 8:58
Vote:
 

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.

#175832
Mar 03, 2017 12:44
Vote:
 

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

#175849
Mar 03, 2017 23:55
This thread is locked and should be used for reference only. Please use the Episerver CMS 7 and earlier versions forum to open new discussions.
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.