Использование moment.js для форматирования дат представления в ASP.NET MVC

Я использую Razor в качестве механизма просмотра в ASP.NET MVC 5. У меня есть даты, возвращаемые с внутренней службы, которые находятся в UTC. Я хочу отформатировать их с помощью JavaScript (например, moment.js) в клиенте. Я не хочу делать это на сервере, потому что я не хочу беспокоиться о том, в какой часовом поясе клиент находится на стороне сервера (в конце концов, сервер действительно не заботится).

Я думаю, из форматирования даты в формате Java с помощью MVC, AJAX и Moment.js, что есть какой-то способ сделать это на стороне сервера, если мне нужно, хотя этого недостаточно информация для меня, чтобы это получилось, и это не то, что я хочу сделать в любом случае.

Что-то вроде сопоставление ASP.NET MVC ViewModel с пользовательским форматированием или Где лучшее место для форматирования свойств модели в ASP.NET MVC (3)? или Как отформатировать дату в asp.net mvc 5 не работает, потому что эта сторона сервера (или делает это в некоторых путь я не понимаю?)

Какой "лучший" / "правильный" способ сделать это чисто и надежно?

EDIT: Чтобы быть ясным, я знаю все о стороне moment.js. Я бы не назвал это, если бы не сделал этого. То, о чем я спрашиваю, это интеграция с представлением ASP.NET MVC - как мне это сделать "правильно"?

ИЗМЕНИТЬ 2: Я знаю, как сделать script. Я не знаю, есть ли у меня этот вывод из переменной script, как я могу получить содержимое этой переменной в информации, отображаемой пользователю в представлении? Я не хочу делать что-то вроде редактирования содержимого элемента 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>
}

Комментарии - это то, что я не знаю, как это сделать прямо сейчас чисто.

Ответы

Ответ 1

Вы можете попробовать это (JS с бритвой):

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

Из momentjs doc:

При создании момента из строки мы сначала проверяем, является ли строка соответствует известным форматам ISO 8601

(Источник)

От .NET doc:

Спецификатор стандартного формата "s" отражает определенный стандарт (ISO 8601)

(Источник)

Изменить

Решение для объединения 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/

Ответ 2

Если у вас есть представления, отображающие некоторые даты или временные метки в Razor, а некоторые в Javascript, вот функция Javascript, которая переведет строку формата .NET, например {0:MM/dd/yyyy}, в moment.js(фактически moment-timezone.js) строка формата:

// 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), чтобы установить его перед форматированием.