javascript - @grid MVC 将日期转换为本地时区

Question

我有一个 MVC 网格，它显示存储在数据库中的事务。其中一列是日期，该日期以 UTC 格式存储，显示时我需要将其转换为浏览器时区。

@grid.GetHtml(        
        htmlAttributes: new { id = "transactionsGrid" },       
        columns:grid.Columns(
                grid.Column("TransactionDate", ((grid.SortColumn == "TransactionDate" ? (grid.SortDirection == SortDirection.Ascending ? "▲ " : "▼ ") : "") + "Date"), style: "TransactionDate")
        )

我怎样才能实现这个目标？我怎样才能用 javascript 做到这一点，因为它应该在客户端处理。

提前致谢。

已编辑

我知道怎么做了:

@grid.GetHtml(        
        htmlAttributes: new { id = "transactionsGrid" },       
        columns:grid.Columns(
        grid.Column("TransactionDate", ((grid.SortColumn == "TransactionDate" ? (grid.SortDirection == SortDirection.Ascending ? "▲ " : "▼ ") : "") + "Date"), style: "TransactionDate", format: (item) => new HtmlString("<div name='date' data-datetime='"+item.TransactionDate+"'>"+item.TransactionDate+"</div>"))

这是 JavaScript 代码:

function convertUTCDateToLocalDate(date) {
        var newDate = new Date(date.getTime() + date.getTimezoneOffset() * 60 * 1000);
        var offset = date.getTimezoneOffset() / 60;
        var hours = date.getHours();
        newDate.setHours(hours - offset);
        return newDate;
    }

    Date.prototype.format = function (format) {
        var o = {
            "M+": this.getMonth() + 1, //month
            "d+": this.getDate(),    //day
            "h+": this.getHours(),   //hour
            "m+": this.getMinutes(), //minute
            "s+": this.getSeconds(), //second
            "q+": Math.floor((this.getMonth() + 3) / 3),  //quarter
            "S": this.getMilliseconds() //millisecond
        }

        if (/(y+)/.test(format)) format = format.replace(RegExp.$1,
          (this.getFullYear() + "").substr(4 - RegExp.$1.length));
        for (var k in o) if (new RegExp("(" + k + ")").test(format))
            format = format.replace(RegExp.$1,
              RegExp.$1.length == 1 ? o[k] :
                ("00" + o[k]).substr(("" + o[k]).length));
        return format;
    }
    $("div[name=date]").each(function () {
        var myDate = new Date($(this).data("datetime"));
        var convertToLocalDate = convertUTCDateToLocalDate(myDate);
        $(this).text(convertToLocalDate.format("MM/dd/yyyy hh:mm:ss"));
    });

Answer 1

我知道怎么做了:

@grid.GetHtml(        
        htmlAttributes: new { id = "transactionsGrid" },       
        columns:grid.Columns(
        grid.Column("TransactionDate", ((grid.SortColumn == "TransactionDate" ? (grid.SortDirection == SortDirection.Ascending ? "▲ " : "▼ ") : "") + "Date"), style: "TransactionDate", format: (item) => new HtmlString("<div name='date' data-datetime='"+item.TransactionDate+"'>"+item.TransactionDate+"</div>"))

这是 JavaScript 代码:

function convertUTCDateToLocalDate(date) {
        var newDate = new Date(date.getTime() + date.getTimezoneOffset() * 60 * 1000);
        var offset = date.getTimezoneOffset() / 60;
        var hours = date.getHours();
        newDate.setHours(hours - offset);
        return newDate;
    }

    Date.prototype.format = function (format) {
        var o = {
            "M+": this.getMonth() + 1, //month
            "d+": this.getDate(),    //day
            "h+": this.getHours(),   //hour
            "m+": this.getMinutes(), //minute
            "s+": this.getSeconds(), //second
            "q+": Math.floor((this.getMonth() + 3) / 3),  //quarter
            "S": this.getMilliseconds() //millisecond
        }

        if (/(y+)/.test(format)) format = format.replace(RegExp.$1,
          (this.getFullYear() + "").substr(4 - RegExp.$1.length));
        for (var k in o) if (new RegExp("(" + k + ")").test(format))
            format = format.replace(RegExp.$1,
              RegExp.$1.length == 1 ? o[k] :
                ("00" + o[k]).substr(("" + o[k]).length));
        return format;
    }
    $("div[name=date]").each(function () {
        var myDate = new Date($(this).data("datetime"));
        var convertToLocalDate = convertUTCDateToLocalDate(myDate);
        $(this).text(convertToLocalDate.format("MM/dd/yyyy hh:mm:ss"));
    });