カレンダー入力補助機能datepicker

カレンダー入力補助機能。
AjaxToolKitも使ったことがあったけど、標準でできないかと調べてみると、
MVC3に標準装備のjquery-ui.jsでdatepickerが利用できた。

<link href="<%= Url.Content("~/Content/themes/base/jquery-ui-1.8.16.custom.css") %>" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="<%= Url.Content("~/Scripts/jquery-1.4.4.js") %>"></script>
<script type="text/javascript" src="<%= Url.Content("~/Scripts/jquery-ui.js") %>"></script>
<script type="text/javascript">
  $(document).ready(function () {
   $('.date').datepicker({ dateFormat: "yy/mm/dd" });
  });
</script>


あとは、利用したいTextBoxで下のように書くだけ。
<%=Html.TextBox("Date", Model.Date, new { @class = "date})%>

jquery-ui-1.8.16.custom.cssはThemeRollerサイトで自分好みに作れます。
http://jqueryui.com/themeroller/

カスタマイズはこの辺読んだらできそう。（英語だけど）
http://docs.jquery.com/UI/API/1.8/Datepicker#options

日本語化は、カスタマイズしてもいいけど、
jquery.ui.datepicker-ja.jsを追加で取り込むだけでもできる。

HtmlHelperの拡張

好きなnamespaceで、好きなclasss名で拡張できる。
（別に、基本クラスを指定しなくてもよい）
第一引数にthisをつけて、HtmlHelperを指定するだけ。

public static string Label(this HtmlHelper html, string name, string className)
{
    ...
}

ちなみに、View全般で利用するときは、Web.configで追加しておけば、わざわざ個別に@import文を書かなくていいから便利。

<namespaces>
    <add namespaces="○○○" />
</namespaces>

あとは、Html.Label()で呼び出すだけ。便利～