This is about .NET CORE 5 version. If you are interested about .NET FRAMEWORK 4 please visit https://github.com/advanced-cms/time-property/blob/net4_master/README.md

time-property

Episerver property used to store time between 0-24 hours

Property is stored in the model as a Timespan type. It's using dijit/form/TimeTextBox as an editor in Edit Mode.

Getting Started

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

PM> Install-Package Advanced.CMS.TimeProperty

Then add 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
{
    [BackingType(typeof(Advanced.CMS.TimeProperty.TimeProperty))]
    public virtual TimeSpan? Time1 { get; set; }
}

Edit mode 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
{
    [BackingType(typeof(Advanced.CMS.TimeProperty.TimeProperty))]
    [TimePropertySettings(TimePattern = "HH:mm")]
    public virtual TimeSpan? Time1 { get; set; }
}

Then it will be rendered as:

View mode property renderer

Nuget contains 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" })

IList usage

When used in a model that is used in an IList you will need to add the following to the property, if the picker is not picked up

[ClientEditor(ClientEditingClass = "advanced-cms-time-property/TimeEditor")]

So it would become

[BackingType(typeof(Advanced.CMS.TimeProperty.TimeProperty))]
[TimePropertySettings(TimePattern = "HH:mm")]
[ClientEditor(ClientEditingClass = "advanced-cms-time-property/TimeEditor")]
public virtual TimeSpan? Time1 { get; set; }