【jQuery】入力補助（日付編） ～ Datepicker & Masked Input の使用　～

jQuery

■ Datepicker

 * 日付入力補助で、カレンダーフォームを作成する

Datepicker仕様

http://docs.jquery.com/UI/Datepicker

デモ

http://akdiary.seesaa.net/article/114106237.html

主なプロパティ

一般

 * dateFormat：日付フォーマット(例「dateFormat: 'yy/mm/dd'」)
 * minDate：日付の最小値(例「minDate: new Date(2011, 9, 1)」)
 * maxDate：日付の最大値(例「maxDate: new Date(2011, 11, 31)」)
 * showButtonPanel：「今日」と「閉じる」ボタンを表示(例「showButtonPanel: true」)
 * showOn：入力用カレンダーの表示の仕方(button/both/focus。例「showOn: 'button'」)
 * regional：国を指定
　(例「$("#datepicker").datepicker($.datepicker.regional["ja"]);」)

オプション（日付入力ボタン・画像系）

 * buttonText：日付入力ボタン・画像のToolTip文言(例「buttonText: ''」)
 * buttonImage：日付入力画像のパス（「buttonImage: 'jquery/images/calendar.gif'」）
 * buttonImageOnly：画像ボタンの表示・非表示(例「buttonImageOnly: true」)

サンプル

Header部

<link type="text/css" rel="stylesheet" href="./jquery/themes/base/jquery.ui.all.css" />
<link type="text/css" rel="stylesheet" href="./jquery/demos.css" />
<script type="text/javascript" src="./jquery/jquery-1.6.2.js"></script>
<script type="text/javascript" src="./jquery/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="./jquery/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="./jquery/ui/jquery.ui.datepicker.js"></script>
<script type="text/javascript">
    $(function () {
        $(".datepickerSample").datepicker();
    });
</script>

Body部

<input type="text" class="datepickerSample">

ASP.NETでの利用

JQueryの利用（Datepicker導入編）

http://blogs.yahoo.co.jp/dk521123/26923987.html

JQueryの利用（Datepickerあれこれ編）

http://blogs.yahoo.co.jp/dk521123/26977584.html

参考文献

http://yoseyo.net/jquery/jquery-1/

イベントの取得

サンプル

$('#datepick').datepicker({
  onSelect: function(dateText, inst){
    alert(dateText);
  }
});

参考資料

http://jquery.keicode.com/ui/datepicker.php

■Masked Input

 * テキスト入力欄に日付(____/__/__)、電話番号(__-___-____)など指定したフォーマットで入力させるように入力制御を行うjQueryプラグイン

デモおよびダウンロード

http://digitalbush.com/projects/masked-input-plugin/

利用方法

// [1] masked inputをインポートする
<script src='./jquery/ui/jquery.maskedinput-1.3.js'></script>

<script type="text/javascript">
$(function() {
    // [2] マスクする（『$('#クラス名').mask('9999/99/99');』ってだけ!超簡単!!）
    $('#dateIn0ut').mask('9999/99/99');
}
</script>

参考文献

 * もっと詳しいサンプルは、以下に記載されている。
http://phpjavascriptroom.com/?t=ajax&p=jquery_plugin_forminput#a_maked_input_plugin

Datepicker & Masked Inputとの併用に関する注意

 * バグがあるらしい。ただ、実際、使ってみたが、特に問題なさそうだったけど。。。
http://bugs.jqueryui.com/ticket/5793
http://forum.jquery.com/topic/bug-jquery-ui-1-8a1-datepicker-masked-input-1-2-2
http://stackoverflow.com/questions/2807147/asp-net-jquery-datepicker-bug