使用 moment.js 格式化 ASP.NET MVC 中的视图模型日期

Question

我在 ASP.NET MVC 5 中使用 Razor 作为视图引擎。我有从 UTC 格式的后端服务返回的日期。我想在 客户端 上使用 JavaScript（例如 moment.js）格式化那些。我不想在服务器上做，因为我不想在服务器端担心客户端在什么时区（毕竟服务器并不关心）。

我认为 Locale Date formatting with MVC, AJAX and Moment.js 如果我必须的话，有一些方法可以在服务器端执行此操作，尽管我没有足够的信息来解决它，而且这不是我想做的.

ASP.NET MVC ViewModel mapping with custom formatting or Where is the best place to format Model properties in ASP.NET MVC(3)? or How to format date in asp.net mvc 5 之类的东西不起作用，因为那是服务器端（或者以某种我不明白的方式起作用？）

什么是 "best" / "right" 干净可靠地执行此操作的方法？

编辑：明确地说，我了解 moment.js 方面的一切。如果我不这样做，我就不会命名它。我要问的是 ASP.NET MVC 视图集成 - 如何以 "right" 方式完成？

编辑 2：我知道如何编写脚本。我不知道的是，如果我有来自脚本变量的输出，我如何将该变量的内容放入视图中显示给用户的信息中？如果可以的话，我不想做编辑 HTML 元素内容之类的事情；那根本不干净。也许我应该让这更简单，使它非常非常清楚：

想象一下 Razor 中的视图。该视图表示：

@foreach (var item in Model) {
    <!-- something to do javascript manipulation of item -->
    <p>The result of manipulating @item.startDate is <!-- WHAT DO I DO HERE? --></p>
}

评论是我现在不知道怎么干的干干净净的。

Answer 1

您需要使用时刻时区功能。 http://momentjs.com/timezone/docs/#/using-timezones/converting-to-zone/

不要忘记引用时区数据文件。

link How to turn Razor Model into JS object in a Razor For Loop? 解释了它是如何完成的。

Answer 2

你可以试试这个（带剃须刀的 JS）：

var date = moment('@YourDateTime.ToString( "s", System.Globalization.CultureInfo.InvariantCulture )');

来自 momentjs 文档：

When creating a moment from a string, we first check if the string matches known ISO 8601 formats

(Source)

来自 .NET 文档：

The "s" standard format specifier reflects a defined standard (ISO 8601)

(Source)

编辑

将momentjs与Razor结合起来显示DateTime

的数组的解决方法

HTML/Razor :

@foreach (var item in Model) {
   <p data-utcdate="@item.startDate.ToString("s", System.Globalization.CultureInfo.InvariantCulture)"></p>
}

JS（JQuery）：

<script type="text/javascript">
    $(function () {
        $('[data-utcdate]').each(function () {
            var d = moment($(this).attr('data-utcdate'));
            $(this).html(d.format());
        });
    });
</script>

如果您想以不同的格式显示您的日期：http://momentjs.com/docs/#/displaying/format/

Answer 3

如果您的视图在 Razor 中显示一些日期或时间戳，在 Javascript 中显示一些日期或时间戳，这里有一个 Javascript 函数可以将 {0:MM/dd/yyyy} 之类的 .NET 格式字符串转换为一个moment.js（实际上是moment-timezone.js）格式字符串：

// Convert a single .NET date format to use with moment.js.
DotNetToMomentFormat = function (s0) {
    s0 = s0.replace(/\{\d+:(.*)\}/, ""); // remove placeholder
    var m = s0.match(/((.)*)/g);
    var s1 = m.reduce(function (a,s) {
            switch (s) {
                case "d": s = "MM/DD/YYYY"; break;
                case "dd": s = "DD"; break;
                case "ddd": s = "ddd"; break;
                case "dddd": s = "dddd"; break;
                case "D": s = "DD MMMM YYYY"; break;
                case "f": s = "DD MMMM YYYY HH:mm"; break;
                case "fff": s = "SSS"; break;
                case "F": s = "DD MMMM YYYY HH:mm:ss"; break;
                case "FFF": s = "SSS"; break; // no trailing 0s
                case "g": s = "DD/MM/YYYY HH:mm"; break;
                case "G": s = "DD/MM/YYYY HH:mm:ss"; break;
                case "hh": s = "hh"; break;
                case "HH": s = "HH"; break;
                case "m": s = "MMMM DD"; break;
                case "mm": s = "mm"; break;
                case "M": s = "MMMM DD"; break;
                case "MM": s = "MM"; break;
                case "MMM": s = "MMM"; break;
                case "MMMM": s = "MMMM"; break;
                case "o": s = "YYYY-MM-DD HH:mm:ssZ"; break;
                case "O": s = "YYYY-MM-DD HH:mm:ssZ"; break;
                case "r": s = "ddd, DD MMM YYYY, H:mm:ss z"; break;
                case "R": s = "ddd, DD MMM YYYY, H:mm:ss z"; break;
                case "s": s = "YYYY-MM-DDTHH:mm:ss"; break;
                case "ss": s = "ss"; break;
                case "t": s = "HH:mm"; break;
                case "tt": s = "A"; break;
                case "T": s = "HH:mm:ss"; break;
                case "u": s = "YYYY-MM-DD HH:mm:ssZ"; break;
                case "y": s = "MMMM, YYYY"; break;
                case "yy": s = "YY"; break;
                case "yyyy": s = "YYYY"; break;
                case "Y": s = "MMMM, YYYY"; break;
            }
            return a + s;
        },
        "");
    return s1;
}

然后，在 Razor 中，一些示例代码将是：

@{
    var today = DateTime.Today;
    string dateFormat = "{0:MM/dd/yyyy}";
}
<div>The MVC-formatted date is @(string.Format(dateFormat, today)).</div>
<div>The moment-formatted date is <span id="today"></span>.</div>

<script type="text/javascript">
    var x = window.document.getElementById("today");
    var y = moment("@today.ToString("O")");
    x.innerHTML = y.format(DotNetToMomentFormat("@dateFormat"));
</script>

至此 post，相关输出为：

The MVC-formatted date is 02/03/2017.
The moment-formatted date is 02/03/2017.

您需要的另一条信息是用户的本地时区，并在格式化前使用 moment-timezone 的 tz(timezonename) 进行设置。

使用 moment.js 格式化 ASP.NET MVC 中的视图模型日期

Using moment.js to format viewmodel dates in ASP.NET MVC

asp.net-mvc

razor

编辑