demoshop

官方網站

http://sourceforge.net/projects/fisforformat/

版本

0.5.0

.NET 的開發者如果你有使用過 JSON 應該或多或少都有碰到時間格式轉換的問題，因為原生的 JSON 並沒有相關的日期格式可以使用所以微軟自己發明了"\/Date(1316175498934)\/" 這種表示法，雖然說明確的表示了日期時間，但卻苦了開發人員，好加在網路上好心人相當多，這裡就有一個還不錯的日期轉換模組可以迅速方便的解決這種問題。

這裡介紹的是 「F」這個時間日期格式化的Library，他真的就只叫做「F」，是使用純 JavaScript 寫的，馬上來看看範例。（範例使用 MVC 撰寫，不過影響應該不大）

本篇的 jQuery 純粹為了示範方便所以寫的很爛，請看結果就好，不要照抄 Code。

手動增加一個新的 Class 用於 Json 序列化，並且於 Index Action 內增加一個 Viewdate 來傳遞序列化後的文字

namespace MvcApplication1.Controllers
{
    public class HomeController : Controller
    {
        class MyClass
        {
            public int Id { get; set; }
            public string Name { get; set; }
            public DateTime Date { get; set; }
        }

        public ActionResult Index()
        {
            ViewBag.Message = "Welcome to ASP.NET MVC!";

            var jsonData = new MyClass()
            {
                Id = 1,
                Name = "demoshop",
                Date = DateTime.Now
            };

            ViewData["json"] = ((JavaScriptSerializer)new JavaScriptSerializer()).Serialize(jsonData);

            return View();
        }

        public ActionResult About()
        {
            return View();
        }
    }
}

---

前端就只秀出 Json 資料

@{
    ViewBag.Title = "Home Page";
}

<h2>@ViewBag.Message</h2>
<p>
    To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">http://asp.net/mvc</a>.
</p>
@ViewData["json"]

---

可以看到輸出的格式就是 .NET 標準的 Date 格式

{"Id":1,"Name":"demoshop","Date":"\/Date(1316175498934)\/"}

---

這當然不能直接使用，需要經過轉換，如果說您只希望將 Date 格式還原為 Date 可以參考黑暗大的這篇文章，就達到需求了但即使轉換成了 Javascript 的 Date 格式要做自訂日期格式依然是很麻煩，所以您可以考慮使用 demo 推薦的這套 「F」，為了示範 demo 將 View 改變一下

@{
    ViewBag.Title = "Home Page";
}

<h2>@ViewBag.Message</h2>
<p>
    To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">http://asp.net/mvc</a>.
</p>
<span id="jsonData">@ViewData["json"]</span>
<p>ID：<span id="id"></span></p>
<p>NAME：<span id="name"></span></p>
<p>DATE：<span id="date"></span></p>
<p>FDATE：<span id="fdate"></span></p>

---

利用 jQuery 來解析 JSON ，於是在頁面最下方加上

<script type="text/javascript">
    $(function () {
        var obj = $.parseJSON($('#jsonData').html());
        $('#id').html(obj.Id);
        $('#name').html(obj.Name);
        $('#date').html(obj.Date);
        $('#fdate').html(new Date(parseInt(obj.Date.substr(6))).f("yyyy-MM-dd HH:mm:ss"));
    });
</script>

其中 fdate 就是利用了 「F」做的格式（詳細支援可以參考這裡）

因為「F」無法直接對於 .NET 處理過後的日期做直接的轉換，所以 demo 偷吃步利用 substr(6) 來從數字開始取。

---

利用了「F」就可以很簡單的把 JSON 日期轉回來並且指定格式，而且使用的關鍵字都是我們習慣的算是相當的方便了，而且此套還提供了時間diff 的功能，有興趣的就去它的官網研究吧。