Setting Backend Date Format

Posted by Community Admin on 04-Aug-2018 22:19

Setting Backend Date Format

All Replies

Posted by Community Admin on 18-Nov-2013 00:00

Is it possible to set the date format for the backend controls? To be specific, I have a requirement for the client that the date control in the "Publish/Unpublish on Specific date" dialog display in dd/MM/yyyy format rather than the MM/dd/yyyy format that they are currently. I've done a bit of rummaging around the Advanced setting section but have so far turned up nothing to help with this issue.

Posted by Community Admin on 21-Nov-2013 00:00

Hello Damon,

The functionality you request is indeed possible. Due to the fact that you do not specify the content type you wish to change the date and time format for I will give you an example with our Events Module. It uses the date time picker (RadDateTimePicker) for setting the date of the events.The methodology for the other modules(content types) who use this field for choosing a date is the same.

In order for you to change the backend date/time format you need to go to  Events > Controls > EventsBackend > Views > EventsBackendEdit > Sections > MainSection > Fields > EventStart. You will need to entirely override the default date-time picker and register custom extended .js script through it in order to be able to display the time values in the desired format. Below I will paste the C# Class which registers the client component:

Copy Code
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using Telerik.Sitefinity.Web.UI.Extenders;
using Telerik.Sitefinity.Web.UI.Fields;
    
namespace SitefinityWebApp.DateFieldSample
    public class DateFieldCustom : DateField
    
        public override IEnumerable<ScriptReference> GetScriptReferences()
        
            string assemblyName = typeof(DateFieldCustom).Assembly.FullName;
            var scripts = new List<ScriptReference>(base.GetScriptReferences());
            scripts.Add(new ScriptReference(DateFieldCustom.dateFieldScript, assemblyName));
    
            return scripts.ToArray();
        
        private const string dateFieldScript ="SitefinityWebApp.DateFieldSample.DateFieldCustom.js";
    
Below you can find the Javascript itself:
Copy Code
Type.registerNamespace("SitefinityWebApp.DateFieldSample");
    
SitefinityWebApp.DateFieldSample.DateFieldCustom = function (element)
    SitefinityWebApp.DateFieldSample.DateFieldCustom.initializeBase(this, [element]);
    
SitefinityWebApp.DateFieldSample.DateFieldCustom.prototype =
    initialize: function ()
        SitefinityWebApp.DateFieldSample.DateFieldCustom.callBaseMethod(this,'initialize');
    ,
    dispose: function ()
        SitefinityWebApp.DateFieldSample.DateFieldCustom.callBaseMethod(this,'dispose');
    ,
    
    set_datePickerFormat: function (dFormat, tFormat)       
        dFormat = "mm/dd/yy";      
    
        this._resetDateTimePickers();
    
        switch (this.get_dateTimeDisplayMode())
            caseTelerik.Sitefinity.Web.UI.Fields.DateFieldDisplayMode.DateTime:
                this._setDateTimeMode(dFormat, tFormat);
                break;
            case Telerik.Sitefinity.Web.UI.Fields.DateFieldDisplayMode.Date:
                this._setDateMode(dFormat);
                break;
            case Telerik.Sitefinity.Web.UI.Fields.DateFieldDisplayMode.Time:
                this._setTimeMode(tFormat);
                break;
              
    ,
    
    _setDateTimeMode: function (dFormat, tFormat)
           
        this._datePicker = jQuery("#" this._datePickerId).datetimepicker(
            dateFormat: 'dd MMM, yyyy',
            hourGrid: tFormat,
            timeFormat: 'hh:mm TT',
            minuteGrid: 10,
            beforeShow: this._datePickerOnPopupOpeningDelegate,
            onClose: this._datePickerOnPopupClosingDelegate,
            showOn: "focus",
            ampm: true
        );
        this._setDateTimeCommand = "setDate";
        this._datePicker.datepicker(this._setDateTimeCommand, this._value ?this._value : "");
    ,
    
    
