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
Optimizely SendGrid SMTP host is deprecated

SendGrid is a services for sending email that is included in Optimizely DXP. Previously was the recommended SMTP server to use,...

Tomas Hensrud Gulla | Dec 4, 2022 | Syndicated blog

Hosting Optimizely CMS 12 on Docker Engine

Since Optimizely CMS can now be deployed as a Docker container, here is a demonstration of building, running and scaling an Optimizely CMS 12 site ...

Stefan Holm Olsen | Dec 4, 2022 | Syndicated blog

How to use CacheTagHelper with content areas in Optimizely CMS 12

I might be going out on a limb here - if you have a better solution, feel very free to share it!  Upgrading your Optimizely web application from .N...

Andreas J | Dec 2, 2022

The 1001st Piece in your 1000 Piece Puzzle: .NET Default Interface Functions

I was recently working with a client who wanted a reasonably large subsystem added to Optimizely that would add automated management to their...

Greg J | Nov 28, 2022 | Syndicated blog