2013/07/17
時間まで選択できるDatepickerプラグインTimepicker。を日本語化
弊社はもっぱらECサイトを作っており、
入力フォームでお届け日や誕生日の入力欄にDatepickerを使うことが多い。
ただ、Datepickerそのままでは時間までの指定ができず、
日付選択後、テキストボックスで00:00となっている箇所を手動でユーザになおしてもらう方法をとっていた。
よくよく探してみると
http://trentrichardson.com/examples/timepicker/
というものを見つけ、早速試してみた。
案の定日本語対応していないため、少し調整が必要だ。
例えばHTMLを
|
1 | <input type="text" id="dtp"> |
とし、javascriptを
|
1 | $('#dtp').datetimepicker(); |
とすると
このようになる。
そこでメイン関数にオプションを追加
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | var op = { closeText: '閉じる', currentText: '現在日時', timeOnlyTitle: '日時を選択', timeText: '時間', hourText: '時', minuteText: '分', secondText: '秒', millisecText: 'ミリ秒', microsecText: 'マイクロ秒', timezoneText: 'タイムゾーン', prevText: '<前', nextText: '次>', monthNames: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'], monthNamesShort: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'], dayNames: ['日曜日','月曜日','火曜日','水曜日','木曜日','金曜日','土曜日'], dayNamesShort: ['日','月','火','水','木','金','土'], dayNamesMin: ['日','月','火','水','木','金','土'], weekHeader: '週', yearSuffix: '年' }; $('#dtp').datetimepicker( op ); |
すると
このようになり解決。
ご自由にコピペして使って下さい。
※jQuery-uiは1.10.2では動かないので1.10.3を使って下さい
Author Profile
SHARE