Make sure that the .js file's Build action is set to Embedded Resource and build the solution, then run the project in the browser. Please note that my control was placed in a DateFieldsSample folder.

Once you've build the solution you have to go to Administration->Settings->Advanced -> ContentView->Controls->EventsBackend->Views and do the following:

1. Go to EventsBackendEdit->Sections->MainSection->EventStart and change the FieldType property to be the CLR type of the custom DateField (e.g. SitefinityWebApp.DateFieldSample.DateFieldCustom )Click Save.
2. Do the same for EventsBackendEdit->Sections->MainSection->EventEnd
3 .Do the same for EventsBackendInsert->Sections->MainSection->EventStart
4. Do the same for EventsBackendInsert->Sections->MainSection->EventEnd

For the module builder content you need to go to Administration->Settings->Advanced ->ContentView->Controls and select the backend view section of your dynamic module. Then similar as above you need to alter both the Insert and Edit views of the dynamic module to use the custom control.

Regards,
Ivan D. Dimitrov
Telerik
Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

Posted by Community Admin on 21-Nov-2013 00:00

This sounds very promising but I'm having trouble finding the appropriate field in the backend. I have navigated to the Admin->Settings->Advanced->ContentView->Controls->MyCustomModule->Views->BackEndEdit->Sections->MainSection but cannot find the field that I am looking for. This makes sense because the field I am interested in customizing is the Publish Date which is not part of the EditView but contained under the "More Action" drop down that sits in the bar above the EditView. So where do I go for that control? 

Posted by Community Admin on 26-Nov-2013 00:00

Hello Damon,

In order to achieve this customization for the Schedule Publish/Unpublish dialog you can map a custom template for the WorkflowScheduleDialog control which will replace the built in date field with the one which Ivan has proposed. So essentially the changes to the template will be the following:
Before:

<%@ Control Language="C#" %>
<%@ Register Assembly="Telerik.Sitefinity" TagPrefix="sitefinity" Namespace="Telerik.Sitefinity.Workflow.UI" %>
<%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI" TagPrefix="sf" %>
<%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI.Fields" TagPrefix="sfFields" %>
<%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI.Validation.Definitions" TagPrefix="sfvalidation" %>
 
<h1 class="sfSepTitle"><asp:Literal ID="Literal1" runat="server" Text="<%$Resources: WorkflowResources, SchedulePublishUnpublish%>" /></h1>
<div class="sfBasicDim">
    <div class="sfContentViews">
        <sfFields:DateField ID="publishedOnDateField" runat="server" DisplayMode="Write" Title="<%$Resources:WorkflowResources, PublishOn %>" WrapperTag="div" CssClass="sfFormCtrl sfShort">
            <ValidatorDefinition MessageCssClass="sfError" requiredviolationmessage="<%$ Resources:WorkflowResources, SchedulingWasNotMade %>" required="true" />
        </sfFields:DateField>
       <div class="sfExpandableSection" id="unpublishOnSection" runat="server">
           <h3><a href="javascript:void(0);" class="sfMoreDetails" id="unpublishOnExpander" runat="server">
           <asp:Literal ID="DateToUnpublishLiteral" runat="server" Text="<%$Resources:WorkflowResources, DateToUnpublish %>" /></a></h3>
            <sfFields:DateField ID="unpublishOnDateField" runat="server" DisplayMode="Write" Title="<%$Resources:WorkflowResources, UnpublishOn %>" WrapperTag="div" CssClass="sfTargetList sfShort">
                    <ValidatorDefinition MessageCssClass="sfError">
                    <ComparingValidatorDefinitions>
                        <sfvalidation:ComparingValidatorDefinition ControlToCompare="publishedOnDateField"
                            Operator="GreaterThan" ValidationViolationMessage="<%$ Resources:WorkflowResources, UnpublishDateShouldBeAfterPublicationDate %>" />
                    </ComparingValidatorDefinitions>
                </ValidatorDefinition>
            </sfFields:DateField>
       </div>
    </div>
