+1-888-365-2779
Try Now
More in this section

Forums / Developing with Sitefinity / Setting Backend Date Format

Setting Backend Date Format

4 posts, 0 answered
  1. Damon
    Damon avatar
    5 posts
    Registered:
    07 Aug 2012
    18 Nov 2013
    Link to this post
    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.
  2. Ivan D. Dimitrov
    Ivan D. Dimitrov avatar
    310 posts
    Registered:
    26 Mar 2015
    21 Nov 2013
    Link to this post
    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
  3. Damon
    Damon avatar
    5 posts
    Registered:
    07 Aug 2012
    21 Nov 2013 in reply to Ivan D. Dimitrov
    Link to this post
    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? 
  4. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    Registered:
    01 Feb 2016
    26 Nov 2013
    Link to this post
    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
4 posts, 0 answered