jQuery+jQueryUI読み込み
以下のようにjQueryとjQueryUIのファイルを読み込みます。(ここでは1.4.2と1.8.2を使っています。jQueryUIは「Theme」を「Redmond」としてダウンロードしています。)<link href="css/redmond/jquery-ui-1.8.2.custom.css" rel="stylesheet" type="text/css"></link> <script src="js/jquery-1.4.2.min.js" type="text/javascript"></script> <script src="js/jquery-ui-1.8.2.custom.min.js" type="text/javascript"></script>ダウンロードは以下のサイトから。
jQueryホームページ
jQueryUIダウンロードページ
日本語化
次に日本語化するための「jquery.ui.datepicker-ja.js」も追加しておきます。<link href="css/redmond/jquery-ui-1.8.2.custom.css" rel="stylesheet" type="text/css"></link> <script src="js/jquery-1.4.2.min.js" type="text/javascript"></script> <script src="js/jquery-ui-1.8.2.custom.min.js" type="text/javascript"></script> <script src="js/jquery.ui.datepicker-ja.js" type="text/javascript"></script>
jQueryのDatePickerのドキュメントページにある以下のリンクからダウンロードします。
http://jquery-ui.googlecode.com/svn/trunk/ui/i18n/
利用箇所のid属性指定
該当のタグは以下のようにid属性をつけておきます。<input type="text" name="startedOn" value="2006-12-30" id="startedOn">
DatePicker適用
上記のタグに対してDatePickerを適用します。<script type="text/javascript"> $(function(){ $('#startedOn').datepicker(); }); </script>
完成
以下のようになります。普通のinputタグをクリックすると、日付を選択する小さなウィンドウが表示されます。カスタマイズ
DatePickerは様々な設定ができます。「jquery.ui.datepicker-ja.js」に記述されていますが、「$.datepicker.setDefaults」に設定したものがデフォルトの設定として利用されます。
例えば、上記の例では元の日付のフォーマット(2010/06/20のような形式)を以下のようにして変更しています。
jQuery(function($){ $.datepicker.regional['ja'] = { : dateFormat: 'yy-mm-dd', // 'yy/mm/dd'を変更 : });
0 件のコメント:
コメントを投稿