Event Time Picker - 12 hour format

Posted by Community Admin on 03-Aug-2018 21:33

Event Time Picker - 12 hour format

All Replies

Posted by Community Admin on 26-Apr-2011 00:00

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?

Posted by Community Admin on 02-May-2011 00:00

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

Posted by Community Admin on 01-Feb-2012 00:00

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

Posted by Community Admin on 18-Mar-2012 00:00

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

Posted by Community Admin on 26-Dec-2012 00:00

Can you change this in the back-end yet?

Posted by Community Admin on 19-Feb-2013 00:00

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.

Posted by Community Admin on 22-Feb-2013 00:00

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

Posted by Community Admin on 14-Mar-2013 00:00

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?

Posted by Community Admin on 20-Jun-2013 00:00

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

Posted by Community Admin on 09-Aug-2013 00:00

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

Posted by Community Admin on 09-Aug-2013 00:00

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.

Posted by Community Admin on 09-Aug-2013 00:00

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.

Posted by Community Admin on 14-Aug-2013 00:00

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

Posted by Community Admin on 15-Aug-2013 00:00

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


Posted by Community Admin on 19-Aug-2013 00:00

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

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

Hello,
Do you have the archive you mention? I can't seem to find it in your post. Thank you!

Posted by Community Admin on 02-Dec-2013 00:00

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

Posted by Community Admin on 17-Dec-2014 00:00

hi,

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

Posted by Community Admin on 17-Dec-2014 00:00

hi,

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

Posted by Community Admin on 19-Dec-2014 00:00

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
 

Posted by Community Admin on 22-Oct-2015 00:00

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? 

Posted by Community Admin on 07-Oct-2016 00:00

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 

This thread is closed