</div>
<div class="sfButtonArea sfSelectorBtns">
    <asp:LinkButton ID="saveButton" runat="server" OnClientClick="return false;" CssClass="sfLinkBtn sfSave">
        <strong class="sfLinkBtnIn">
            <asp:Literal ID="Literal2" runat="server" Text='<%$ Resources:Labels, Save %>'></asp:Literal>
        </strong>
    </asp:LinkButton>
    <asp:Literal runat="server" ID="lOr" Text="<%$Resources:Labels, or %>" />
    <a href="javascript:dialogBase.close();" class="sfCancel">
        <asp:Literal ID="Literal3" runat="server" Text="<%$Resources:Labels, Cancel %>" /></a>
</div>

After:
<%@ Control Language="C#" %>
<%@ Register Assembly="Telerik.Sitefinity" TagPrefix="sitefinity" Namespace="Telerik.Sitefinity.Workflow.UI" %>
<%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI" TagPrefix="sf" %>
<%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI.Fields" TagPrefix="sfFields" %>
<%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI.Validation.Definitions" TagPrefix="sfvalidation" %>
<%@ Register Assembly="SitefinityWebApp" Namespace="SitefinityWebApp.DateFieldSample" TagPrefix="sfCustom" %>
 
<h1 class="sfSepTitle"><asp:Literal ID="Literal1" runat="server" Text="<%$Resources: WorkflowResources, SchedulePublishUnpublish%>" /></h1>
<div class="sfBasicDim">
    <div class="sfContentViews">
        <sfCustom:DateFieldCustom ID="publishedOnDateField" runat="server" DisplayMode="Write" Title="<%$Resources:WorkflowResources, PublishOn %>" WrapperTag="div" CssClass="sfFormCtrl sfShort">
            <ValidatorDefinition MessageCssClass="sfError" requiredviolationmessage="<%$ Resources:WorkflowResources, SchedulingWasNotMade %>" required="true" />
        </sfCustom:DateFieldCustom>
       <div class="sfExpandableSection" id="unpublishOnSection" runat="server">
           <h3><a href="javascript:void(0);" class="sfMoreDetails" id="unpublishOnExpander" runat="server">
           <asp:Literal ID="DateToUnpublishLiteral" runat="server" Text="<%$Resources:WorkflowResources, DateToUnpublish %>" /></a></h3>
            <sfCustom:DateFieldCustom ID="unpublishOnDateField" runat="server" DisplayMode="Write" Title="<%$Resources:WorkflowResources, UnpublishOn %>" WrapperTag="div" CssClass="sfTargetList sfShort">
                    <ValidatorDefinition MessageCssClass="sfError">
                    <ComparingValidatorDefinitions>
                        <sfvalidation:ComparingValidatorDefinition ControlToCompare="publishedOnDateField"
                            Operator="GreaterThan" ValidationViolationMessage="<%$ Resources:WorkflowResources, UnpublishDateShouldBeAfterPublicationDate %>" />
                    </ComparingValidatorDefinitions>
                </ValidatorDefinition>
            </sfCustom:DateFieldCustom>
       </div>
    </div>
</div>
<div class="sfButtonArea sfSelectorBtns">
    <asp:LinkButton ID="saveButton" runat="server" OnClientClick="return false;" CssClass="sfLinkBtn sfSave">
        <strong class="sfLinkBtnIn">
            <asp:Literal ID="Literal2" runat="server" Text='<%$ Resources:Labels, Save %>'></asp:Literal>
        </strong>
    </asp:LinkButton>
    <asp:Literal runat="server" ID="lOr" Text="<%$Resources:Labels, or %>" />
    <a href="javascript:dialogBase.close();" class="sfCancel">
        <asp:Literal ID="Literal3" runat="server" Text="<%$Resources:Labels, Cancel %>" /></a>
</div>

Then you need to go to Administration -> Settings -> Advanced -> Controls -> ViewMap and map the custom template for the workflow schedule dialog. I have attached the files I have used in my project. You can check the Controls config in the attached archive for more details on exactly which view must be added to the view map.

Regards,
Radoslav Georgiev
Telerik
Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

This thread is closed