Try our conversational search powered by Generative AI!

Grzegorz Wiecheć
Sep 4, 2019
(12 votes)

Time property

Recently we implemented a new open source add-on advanced-cms/time-property. The package contains model type, editing widget and property renderer used to store and display time between 0-24 hours. Property defined in the model is a Timespan type, so there should be no issues with time zones when saving value. It's using dijit/form/TimeTextBox as an editor in edit view.

Getting started

First install Advanced.CMS.TimeProperty package from Episerver's NuGet feed.

PM> Install-Package Advanced.CMS.TimeProperty

Then add a new TimeSpan property to your content model. The property needs to be annotated with BackingType attribute.

[ContentType(GUID = "AREDS8A41-5C8C-G3PJ-8F74-320ZF3DE8227")]
public class TestPage : PageData
    public virtual TimeSpan? Time1 { get; set; }

Edit view configuration

By default, the editor will be displayed using 12-hour clock time format. To change this you can use TimePropertySettings attribute added on the model. For example, to get 24-hour clock format:

[ContentType(GUID = "AREDS8A41-5C8C-G3PJ-8F74-320ZF3DE8227")]
public class TestPage : PageData
    [TimePropertySettings(TimePattern = "HH:mm")]
    public virtual TimeSpan? Time1 { get; set; }

Then it will be rendered as:

View mode property renderer

The NuGet package also contains a renderer for the view mode. You need to use PropertyFor and TimeSpan tag:

@Html.PropertyFor(x => x.CurrentPage.Time1, new { Tag = "TimeSpan" })

To render time with custom format use DateFormat property:

@Html.PropertyFor(x => x.CurrentPage.Time1, new { DateFormat = "hh:mm tt", Tag = "TimeSpan" })

Sep 04, 2019


Abhinay Oct 14, 2019 01:53 PM

Hi Grzegorz, I installed this plugin but I am only able to see 12 hour time format - please see below.

Is there any particular way so that I can see 24 hour time format too for "TimeSpan" EPiserver properties?


nitin anand
nitin anand May 15, 2020 02:43 PM

Hi @Abhinay

you need to decorate your property with

[TimePropertySettings(TimePattern = "HH:mm")]

and rebuild project to see 24 hrs format.

Bartosz Sekula
Bartosz Sekula Dec 2, 2021 07:28 PM

The addon is now available for net5

Josh Salwen
Josh Salwen Mar 18, 2022 11:51 PM

This is great. One note, if you add this to a generic list property, then add the ClientEditor reference

public class HoursRange
    #region OpenTime
    [Display(Name = "Opening Time")]
    [ClientEditor(ClientEditingClass = "advanced-cms-time-property/TimeEditor")]
    public virtual TimeSpan? OpenTime { get; set; }

    #region CloseTime
    [Display(Name = "Closing Time")]
    [ClientEditor(ClientEditingClass = "advanced-cms-time-property/TimeEditor")]
    public virtual TimeSpan? CloseTime { get; set; }
public class HoursRangeCollectionEditorDescriptor : CollectionEditorDescriptor<HoursRange>
{ }

Please login to comment.
Latest blogs
From Procrastination to Proficiency: Navigating Your Journey to Web Experimentation Certification

Hey there, Optimizely enthusiasts!   Join me in celebrating a milestone – I'm officially a certified web experimentation expert! It's an exhilarati...

Silvio Pacitto | May 17, 2024

GPT-4o Now Available for Optimizely via the AI-Assistant plugin!

I am excited to announce that GPT-4o is now available for Optimizely users through the Epicweb AI-Assistant integration. This means you can leverag...

Luc Gosso (MVP) | May 17, 2024 | Syndicated blog

The downside of being too fast

Today when I was tracking down some changes, I came across this commit comment Who wrote this? Me, almost 5 years ago. I did have a chuckle in my...

Quan Mai | May 17, 2024 | Syndicated blog

Optimizely Forms: Safeguarding Your Data

With the rise of cyber threats and privacy concerns, safeguarding sensitive information has become a top priority for businesses across all...

K Khan | May 16, 2024