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
Performance optimization – the hardcore series – part 2

Earlier we started a new series about performance optimization, here Performance optimization – the hardcore series – part 1 – Quan Mai’s blog...

Quan Mai | Oct 4, 2023 | Syndicated blog

Our first steps into local AI

After a consumer of tools like ChatGPT and CoPilot, we as developers like to dive deeper into it. How does it work? Where to start? Can I create my...

Chuhukon | Oct 4, 2023 | Syndicated blog

Update on .NET 8 support

With .NET 8 now in release candidate stage I want to share an update about our current thinking about .NET 8 support in Optimizely CMS and Customiz...

Magnus Rahl | Oct 3, 2023

Adding Block Specific JavaScript and CSS to the body and head of the page

A common requirement for CMS implementations includes the ability to embed third party content into a website as if it formed part of the website...

Mark Stott | Oct 3, 2023