Syncfusion EJ2 .NET Core Razor编辑网格时区偏移问题修复咨询

当服务器返回UTC时间、浏览器处于印度时区（+5:30）时，日期显示和保存出现偏移，可通过以下几种方案解决：

方案1：前端层面处理时区转换 #

步骤1：添加日期格式化与转换函数 #

在页面的<script>标签中定义时区处理逻辑：

// 将UTC日期格式化为印度时区的dd/MM/yyyy格式
function formatIndianDate(value) {
    if (!value) return '';
    const utcDate = new Date(value);
    // 加上5小时30分的时区偏移
    const indianDate = new Date(utcDate.getTime() + (5.5 * 60 * 60 * 1000));
    return indianDate.toLocaleDateString('en-IN', { day: '2-digit', month: '2-digit', year: 'numeric' });
}

// 保存前将印度时区日期转回UTC格式
function convertToUtcBeforeSave(args) {
    if (args.requestType === 'save' && args.action === 'update') {
        const localDate = new Date(args.data.PersonDom);
        args.data.PersonDom = new Date(localDate.getTime() - (5.5 * 60 * 60 * 1000)).toISOString();
    }
}

步骤2：更新网格配置 #

修改网格列的formatter属性，并绑定actionBegin事件处理保存逻辑：

<ejs-grid id="UserGrid" load="onLoad" height="500" actionComplete="actionComplete" allowSorting="true" 
          actionBegin="convertToUtcBeforeSave" allowPaging="true" actionFailure="onActionFailure" 
          toolbar="toolbarItems" allowResizing="true" autoFit="true" allowTextWrap="true">
    <e-grid-editsettings allowEditing="true" mode="Normal"></e-grid-editsettings>
    <e-data-manager url="/church/member-dob?handler=DataSource" updateUrl="/church/member-dob?handler=Update" adaptor="UrlAdaptor"></e-data-manager>
    <e-grid-pagesettings pageSize="50"></e-grid-pagesettings>
    <e-grid-columns>
        <!-- 其他列保持不变 -->
        <e-grid-column field="PersonDom" width="200" editType="datepickeredit" 
                       edit="@(new { @params = new { format = "dd/MM/yyyy" } })"
                       formatter="formatIndianDate"
                       headerText="DOM(dd/MM/yyyy)"></e-grid-column>
        <!-- 其他列保持不变 -->
    </e-grid-columns>
</ejs-grid>

方案2：后端层面统一时区配置 #

直接在.NET Core应用中设置默认时区为印度标准时间，让接口返回本地时区的日期：

步骤1：设置全局时区 #

在Program.cs中添加时区配置：

var builder = WebApplication.CreateBuilder(args);

// 设置应用默认时区为印度标准时间
TimeZoneInfo.SetSystemTimeZoneById("India Standard Time");

// 其他中间件配置...

步骤2：数据时区转换（可选） #

如果数据库存储UTC时间，在数据返回和接收时做转换：

// 数据源处理器：将UTC时间转为IST返回
public IActionResult OnGetDataSource()
{
    var istTimeZone = TimeZoneInfo.FindSystemTimeZoneById("India Standard Time");
    var members = _context.Members.Select(m => new {
        m.PersonId,
        m.PersonId2,
        m.FamId2,
        m.FamName,
        PersonDom = m.PersonDom.HasValue ? TimeZoneInfo.ConvertTimeFromUtc(m.PersonDom.Value, istTimeZone) : null,
        m.PersonName,
        m.PersonEmail,
        m.PersonPh,
        m.MemberUsername,
        m.MemberPassword
    }).ToList();
    return Json(members);
}

// 更新处理器：将IST时间转为UTC存储
public IActionResult OnPostUpdate([FromBody] MemberModel model)
{
    if (model.PersonDom.HasValue)
    {
        var istTimeZone = TimeZoneInfo.FindSystemTimeZoneById("India Standard Time");
        model.PersonDom = TimeZoneInfo.ConvertTimeToUtc(model.PersonDom.Value, istTimeZone);
    }
    _context.Members.Update(model);
    _context.SaveChanges();
    return Json(model);
}

方案3：利用Syncfusion控件的时区属性 #

直接在DatePicker编辑控件中指定印度时区，让控件自动处理转换：

<e-grid-column field="PersonDom" width="200" editType="datepickeredit" 
               edit="@(new { @params = new { format = "dd/MM/yyyy", timezone = "Asia/Kolkata" } })"
               headerText="DOM(dd/MM/yyyy)"></e-grid-column>

该方案下，控件会自动将UTC时间转换为印度时区显示，保存时再转回UTC发送给服务器，无需额外编写转换逻辑。

内容的提问来源于stack exchange，提问作者Ibene Liz Mathew