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
Content Delivery API – The Case of the Duplicate API Refresh Token

Creating a custom refresh provider to resolve the issues with duplicate tokens in the DXC The post Content Delivery API – The Case of the Duplicate...

David Lewis | Sep 29, 2022 | Syndicated blog

New Optimizely certifications - register for beta testing before November 1st

In January 2023, Optimizely is making updates to the current versions of our certification exams to make sure that each exam covers the necessary...

Jamilia Buzurukova | Sep 28, 2022

Optimizely community meetup - Sept 29 (virtual + Melbourne)

Super excited to be presenting this Thursday the 29th of September at the Optimizely community meetup. For the full details and RSVP's see the...

Ynze | Sep 27, 2022 | Syndicated blog

Preview multiple Visitor Groups directly while browsing your Optimizely site

Visitor groups are great - it's an easy way to add personalization towards market segments to your site. But it does come with it's own set of...

Allan Thraen | Sep 26, 2022 | Syndicated blog