Date and Time

« Enum Footer »

Introduction

By default, SimpleGrid will output System.DateTime Expressions as an HTML tag of the form: 

<time>2021-05-15T20:33:27Z</time>
This is done either when calling For() or DisplayExpression() (which is called by For) or by calling ClientTime(). Then you can use the JavaScript provided below to convert the <time> tag to the user's local time.

To simply display the DateTime field as-is use DisplayAs().

Output

Date Description For DisplayAs ClientTime ClientTime Encoded
DateTime.Now 04/04/2025 01:16:47 <time>2025-04-04T01:16:47Z</time>
DateTime.UtcNow 04/04/2025 01:16:47 <time>2025-04-04T01:16:47Z</time>
Midnight April 1, 2021 UTC 04/01/2021 00:00:00 <time>2021-04-01T00:00:00Z</time>
Noon April 1, 2021 UTC 04/01/2021 12:00:00 <time>2021-04-01T12:00:00Z</time>

Model

var Model = new List<SampleModel>
{
    new SampleModel 
    { 
        RandomDate = DateTime.Now, 
        First = "DateTime.Now", 
    },
    new SampleModel 
    { 
        RandomDate = DateTime.UtcNow, 
        First = "DateTime.UtcNow", 
    },
    new SampleModel 
    { 
        RandomDate = new DateTime(2021, 4, 1, 0, 0, 0), 
        First = "Midnight April 1, 2021 UTC", 
    },
    new SampleModel 
    { 
        RandomDate = new DateTime(2021, 4, 1, 12, 0, 0), 
        First = "Noon April 1, 2021 UTC", 
    },
};

Grid

@(await Html

    .SimpleGrid(Model)

    .AddColumn(col => col
        .For(sample => sample.First)
        .Header("Date Description"))

    .AddColumn(col => col
        .For(sample => sample.RandomDate)
        .Header("For"))

    .AddColumn(col => col
        .DisplayAs(sample => sample.RandomDate)
        .Header("DisplayAs"))

    .AddColumn(col => col
        .ClientTime(sample => sample.RandomDate)
        .Header("ClientTime"))

    .AddColumn(col => col
        .ClientTime(sample => sample.RandomDate)
        .Encoded(true)
        .Header("ClientTime Encoded"))

    .RenderAsync())

JavaScript

$("time").each(function (elem) {
    var utctimeval = $(this).html();
    var date = new Date(utctimeval);
    $(this).html(date.toLocaleString());
});