修改

Question

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

我想从Locale Date formatting with MVC, AJAX and Moment.js开始，如果必须的话，可以通过某种方式来实现服务器端，尽管我没有足够的信息来解决问题，而且＃＆＃＆＃ 39;不是我想做的事。

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

＆＃34;最好的＆＃34; /＆＃34;对＆＃34;如何干净可靠地做到这一点？

编辑：要清楚，我知道moment.js方的所有内容。如果我没有，我就不会给它命名。我要问的是ASP.NET MVC视图集成 - 我如何完成＃34;右键＆＃34;方式是什么？

编辑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

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

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

来自momentjs doc：

从字符串创建片刻时，我们首先检查字符串匹配已知的ISO 8601格式

（Source）

来自.NET doc：

＆＃34; s＆＃34;标准格式说明符反映了定义的标准（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 2

如果您有在Razor中显示某些日期或时间戳的视图以及Javascript中的某些日期或时间戳，则此处是一个Javascript函数，它将.NET格式字符串（如{0:MM/dd/yyyy}）转换为moment.js（实际上{{3}格式字符串：

// Convert a single .NET date format to use with moment.js.
DotNetToMomentFormat = function (s0) {
    s0 = s0.replace(/\{\d+:(.*)\}/, "$1"); // remove placeholder
    var m = s0.match(/((.)\2*)/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>

截至本文，相关输出将是：

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

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

Answer 3

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

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

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

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

3 个答案:

修改