Użycie pliku moment.js do formatowania dat widoku modeli w środowisku ASP.NET MVC

Question

Używam narzędzia Razor jako mechanizmu wyświetlania w środowisku ASP.NET MVC 5. Mam daty wracające z usługi zaplecza w UTC. Chcę sformatować te przy użyciu JavaScript (na przykład moment.js) na kliencie . Nie chcę tego robić na serwerze, ponieważ nie chcę martwić się o strefę czasową, w której znajduje się klient po stronie serwera (w końcu serwer tak naprawdę nie obchodzi).

Myślę, że od Locale Date formatting with MVC, AJAX and Moment.js jest jakiś sposób, aby zrobić to po stronie serwera, jeśli muszę, chociaż nie ma wystarczającej ilości informacji, aby je opracować, i to nie jest to, co chcę zrobić w każdym razie.

Coś ASP.NET MVC ViewModel mapping with custom formatting lub Where is the best place to format Model properties in ASP.NET MVC(3)? lub How to format date in asp.net mvc 5 nie działa, ponieważ to po stronie serwera (lub robi to w pewnym sensie nie rozumiem?)

Co to jest „najlepsze”/„prawo” sposób to zrobić czyściutko i niezawodnie?

EDYCJA: Aby było jasne, wiem wszystko na temat strony moment.js. Nie nazwałbym tego, gdybym tego nie zrobił. Pytam o integrację widoku ASP.NET MVC - jak mogę to zrobić "w odpowiedni sposób"?

EDYCJA 2: Wiem, jak zrobić scenariusz. Nie wiem, czy mam dane wyjściowe ze zmiennej skryptowej, w jaki sposób mogę uzyskać zawartość tej zmiennej w informacji wyświetlanej użytkownikowi w widoku? Nie chcę robić czegoś w stylu edytowania zawartości elementu HTML lub czegoś, jeśli mogę pomóc; to wcale nie jest czyste. Być może powinienem uczynić to znacznie prostszym, aby to bardzo wyraźnie:

Wyobraź sobie widok w Razor. Ten widok mówi:

@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> 
} 

Komentarze są tym, czego nie wiem jak teraz zrobić w czysty sposób.

Answer 1

Można spróbować to (JS z brzytwą):

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

Od momentjs doc:

Tworząc chwilę z łańcucha, musimy najpierw sprawdzić, czy ciąg mecze znany Formaty ISO 8601

(Source)

Od .NET Doc:

"S" Format standardowy specifier odzwierciedla określoną normę (ISO 8601)

(Source)

Edit

Solu nia połączyć momentjs z Razor aby wyświetlić tablicę 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> 

Jeśli chcesz wyświetlić Twoja data w innym formacie: http://momentjs.com/docs/#/displaying/format/

Answer 2

Musisz użyć funkcji strefy czasowej. http://momentjs.com/timezone/docs/#/using-timezones/converting-to-zone/

Nie zapomnij odwoływać się do pliku danych strefy czasowej.

Łącze How to turn Razor Model into JS object in a Razor For Loop? wyjaśnia, jak to się robi.

Answer 3

Jeśli masz widoki, które wyświetlają kilka dat ani znaczników czasu w brzytwa i niektóre w JavaScript, tutaj jest funkcją JavaScript że przełoży ciąg formatu NET jak {0:MM/dd/yyyy} w moment.js (właściwie moment-timezone.js) format string:

// 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; 
} 

Następnie, Razor, niektóre przykładowy kod byłoby:

@{ 
    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> 

Jak z tego postu, odpowiednie wyjście będzie:

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

Inną potrzebną informacją jest lokalna strefa czasowa użytkownika i użycie tz(timezonename) strefy czasowej, aby ustawić ją przed formatowaniem.