ASP.NET MVC - DatePicker 日期選擇器 | (2) My97DatePicker

My97DatePicker

這一套 My97DatePicker 是由對岸所發展，是一套約 60 KB 的 JavaScript，可以說，把 DatePicker 功能發展到非常「高級」的境界，而不是你所想像，跳出一個日曆，讓你選選點點。

首先，一樣，我們先準備我們的 Model、Controller \ Action、View。

Model：BlogPostMy97.vb

Imports System.ComponentModel.DataAnnotations
''' <summary>
''' Blog 發佈文章類別
''' </summary>
Public Class BlogPostMy97
    ' 標題
    Public Property Title() As String
    ' 發佈日期
    <DataType(DataType.Date)>
    Public Property PostedOn() As DateTime
    ' 標籤
    Public Property Tags() As String
    ' 內容
    Public Property Content() As String
End Class

Controller \ Action：BlogPostMy97Controller.vb

Namespace Mvc3HTMLEditorAndDatePicker
    Public Class BlogPostMy97Controller
        Inherits System.Web.Mvc.Controller

        '
        ' GET: /BlogPostMy97/Create

        Function Create() As ActionResult
            Return View()
        End Function

        <HttpPost(), ActionName("Create")>
        Function Create_Post(model As BlogPostMy97) As ActionResult
            ViewBag.HtmlContent = model.Content
            Return View(model)
        End Function

    End Class
End Namespace

View：Create.aspx

<%@ Page Title="" Language="VB" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage(Of Mvc3HTMLEditorAndDatePicker.BlogPostMy97)" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    KKBruce : DatePicker (使用My97 Datepicker) 日期選擇器測試
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

<h2>DatePicker (使用My97 Datepicker) 日期選擇器測試</h2>

<%-- The following line works around an ASP.NET compiler warning --%>
<%: "" %>

<script src="<%: Url.Content("~/Scripts/jquery.validate.min.js") %>" type="text/javascript"></script>
<script src="<%: Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js") %>" type="text/javascript"></script>

<% Using Html.BeginForm() %>
    <%: Html.ValidationSummary(True) %>
    <fieldset>
        <legend>My97 Datepicker</legend>

        <div class="editor-label">
            <%: Html.LabelFor(Function(model) model.Title) %>
        </div>
        <div class="editor-field">
            <%: Html.EditorFor(Function(model) model.Title) %>
            <%: Html.ValidationMessageFor(Function(model) model.Title) %>
        </div>

        <div class="editor-label">
            <%: Html.LabelFor(Function(model) model.PostedOn) %>
        </div>
        <div class="editor-field">
            <%: Html.EditorFor(Function(model) model.PostedOn) %>
            <%: Html.ValidationMessageFor(Function(model) model.PostedOn) %>
        </div>

        <div class="editor-label">
            <%: Html.LabelFor(Function(model) model.Tags) %>
        </div>
        <div class="editor-field">
            <%: Html.EditorFor(Function(model) model.Tags) %>
            <%: Html.ValidationMessageFor(Function(model) model.Tags) %>
        </div>

        <div class="editor-label">
            <%: Html.LabelFor(Function(model) model.Content) %>
        </div>
        <div class="editor-field">
            <%: Html.EditorFor(Function(model) model.Content) %>
            <%: Html.ValidationMessageFor(Function(model) model.Content) %>
        </div>

        <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>
<% End Using %>

<div>
    <%: Html.ActionLink("回首頁", "Index", "Home") %>
</div>

</asp:Content>

準備好，我們就開始來使用 My97 Datepicker 吧。

下載 My97 Datepicker 及注意事項

我們先從官網下載 My97Datepicker 4.72 Release ( 7z )版本。解壓縮後，把整個「My97DatePicker」目錄複製到專案「Scripts」目錄之下。

以下是官網上的使用注意事項：

• My97DatePicker目录是一个整体,不可破坏里面的目录结构,也不可对里面的文件改名,可以改目录名
• My97DatePicker.htm是必须文件,不可删除(4.8以后不存在此文件)
• 各目录及文件的用途:
  WdatePicker.js 配置文件,在调用的地方仅需使用该文件,可多个共存,以xx_WdatePicker.js方式命名
  config.js 语言和皮肤配置文件,无需引入(4.8以后合并入WdatePicker.js)
  calendar.js 日期库主文件,无需引入
  My97DatePicker.htm 临时页面文件,不可删除(4.8以后不存在此文件)
  目录lang 存放语言文件,你可以根据需要清理或添加语言文件
  目录skin 存放皮肤的相关文件,你可以根据需要清理或添加皮肤文件包
• 当WdatePicker.js里的属性:$wdate=true时,在input里加上class="Wdate"就会在选择框右边出现日期图标,如果您不喜欢这个样式,可以把class="Wdate"去掉,另外也可以通过修改skin目录下的WdatePicker.css文件来修改样式

設定及使用 My97 Datepicker

引用 WdatePicker.js

<!-- My97 Datepicker -->
<script src="<%: Url.Content("~/Scripts/My97DatePicker/WdatePicker.js") %>" type="text/javascript"></script>

然後呢？在解壓縮時，除了 My97DatePicker 目錄外，還有附上一頁 Demo.htm 讓我們開打看一下它的 Source Code：

<script language="javascript" type="text/javascript" src="My97DatePicker/WdatePicker.js"></script>
<input class="Wdate" type="text" onClick="WdatePicker()">

我們發現，My97 DatePicker 的使用是透過 class 與 onClick 這兩個 HTML 屬性來完成。這就好辦事了。讓我們回頭修改網頁內容。

<div class="editor-field">
    <%: Html.EditorFor(Function(model) model.PostedOn) %>
    <%: Html.ValidationMessageFor(Function(model) model.PostedOn) %>
</div>

想為 PostedOn 加上 class 與 onclick 的 HTML 屬性，發現棘手了。

From MSDN：

名稱	描述
EditorFor(Of TModel, TValue)(HtmlHelper(Of TModel), Expression(Of Func(Of TModel, TValue)))	傳回 Expression 運算式所表示之物件中，每一個屬性的 HTML input 項目。
EditorFor(Of TModel, TValue)(HtmlHelper(Of TModel), Expression(Of Func(Of TModel, TValue)), Object)	使用其他檢視資料，傳回運算式所表示之物件中每一個屬性的 HTML input 項目。
EditorFor(Of TModel, TValue)(HtmlHelper(Of TModel), Expression(Of Func(Of TModel, TValue)), String)	使用指定的範本，傳回 Expression 運算式所表示之物件中每一個屬性的 HTML input 項目。
EditorFor(Of TModel, TValue)(HtmlHelper(Of TModel), Expression(Of Func(Of TModel, TValue)), String, Object)	使用指定的範本和其他檢視資料，傳回運算式所表示之物件中每一個屬性的 HTML input 項目。
EditorFor(Of TModel, TValue)(HtmlHelper(Of TModel), Expression(Of Func(Of TModel, TValue)), String, String)	使用指定的範本和 HTML 欄位名稱，傳回 Expression 運算式所表示之物件中每一個屬性的 HTML input 項目。
EditorFor(Of TModel, TValue)(HtmlHelper(Of TModel), Expression(Of Func(Of TModel, TValue)), String, String, Object)	使用指定的範本、HTML 欄位名稱和其他檢視資料，傳回運算式所表示之物件中每一個屬性的 HTML input 項目。

找不到可以增加 HTML屬性的地方！我們先看看 Html.EditorFor() 幫我們產生什麼 HTML 好了。

<input type="text" value="" name="PostedOn" id="PostedOn" data-val-required="PostedOn 欄位是必要項。" data-val="true" class="text-box single-line">

就是個 input，想想，還有那個擴充方法可以幫我們產生 input？好像有一個…T 什麼的，查查 MSDN。

<div class="editor-field">
    <%: Html.TextBoxFor(Function(model) model.PostedOn) %>
    <%: Html.ValidationMessageFor(Function(model) model.PostedOn) %>
</div>

<!-- Html.TextBoxFor() 產生的 input -->
<input type="text" value="" name="PostedOn" id="PostedOn" data-val-required="PostedOn 欄位是必要項。" data-val="true">

查詢 MSDN 後，確定這就是我們要的，它可以自己定義加上 HTML 屬性。

<div class="editor-field">
    <%: Html.TextBoxFor(Function(model) model.PostedOn,New With{.class="Wdate", .onclick="WdatePicker()"}) %>
    <%: Html.ValidationMessageFor(Function(model) model.PostedOn) %>
</div>

建置，把網頁執行起來。

圖一：My97 Datepicker - 提示圖示

多了一個提示圖示，讓使用者很清楚的知道，這個一個日期欄位。我們去點擊一下，

圖二：My97 Datepicker 執行圖

它所取的日期格式為「2011-10-06」。

看一下它的 input code：

<input type="text" value="" onclick="WdatePicker()" name="PostedOn" id="PostedOn" data-val-required="PostedOn 欄位是必要項。" data-val="true" class="Wdate  valid">

修改日期格式

我們進入它的主程式 WdatePicker.js，前面 37 行都是在設定此 My97 Datepicker 的預設值，我們很容易就看到一個「dateFmt:"yyyy-MM-dd"」，要改為台灣習慣的日期格式，把「-」改為「/」，即「dateFmt:"yyyy/MM/dd"」。儲存，重新執行網頁。

My97 Datepicker 使用心得

官網上的 Demo 有相當清楚的說明文件，都是中文字，再說看不懂了就很 XD。例如，我想要「民國」日期而非「西元」日期，有有有，找一下「特色功能」→「民國年」就是你要的功能，很棒吧！建議你，花一些些時間去把它所有範例全部玩一次，你會發現，原來一個 Datepicker 也是很專業的地方，可不是你想像那麼簡單。

相對於前一篇 jQuery UI : DatePicker，My97 Datepicker 不需要 jQuery即可運作，但它又有不輸 jQuery UI : DatePicker 的功能性。如果以檔案大小來說，jQuery + jQuery UI + jQuery UI Datepicker VS My97 Datepicker，不用比了，My97 Datepicker "Win"。

參考資料

• 官網：My97DatePicker
• 下載：My97Datepicker 4.72 Release( 7z )
• 展示：My97Datepicker Demo (重要)