将 C# 日期时间加载到 KendoUI 日期选取器

本文关键字：日期 KendoUI 选取 加载 时间 | 更新日期: 2023-09-27 18:35:39

我正在尝试将DateTime加载到KendoUI DatetimePicker。但它显示像/Date（1381964400000）/。我需要得到它 喜欢 10/17/2013

这是我的代码

日期时间选择器：

@(Html.Kendo().DatePicker().Name("invDate")

用于加载要控制的日期时间的脚本

$("#invLoad").click(function (e) {
            $.ajax({
                url: "@Url.Content("Invoice/ItemHeaderByTrnKy")",
                data: { trnNo: $('#trnNo').val() },
                dataType: "Json",
                type: "POST",
                success: function (data) {
                    if (data != null) {
                        $("#invDate").val(data.TrnDt);
                    }
                    else {
                        ClearAll();
                    }
                },
                error: function (e) {
                    ClearAll();
                }
            });

将 C# 日期时间加载到 KendoUI 日期选取器

第一个选项是尝试将字符串解析为 JavaScript Date 对象，然后将该对象传递给 kendoDatePicker 小部件：

success: function (data) {
    if (data) {
        var dateval = parseInt(data.TrnDt.src.replace(/'/Date'(('d+)')'//, "$1"));
        if (!isNaN(dateval)) {
            var d = new Date(dateval);
            $("#invDate").data("kendoDatePicker").value(d);
    } else {
        ClearAll();
    }
},

步骤：

  1. 使用data.TrnDt.src.replace(/'/Date'(('d+)')'//, "$1")从字符串中提取数值并解析为整数。
  2. 创建Date对象
  3. 将Date对象传递给kendoDatePicker的value()函数。

虽然这大多有效，但结果可能并不完全符合您的预期。 .NET JSON 编码可能会生成本地时间偏移量，而Date()构造函数期望值作为 UTC 偏移量，然后覆盖到本地时间。 因此，您的输出将偏移数小时，具体取决于服务器的时区和客户端的时区。

在我的客户端上，解析您提供的日期值会给出 Thu Oct 17 2013 09:00:00 GMT+1000 的结果。 这告诉我您可能在 GMT+0100 时区之一运行。

解决此问题的唯一可靠方法是第二种选择：将所有 Date 值作为可由 Date() 构造函数解释的字符串返回。

如果在服务器上将日期值格式化为dd MMM yyyy并将生成的字符串传递给new Date()则将获得预期的日期值。 如果只是通过 ASP 控制器中的 return Json(result); 返回对象，则实现此目的的最简单方法是向对象添加转换属性：

public string strTrnDt { get { return TrnDt.ToString("dd MMM yyyy"); } }

然后你的代码变成：

success: function (data) {
    if (data) {
        var d = new Date(data.strTrnDt);
        $("#invDate").data("kendoDatePicker").value(d);
    } else {
        ClearAll();
    }
},

甚至更简单：

success: function (data) {
    if (data) {
        $("#invDate").val(data.strTrnDt);
    } else {
        ClearAll();
    }
},
相关文章：