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?
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
>
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
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
);
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
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.
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.
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 :
""
);
,
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
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,Hello,
Do you have the archive you mention? I can't seem to find it in your post. Thank you!
Hi Alain,
I have attached the sample archive to this reply.
Regards,
Pavel Benov
Telerik
hi,
how to change calender event popup DateTime format to 12 hours ?please replay as soon as possible
hi,
how to change calender event popup DateTime format to 12 hours ?please replay as soon as possible
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
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?
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