jQueryのDatepickerに時間選択のUIを追加することができるのが、
Datepickerの使い方やテーマをある程度引き継いでUIを追加できるので便利です。
ただ、jQuery-Timepicker-AddonではDatepickerで表示できるアイコンやボタンを表示させることができなくなります。
今回こちらを使うときに、デザイン的にアイコンがあったほうがよかったので、
このアドオンにDatepickerのような画像アイコンやボタンを追加する方法について考えてみましたので、
ご紹介いたします。
↓こちらがDEMOです
方法
jQuery-UIとjQuery-Timepicker-Addonを設置する。
それぞれの公式サイトから必要なJSやCSSなどをダウンロードして、設置し、
読み込みます。
|
1 2 3 4 5 6 | <link href="css/jquery-ui.min.css" rel="stylesheet"> <link href="css/jquery-ui-timepicker-addon.css" rel="stylesheet"> <script src="js/jquery-1.11.1.min.js"></script> <script src="js/jquery-ui.min.js"></script> <script src="js/jquery-ui-timepicker-addon.js"></script> |
jQuery-Timepicker-Addonを編集して、オプションを追加する
jquery-ui-timepicker-addon.jsの一部を編集します。まず、以下のコードを探します。
|
1 | this._defaults = { // Global defaults for all the datetime picker instances |
ここの最後のところに、以下のようにコードを追加します。
|
1 2 3 4 5 6 | ・・・ controlType: 'slider', defaultValue: null, parse: 'strict' }; $.extend(this._defaults, this.regional['']); |
↓
|
1 2 3 4 5 6 7 8 | ・・・ controlType: 'slider', defaultValue: null, parse: 'strict', buttonImage: null, //ここ buttonImageOnly: false //ここ }; $.extend(this._defaults, this.regional['']); |
つぎにこのすぐ下にある以下のコードを探します。
|
1 | $.extend(Timepicker.prototype, { |
ここの最後のところに、以下のようにコードを追加します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 | units: ['hour', 'minute', 'second', 'millisec', 'microsec'], support: {}, control: null, /* * Override the default settings for all instances of the time picker. * @param {Object} settings object - the new settings to use as defaults (anonymous object) * @return {Object} the manager object */ setDefaults: function (settings) { extendRemove(this._defaults, settings || {}); return this; }, |
↓
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | units: ['hour', 'minute', 'second', 'millisec', 'microsec'], support: {}, control: null, buttonImageOnly: false, //ここ buttonImage: null, //ここ /* * Override the default settings for all instances of the time picker. * @param {Object} settings object - the new settings to use as defaults (anonymous object) * @return {Object} the manager object */ setDefaults: function (settings) { extendRemove(this._defaults, settings || {}); return this; }, |
最後に以下のコードを探します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | // datepicker needs minDate/maxDate, timepicker needs minDateTime/maxDateTime.. if (tp_inst._defaults.minDate !== undefined && tp_inst._defaults.minDate instanceof Date) { tp_inst._defaults.minDateTime = new Date(tp_inst._defaults.minDate.getTime()); } if (tp_inst._defaults.minDateTime !== undefined && tp_inst._defaults.minDateTime instanceof Date) { tp_inst._defaults.minDate = new Date(tp_inst._defaults.minDateTime.getTime()); } if (tp_inst._defaults.maxDate !== undefined && tp_inst._defaults.maxDate instanceof Date) { tp_inst._defaults.maxDateTime = new Date(tp_inst._defaults.maxDate.getTime()); } if (tp_inst._defaults.maxDateTime !== undefined && tp_inst._defaults.maxDateTime instanceof Date) { tp_inst._defaults.maxDate = new Date(tp_inst._defaults.maxDateTime.getTime()); } tp_inst.$input.bind('focus', function () { tp_inst._onFocus(); }); |
ここの後に以下のコードを追加します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 | //add trigger button & image if(tp_inst._defaults.buttonImage){ var triggerId = parseInt(Math.random() * 10000); if(!tp_inst._defaults.buttonImageOnly){ tp_inst.$input.after('<button type="button" class="ui-datepicker-trigger" id="ui-datepicker-trigger' + triggerId + '"><img src="' + tp_inst._defaults.buttonImage + '"></button>'); }else{ tp_inst.$input.after('<img class="ui-datepicker-trigger" id="ui-datepicker-trigger' + triggerId + '" src="' + tp_inst._defaults.buttonImage + '">'); } console.log $(document).on('click', '#ui-datepicker-trigger' + triggerId, function(){ tp_inst.$input.focus(); }); } |
これで編集は完了です。
jQuery-Timepicker-Addonを実行する
ボタン付きのアイコンを追加するときは以下のコードで、
|
1 2 3 4 5 | $(function(){ $('#dateTimePicker2').datetimepicker({ buttonImage: "images/ico_calender.png" //アイコン画像のパス }); }); |
画像だけのアイコンを追加するときは以下のコードを追加します。
|
1 2 3 4 5 6 | $(function(){ $('#dateTimePicker2').datetimepicker({ buttonImage: "images/ico_calender.png", buttonImageOnly: true //画像のみ追加 }); }); |
