Computer Magic Logo
Date Picker with time

Sunday, June 7, 2015

Published by Aristotelis Pitaridis

Date Picker with time is an input control that allows the administrator to enter a date and time. Below we can see an example of creating a property of type Date Picker with time:

The My Date Picker With Time property has the following appearance when we edit the document:

If you click on the calendar icon on the right side of the text box a panel which contains a calendar will appear on the screen where we can select a date.

At the bottom of the calendar there is a clock icon. If we click on this icon a time selector will appear on the screen so that we will be able to define the time.

In order to change the time we use the up and down arrows located above and below each number which define the time. At any moment we can again display the calendar by pressing the calendar icon located at the top of the panel. 

In order to read the value as a strongly typed object we use the following code:

@{
    if (Model.Content.HasValue("myDatePickerWithTime"))
    {
        <p>@(Model.Content.GetPropertyValue<DateTime>("myDatePickerWithTime"))</p>
    }
}

In order to read the value using dynamic properties we use the following code:

@{
    if (CurrentPage.HasValue("myDatePickerWithTime"))
    {
        <p>@CurrentPage.myDatePickerWithTime</p>
    }
}