Event Time Picker - 12 hour format - General Discussions - General Discussions - Progress Community
 General Discussions

Event Time Picker - 12 hour format

  • Event Time Picker - 12 hour format
  • In the Events module the Date/Time Pickers for the Start & End fields have a slider for the Hour field that displays in a 24 hour format.  Our clients wish for the slider to be in a 12 hour format as that is what they are more comfortable with.  Does anyone know if this is easily achievable?
  • 267588_Events-Format-AMPM.PNG
    Hello Sean Rios,

    Yes, it is possible to change the time format for the EventStart and EventEnd datetime pickers - we're using jQueryUI to display the datetime picker  and you'll just need to set ampm:true to activate the desired functionality. This functionality is not offered out of the box, thanks for pointing out the need for it. What you can do is to map the template for DateField. Please follow the steps described below:
    1.Create a new user control and name it DateField.ascx. Here's the code you'll need to include in it:
    <%@ Control Language="C#" %>
    <%--@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik"--%>
    <%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI" TagPrefix="sf" %>
     
    <sf:ResourceLinks id="resourcesLinks" runat="server" >
           <sf:ResourceFile Name="Styles/jQuery/jquery.ui.datepicker.css" />
           <sf:ResourceFile Name="Styles/jQuery/jquery.ui.slider.css" />
           <sf:ResourceFile Name="Styles/jQuery/jquery.ui.theme.sitefinity.css" />
    </sf:ResourceLinks>
    <sf:ConditionalTemplateContainer ID="conditionalTemplate" runat="server">
        <Templates>
            <sf:ConditionalTemplate ID="ConditionalTemplate1" Left="DisplayMode" Operator="Equal" Right="Read" runat="server">
                <sf:SitefinityLabel id="titleLabel_read" runat="server" WrapperTagName="div" HideIfNoText="false" CssClass="sfTxtLbl" />
                <sf:SitefinityLabel id="dateAsText" runat="server" WrapperTagName="div" HideIfNoText="false" DataFormat="MM/dd/yyyy h:mm:ss " />
            </sf:ConditionalTemplate>
            <sf:ConditionalTemplate ID="ConditionalTemplate2" Left="DisplayMode" Operator="Equal" Right="Write" runat="server">
                <asp:Label ID="titleLabel_write" runat="server" CssClass="sfTxtLbl" AssociatedControlID="datePicker" />
                <asp:LinkButton ID="expandButton" runat="server" OnClientClick="return false;" CssClass="sfOptionalExpander"></asp:LinkButton>
                <asp:Panel ID="expandableTarget" runat="server" CssClass="sfFieldWrp">
                               <asp:TextBox id="datePicker" runat="server" CausesValidation="false" AutoPostBack="false" CssClass="sfTxt" />
                    <sf:SitefinityLabel id="descriptionLabel" runat="server" WrapperTagName="div" HideIfNoText="true" CssClass="sfDescription" />
                    <sf:SitefinityLabel id="exampleLabel" runat="server" WrapperTagName="div" HideIfNoText="true" CssClass="sfExample" />
                </asp:Panel>
            </sf:ConditionalTemplate>
        </Templates>
    </sf:ConditionalTemplateContainer>
    <script type="text/javascript">
        Sys.Application.add_init(overrideDateFieldInitialization)
        function overrideDateFieldInitialization(sender, args)
            Telerik.Sitefinity.Web.UI.Fields.DateField.prototype.initialize = function ()
                Telerik.Sitefinity.Web.UI.Fields.DateField.callBaseMethod(this, "initialize");
                if (this.get_displayMode() == Telerik.Sitefinity.Web.UI.Fields.FieldDisplayMode.Write)
                    this._onLoadDelegate = Function.createDelegate(this, this.on_load);
                    Sys.Application.add_load(this._onLoadDelegate);
     
                    var popupOpeningDelegate;
                    if (this._datePickerOnPopupOpeningDelegate == null)
                        this._datePickerOnPopupOpeningDelegate = Function.createDelegate(this, this._datePickerOnPopupOpeningHandler);
                        popupOpeningDelegate = this._datePickerOnPopupOpeningDelegate;
                    
     
                    var popupClosedDelegate;
                    if (this._datePickerOnPopupClosingDelegate == null)
                        this._datePickerOnPopupClosingDelegate = Function.createDelegate(this, this._datePickerOnPopupClosingHandler);
                        popupClosedDelegate = this._datePickerOnPopupClosingDelegate;
                    
     
                    this._datePicker = jQuery("#" + this._datePickerId).datetimepicker(
                        dateFormat: "mm/dd/yy",
                        timeFormat: "hh:mm:ss",
                        hourGrid: 4,
                        minuteGrid: 10,
                        beforeShow: popupOpeningDelegate,
                        onClose: popupClosedDelegate,
                        showOn: "focus",
                        ampm: true
                    );
                
            ;
        
    </script>
    2. Go to Sitefinity backend, -> Administration->Settings->Advanced->Controls->ViewMap and click on the create new button. Fill in the fields as follows(all without the quotes):
    HostType: "Telerik.Sitefinity.Web.UI.Fields.DateField"
    LayoutTemplatePath: "relative path to the control you created in step 1."
    3. Click on Save changes. Restart the application.
    Now the datetime picker should appear as in the attached screenshot. Please note that you're overriding globally throughout the site our implementation of jGueryUI when mapping this template, so you should have it in mind, in case we do introduce some changes in this area. We'll be working on extending this functionality, so that you can configure the time format for the datetime picker from the backend settings.
    I hope you find this information useful. If you need any further assistance, please do not hesitate to write back.

    Regards,
    Boyan Barnev
    the Telerik team
    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
  • Hi,

    is it possible to use the same trick for not showing the time part? We have added a custom field "birthday" to the "basic profile" and we only want to select a date and not a time. Or is there another way to achieve this, for example just a textfield (not a datetimepicker) for a "date and time" field with a required format "dd-mm-yyyy" and use this one in the "profile" widget?

    Thanks in advance.

    Regards,
    Peter
  • Nearly one year later and no improvents here ?

    the date and time format must be automatically oriented based on users culture.
    Then the user must need a chance to set it individual inside the users profile.

    That is a n normal process in other Products
  • Can you change this in the back-end yet?
  • I'm also jumping on this question.   My users would prefer non-24 hour format for time-picker in backend.

     And also, I'm with Peter on wondering if there is a way (or might there be one in the future) to add events which do not have a time, only date.  For example, for Event Start, you check a box that says "this event doesn't have a specific time" and then you only get to choose a DATE.  Consequently, on the public event display page, it would not show time at all, as well.  This feature has been requested by my users a few times.

  • Hello everyone,

    Thank you for jumping with constructive feedback on the Events module - we'll be introducing a complete refactoring of the module for our 6.0 release. The development plans have already been set in motion, however if we have the capacity we'll try to address the requested features for that release as well.

    Greetings,
    Boyan Barnev
    the Telerik team
    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
  • Hey Boyan I followed your instructions and am pretty sure that it was all working fine until we upgraded to 5.4 yesterday. I am still able to select start & end times based on a 12-hour format but when I actually publish the hour changes, for example, the selection of 1PM goes to 1AM or 4PM goes to 4AM.  (see the attached images). Any ideas on how to fix this?

  • Hi Richard

    I encountered the same problem today in Sitefinity 5.4, I couldn't find an anwer on the forum.
    I found the answer myself, which is to change the time format to 24 hours.
    this._datePicker = jQuery("#" + this._datePickerId).datetimepicker(
        dateFormat: "dd/mm/yy",
        timeFormat: "HH:mm:ss", // "HH:mm:ss" for 24 hours or "hh:mm:ss" for 12 hours
        hourGrid: 4,
        minuteGrid: 10,
        beforeShow: popupOpeningDelegate,
        onClose: popupClosedDelegate,
        showOn: "focus",
        ampm: true
    );

    For more information, see the script's website:
    http://trentrichardson.com/examples/timepicker/#tp-formatting
  • Same problem here with Sitefinity 6.1.4300.

    After implementing a custom view template by using the widget template provided with the Sitefinity 6.1 SDK, then mapping it using control view maps in administration advanced settings, we're now getting a javascript error when trying to update existing events:

    TypeError: startDate is null

    Any direction from the engineers would be welcome since our clients in the USA have marketing staff that have a tough time using 24 hour formats to enter events.
  • Hi Boyan,

    It seems that the solution you have suggested to Sean Rios (which we also used) is not working for 6.1. Could it be due to the introduction of Repeat Event or All day options?

    I am getting a "TypeError: startDate is null". It works perfectly in previous versions.

    Hope to hear from you soon.

    Regards,
    Antonio
  • Somewhat related, the event calendar introduced in 6.0 only displays on 24 hour format. I've been informed by support there is no way around this.
  • d003cbd5-63de-4426-a868-c2bdaa4feda5_DateFieldSample.rar
    Hi guys,

    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:

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

    And the script itself:

    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())
                case Telerik.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: dFormat,
                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 : "");
        ,
       
       

    Please find the attached archive and export it. Place the DateFieldSample folder into the root of your project. 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.

    Go to Administration->Settings->Advanced -> ContentView->Controls->EventsBackend->Views and replace the built in DateField with the custom one like so:

    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 which is the CLR type of the example above).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

    Restart the application and test.

    I hope this helps.

    Regards,
    Pavel Benov
    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
  • Thanks for that Pavel.

    But before I give this a try, are these corrections valid?
    1) The hourGrid value should be an integer (e.g. 4, 8, etc) and not tFormat
    2) tFormat value setting can be moved to set_datePickerFormat just like dFormat and set it to timeFormat in _setDateTimeMode