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

Forums / General Discussions / Event Time Picker - 12 hour format

Event Time Picker - 12 hour format

22 posts, 0 answered
  1. Sean Rios
    Sean Rios avatar
    1 posts
    Registered:
    07 Jul 2009
    26 Apr 2011
    Link to this post
    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?
  2. Boyan Barnev
    Boyan Barnev avatar
    1429 posts
    Registered:
    06 Dec 2016
    02 May 2011
    Link to this post
    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
  3. Peter
    Peter avatar
    42 posts
    Registered:
    22 Aug 2011
    01 Feb 2012
    Link to this post
    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
  4. TMatt
    TMatt avatar
    104 posts
    Registered:
    06 Feb 2011
    18 Mar 2012
    Link to this post
    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
  5. Richard
    Richard avatar
    64 posts
    Registered:
    09 Oct 2012
    26 Dec 2012
    Link to this post
    Can you change this in the back-end yet?
  6. Marko
    Marko avatar
    148 posts
    Registered:
    30 Jul 2008
    19 Feb 2013
    Link to this post

    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.

  7. Boyan Barnev
    Boyan Barnev avatar
    1429 posts
    Registered:
    06 Dec 2016
    22 Feb 2013
    Link to this post
    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
  8. Richard
    Richard avatar
    64 posts
    Registered:
    09 Oct 2012
    14 Mar 2013 in reply to Boyan Barnev
    Link to this post
    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?
  9. Vivid Group
    Vivid Group avatar
    8 posts
    Registered:
    01 Dec 2009
    20 Jun 2013 in reply to Richard
    Link to this post
    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
  10. Antonio
    Antonio avatar
    6 posts
    Registered:
    15 Jun 2012
    09 Aug 2013 in reply to Boyan Barnev
    Link to this post
    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
  11. Chris Aybar
    Chris Aybar avatar
    25 posts
    Registered:
    20 Oct 2008
    09 Aug 2013 in reply to Antonio
    Link to this post
    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.
  12. Mark
    Mark avatar
    147 posts
    Registered:
    01 Jun 2010
    09 Aug 2013
    Link to this post
    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.
  13. Pavel Benov
    Pavel Benov avatar
    341 posts
    Registered:
    14 Mar 2016
    14 Aug 2013
    Link to this post
    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
  14. Antonio
    Antonio avatar
    6 posts
    Registered:
    15 Jun 2012
    15 Aug 2013 in reply to Pavel Benov
    Link to this post
    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


  15. Patrick Dunn
    Patrick Dunn avatar
    237 posts
    Registered:
    03 Nov 2014
    19 Aug 2013
    Link to this post
    Hello Sean,

     You can modify the date time format to whatever fits your needs as long as it is a valid date time format.

    Regards,
    Patrick Dunn
    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
  16. Alain
    Alain avatar
    3 posts
    Registered:
    13 Aug 2013
    27 Nov 2013 in reply to Pavel Benov
    Link to this post
    Hello,
    Do you have the archive you mention? I can't seem to find it in your post. Thank you!
  17. Pavel Benov
    Pavel Benov avatar
    341 posts
    Registered:
    14 Mar 2016
    02 Dec 2013
    Link to this post
    Hi Alain,

    I have attached the sample archive to this reply.

    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
  18. Vakeel
    Vakeel avatar
    19 posts
    Registered:
    13 May 2014
    17 Dec 2014 in reply to Pavel Benov
    Link to this post

    hi,

    how to change calender event popup DateTime format to 12 hours ?please replay as soon as possible

  19. Vakeel
    Vakeel avatar
    19 posts
    Registered:
    13 May 2014
    17 Dec 2014 in reply to Pavel Benov
    Link to this post

    hi,

    how to change calender event popup DateTime format to 12 hours ?please replay as soon as possible

  20. Pavel Benov
    Pavel Benov avatar
    341 posts
    Registered:
    14 Mar 2016
    19 Dec 2014
    Link to this post
    Hello Vakeel,

    Currently extending this dialog is not possible. We have a feature request logged in our Feedback portal:

    http://feedback.telerik.com/Project/153/Feedback/Details/99016-ability-to-specify-date-time-format-for-vieweventdialog

    Please cast your vote up to increase its popularity.

    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 Sitefinity CMS Ideas&Feedback Portal and vote to affect the priority of the items
     
  21. Richard
    Richard avatar
    64 posts
    Registered:
    09 Oct 2012
    22 Oct 2015 in reply to Pavel Benov
    Link to this post
    We would love 12 hour time to work and to not have to keep tinkering with controls that stop working when we update. Is this going to happen any time soon? We just converted our entire site to Sitefinity and now like 100,000 people are hitting a site that doesn't show the time in a format that they understand. Is this in the works for any future update? 
  22. Shilpa
    Shilpa avatar
    0 posts
    Registered:
    01 Dec 2015
    07 Oct in reply to Pavel Benov
    Link to this post
    The code for me only works when the Recurring Event is set to "none: . If any of the recurring dropdowns are selected . The time format switched to 24 hour format 
22 posts, 0 answered