$.trigger()は引数を持たせることができます。

通常の使い方。

$(function(){
    $(document).on("BUTTONCLICK",function(){
        alert("クリックされました");
    });
    $('#sample').on("click",function(){
        $(document).trigger("BUTTONCLICK");
    });
});

引数を加えたバージョン

$(function(){
    $(document).on("BUTTONCLICK",function(e,a){
        alert(a);
    });
    $('#sample').on("click",function(){
        $(document).trigger("BUTTONCLICK","goodbye!");
    });
});

// e (第一引数)はイベントオブジェクト)
// a (第二引数がtriggerの第二引数から渡される)

区別をしてみる

$(function(){
    $(document).on("BUTTONCLICK", function(e,a){
        alert("hello!");
        if (a) {
            alert(a);
        }
    });
    $('#sample1').on("click", function(){
        $(document).trigger("BUTTONCLICK");
    });
    $('#sample2').on("click",function(){
        $(document).trigger("BUTTONCLICK", "goodbye!");
    });
});
//引数が与えられなかった場合、その引数はundefinedとなります。

demo

日付入力、カレンダー入力をしたいときは jquery.ui.datepicker.js。

では、年月入力ができる機能が欲しいときはどうしましょう。

→ jquery.ui.ympicker.js デモ

今回は、jquery.ui.datepicker.jsを 改造して作る例をご紹介します。

元が jquery.ui.datepicker.js なので、オプションなどもほぼそのまま、動きもだいたい似ています。

名づけて jquery.ui.ympicker.js。

以下、調理方法です。

１、材料

jqueryuiのダウンロードページから一式ダウンロードする。

ダウンロードしたzipファイルを解凍し、中身から、開発用の元のソース（development-bundle/ui/jquery.ui.datepicker.js）を使う。

２、名前を変更する

お好みの名前にしていただいてよいですが、ここではympickerとします。

外部jsのファイル名を jquery.ui.datepicker.js → jquery.ui.ympicker.js にします。

jquery.ui.ympicker.js をエディタで開き、さらに中も変更します。置換機能のあるエディタで以下のように書き換えます。

• Datepicker → Ympicker（大文字小文字に注意）
• datepicker → ympicker（大文字小文字に注意）
• 元に戻す感じで、 ui-ympicker → ui-datepicker（スタイルシートはdatepickerのを流用したいので、ui-datepicker*はそのままにしたい）

ここまでの変更で、$(セレクタ).ympicker() で、datepickerと同じ動きをするようになります。

では、動きを変えていきます。

３、年月選択仕様に変える

どのへんを書き換えているのか分かりづらいですが、ソースの中を検索すると見つかると思います。

過程をメモしておこうと思って書いた部分なので、結果だけ欲しい場合はデモ画面をご覧ください。

カレンダーの表示を変える

カレンダーを表示している _generateHTML メソッドを書き換える。月が並ぶように変える。

・ヘッダの曜日は不要

				calender += '<div class="ui-datepicker-header ui-widget-header ui-helper-clearfix' + cornerClass + '">' +
					(/all|left/.test(cornerClass) && row == 0 ? (isRTL ? next : prev) : '') +
					(/all|right/.test(cornerClass) && row == 0 ? (isRTL ? prev : next) : '') +
					this._generateMonthYearHeader(inst, drawMonth, drawYear, minDate, maxDate,
					row > 0 || col > 0, monthNames, monthNamesShort) + // draw month headers
//					'</div><table class="ui-datepicker-calendar"><thead>' +
					'</div><table class="ui-datepicker-calendar"><tbody>';
/*
					'<tr>';
				var thead = (showWeek ? '<th class="ui-datepicker-week-col">' + this._get(inst, 'weekHeader') + '</th>' : '');
				for (var dow = 0; dow < 7; dow++) { // days of the week
					var day = (dow + firstDay) % 7;
					thead += '<th' + ((dow + firstDay + 6) % 7 >= 5 ? ' class="ui-datepicker-week-end"' : '') + '>' +
						'<span title="' + dayNames[day] + '">' + dayNamesMin[day] + '</span></th>';
				}
				calender += thead + '</tr></thead><tbody>';
*/

・カレンダーの描画のループのスタートでその年の1月1日にして、月単位でループするようにする

				//var printDate = this._daylightSavingAdjust(new Date(drawYear, drawMonth, 1 - leadDays));
				//↑いろいろ計算しているけど無視して、選択している年の1月1日にする
				var printDate = this._daylightSavingAdjust(new Date(drawYear, 0, 1));

・ 4列3行にで12ヶ月にする

//				for (var dRow = 0; dRow < numRows; dRow++) { // create date picker rows
				for (var dRow = 0; dRow < 3; dRow++) { // create date picker rows

//					for (var dow = 0; dow < 7; dow++) { // create date picker days
					for (var dow = 0; dow < 4; dow++) { // create date picker days

日付を表示していたところを、月の表示に変える。

//							'" href="#">' + printDate.getDate() + '')) + ''; // display selectable date
							'" href="#">' + monthNamesShort[printDate.getMonth()] + '')) + ''; // display selectable date

1日ずつ足してループしているところを、1ヶ月ずつ足してループするようにする。

//						//printDate.setDate(printDate.getDate() + 1);
						printDate.setMonth(printDate.getMonth() + 1);

日付選択時の動きを変える

対象：_selectDay メソッド

datepickerではカレンダーの各セルのHTMLから日付を取得するようになっています。年月入力化するとセルには月の名前を入れることになるので、そこから日付は取れません。日付は引数で渡すように変えます。

	/* Action for selecting a day. */
//	_selectDay: function(id, month, year, td) {
	_selectDay: function(id, month, year, d, td) {
		var target = $(id);
		if ($(td).hasClass(this._unselectableClass) || this._isDisabledYmpicker(target[0])) {
			return;
		}
		var inst = this._getInst(target[0]);
//		inst.selectedDay = inst.currentDay = $('a', td).html();
		inst.selectedDay = inst.currentDay = d;
		inst.selectedMonth = inst.currentMonth = month;
		inst.selectedYear = inst.currentYear = year;
		this._selectDate(id, this._formatDate(inst,
			inst.currentDay, inst.currentMonth, inst.currentYear));
	},

_selectDay メソッドを使っている箇所が2箇所あるので、そちらも変えます。

//530行目付近
				case 13: var sel = $('td.' + $.ympicker._dayOverClass + ':not(.' + 
									$.ympicker._currentClass + ')', inst.dpDiv);
						if (sel[0])
//							$.ympicker._selectDay(event.target, inst.selectedMonth, inst.selectedYear, sel[0]);
							$.ympicker._selectDay(event.target, inst.selectedMonth, inst.selectedYear, 1, sel[0]);

//1550行目付近
						tbody += '<td class="' +
//（中略）
							((!otherMonth || showOtherMonths) && daySettings[2] ? ' title="' + daySettings[2] + '"' : '') + // cell title
							(unselectable ? '' : ' onclick="DP_jQuery_' + dpuuid + '.ympicker._selectDay(\'#' +
//							inst.id + '\',' + printDate.getMonth() + ',' + printDate.getFullYear() + ', this);return false;"') + '>' + // actions
							inst.id + '\',' + printDate.getMonth() + ',' + printDate.getFullYear() + ',' + printDate.getDate() + ', this);return false;"') + '>' +
							(otherMonth && !showOtherMonths ? '&#xa0;' : // display for other months
							(unselectable ? '<span class="ui-state-default">' + printDate.getDate() + '</span>' : '<a class="ui-state-default' +
//（後略）

カレンダーのヘッダ部分の変更

年月が表示されていたところを、年のみにするよう _generateMonthYearHeader を書き換える。

月を表示しているところを全部コメントアウト。

		// month selection
/*
		if (secondary || !changeMonth)
			monthHtml += '<span class="ui-datepicker-month">' + monthNames[drawMonth] + '</span>';
		else {
			var inMinYear = (minDate && minDate.getFullYear() == drawYear);
			var inMaxYear = (maxDate && maxDate.getFullYear() == drawYear);
			monthHtml += '<select class="ui-datepicker-month" ' +
				'onchange="DP_jQuery_' + dpuuid + '.ympicker._selectMonthYear(\'#' + inst.id + '\', this, \'M\');" ' +
			 	'>';
			for (var month = 0; month < 12; month++) {
				if ((!inMinYear || month >= minDate.getMonth()) &&
						(!inMaxYear || month <= maxDate.getMonth()))
					monthHtml += '<option value="' + month + '"' +
						(month == drawMonth ? ' selected="selected"' : '') +
						'>' + monthNamesShort[month] + '</option>';
			}
			monthHtml += '</select>';
		}
		if (!showMonthAfterYear)
			html += monthHtml + (secondary || !(changeMonth && changeYear) ? '&#xa0;' : '');
*/

４、デフォルトの設定値を変える

指定がなければ以下の動作をするように、設定のデフォルト値を変えます。

this._defaultsのところで、

・年はプルダウン表示する → changeYear: true
・他の月も表示する → showOtherMonths: true
・他の月も選択可能にする → selectOtherMonths: true
・12ヶ月単位で移動すること → stepMonths: 12
・表示形式を年月に → dateFormat: ‘mm/yy’

５、使う

デフォルトのオプションも変えてしまったので、datepickerと同じように使えるでしょう。

//そのまま
$(セレクタ).ympicker();

//日本語仕様オプション
$(セレクタ).ympicker({
    closeText: '閉じる',
    prevText: '<前',
    nextText: '次>',
    currentText: '今日',
    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月'],
    dateFormat: 'yy/mm',
    yearSuffix: '年'
});

demo 年月入力 jquery.ui.ympicker.js デモ

DOWNLOAD jquery.ui.ympicker – ダウンロード

@todo

対応していない部分は結構あって、キーボードでもある程度操作できるところなどまではカスタマイズしていません。

以上、若干忘れ物があるかもしれませんので、お気づきの点などありましたら教えてください。

よろしくお願いします。

問題

marginの値を数値で取得したい。

答え

こんな感じでよいと思います。

parseInt($('#target').css('margin-left'), 10);

$(‘#target’).css(‘margin-left’) で 0px、50px などの単位付きの文字列が取得できるので、parseInt(～～, 10) で10進数として読みとります。

どうやらpxで取得されることと、小数の場合もありうることから、場合によっては、末尾の「px」を除去するという考えもありかもしれません。

問題

以下のような、日付と時間を入力するタイプの日時入力欄が入力しにくい。

YYYY-MM-DD hh:mm:ss形式で入力してもらえると楽なのはプログラマの都合。ユーザーには優しくない。

下図のような入力欄にしたい。

しかし、プログラム上は「日時」で管理されている項目なので、画面上は「日+時」になると、「日時」を分割したり、「日+時」を結合したりが面倒だ。

表面上はユーザーに優しいインターフェース、内部的にはプログラマに優しい処理をおこないたい。

答え

日時の入力欄を、後の処理はしやすいままで、入力しやすくするjQueryプラグインを作ってみる。

HTMLは以下のようにするだけ。

HTML

<input type="text" class="datetimepicker" name="entry_datetime" value="2012-11-01 12:30:00">

JavaScriptで、表面上は jqueryuiのDatepicker + 時刻プルダウンに変形する。

JavaScript

$(function(){
	$('.datetimepicker').each(function(){
		//日時はhiddenに切り替え。見た目は日付と時間入力に変更。
		var $dt = $('<input type="hidden">').attr('name', this.name).val(this.value);
		//見た目を調整するためのclassがあれば指定
		var $d = $('<input type="text">').addClass('calendar');
		var $t = $('<select></select>').addClass('input-small');
		$(this).after($dt, $d, ' ', $t);
		//日付の方はdatepickerにする
		$d.datepicker({dateFormat: 'yy-mm-dd','など、オプションを適当に':'指定してください'});
		//時刻の方は10分おきのプルダウンなどにする
		var hh = ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23'];
		var mm = ['00', '10', '20', '30', '40', '50'];
		for (var i = 0; i < hh.length; ++i) {
			for (var j = 0; j < mm.length; ++j) {
				var $o = $('<option></option>')
							.attr('value', hh[i] + ':' + mm[j] + ':00')
							.text(hh[i] + ':' + mm[j]);
				$t.append($o);
			}
		}
		//初期値があれば反映
		$d.val(this.value.replace(/^(\d\d\d\d-\d\d-\d\d).*$/, "$1"));
		$t.val(this.value.replace(/^.*(\d\d:\d\d:\d\d).*$/, "$1"));
		//日付変更時と時間変更時にhidden化した方へ値を反映する処理を仕込んでおく
		function x(){$dt.val($d.val() + ' ' + $t.val());}
		$d.datepicker('option', 'onSelect', x);
		$d.on('change', x);
		$t.on('change', x);
		//オリジナルはさようなら
		$(this).remove();
	});
});

こんなふうになります。

図解

Demo

デモはこちら

フォームから送信される値は、type=”hidden”にして見えなくした要素にJavaScriptで入れている日付と時刻を結合したものになる。サーバー側での後の処理が楽。

日付形式が必ずYYYY-MM-DD hh:mm:ss形式で、プルダウンは10分おきで秒は指定しないといった前提条件の下で作ってあるので、状況に応じてカスタマイズすること。

問題

jQueryプラグインとか無しで、拡大・縮小できる？

答え

拡大・縮小します。jQueryプラグイン無しで、拡大・縮小します！

jQueryのanimateは、数値で設定できるスタイルシートのプロパティでしかアニメーションできない。

それならば、ほぼ表示に影響しないプロパティを利用して、値の変化を発生させ、stepオプションでそれを横から利用して拡大・縮小などのプロパティの指定に使ってはどうかというアイデアで作ってみました。

前回、回転でz-indexを使いました。違う例をやってみたいので、今回は、拡大・縮小時ならほぼ気づかれない、paddding-rightを利用してみます（もちろんz-indexでもよいです）。

//ここでは表示上ほぼ気づかれないpadding-rightをアニメーションさせます
$('#sample20130315').animate({paddingRight:1},{
	//1秒かけてアニメーション
	duration:1000,
	//stepは、アニメーションが進むたびに呼ばれる
	step:function(now){
		//nowに現在のpadding-rightの値が渡してもらえる
		//0から1に向かって変化していくnowを利用してscaleさせてみる
		$(this).css({transform:'scale(' + now  + ')'});
	},
	//終わったら
	complete:function(){
		//次のために、元に戻しておく
		$('#sample20130315').css('paddingRight', 0);
	}
})

ちょっと拡大・縮小してみたいだけのときに使えると思います。

おまけ

scaleで、0から1.0に向かって変化する値をそのまま利用すると、単純に小さいのが大きくなるだけですが、

0から1.0に向かって変化する値を、何らかの加工をしてから使えば、もっと楽しい拡大・縮小が可能です。

$('#sample20130315a').animate({paddingRight:1},{
	//2秒かけてアニメーション
	duration:2000,
	//stepは、アニメーションが進むたびに呼ばれる
	step:function(now){
		//0から1に向かって変化していくnowを利用してscaleさせてみる
		$(this).css({transform:'scale(' + (1 + Math.sin(now * 4 * Math.PI) / 2)  + ')'});
	},
	//終わったら
	complete:function(){
		//次のために、元に戻しておく
		$('#sample20130315a').css('paddingRight', 0);
	}
})

ちなみに、1 + Math.sin(now * 4 * Math.PI) / 2 とは、以下のような変化です。

1（原寸大）を中心に、増減（拡大、縮小）する変化です。

問題

セレクトボックスを空にしてから選択肢（<option>）を追加してみてください。

答え

id=”target”のセレクトボックス
の子要素
を除去して、
id=”target”の要素に戻って、
append()でoption要素のHTMLを追加する。

$('#target').children().remove().end().append('<option selected value="値">テキスト</option>');

endの使用例でした。

問題

jQueryプラグインとか無しで、回転できる？

答え

回転します。

jQueryプラグイン無しで、回転します！

jQueryのanimateは、数値で設定できるスタイルシートのプロパティでしかアニメーションできない。

それならば、表示に影響しないz-indexなどのプロパティを利用して、値の変化を発生させ、stepオプションでそれを横から利用して回転などのプロパティの指定に使ってはどうかというアイデアで作ってみました。

//ここでは表示に影響しないz-indexをアニメーションさせます（見た目には何も起きません）
$('#sample20130314').animate({zIndex:1},{
	//1秒かけてアニメーション
	duration:1000,
	//stepは、アニメーションが進むたびに呼ばれる
	step:function(now){
		//nowに現在のz-indexの値（0から1に変化しているところ）が渡してもらえる
		//0から1に向かって変化していくnowを利用して3回転（1080度）させてみる
		$(this).css({transform:'rotate(' + (now * 1080) + 'deg)'});
	},
	//終わったら
	complete:function(){
		//次のために、元に戻しておく
		$('#sample20130314').css('zIndex', 0);
	}
})

ちょっと回してみたいだけのときに使えると思います。

animateやslideDownなどの動きのある処理で使う、値の変化の仕方を指定できるeasing。

jQuery本体には linear, swing のみがあり、jQueryUIやeasingプラグインを追加するとバリエーションが何種類も増えるeasing。

気に入った関数がない場合や、プラグインをわざわざ追加したくないとき、動きを自在にコントロールしたいときには、作ってしまってはいかがでしょう。

案外簡単に自作でき、理屈もわりと簡単。

追加方法

easing関数を追加するには、jQuery.easingに、好きな名前で関数を登録するだけ。

例

jQuery.easing.myEasing = function(x, t, b, c, d) {
	return x;
}

引数が5つあるが、基本は第一引数だけ見れば、だいたいのことができる。

戻り値は変化率とでもいえばよいだろうか。

一番簡単な、進捗に正比例して変化する例

こんな変化をさせる場合。横軸が時間（0～1）、縦軸が値の変化。

これでよい。

jQuery.easing.myEasing = function(x, t, b, c, d) {
	return x;
}

進捗率＝変化率で、進捗0なら変化も0、進捗1（100%）なら変化も1（100%）。

最初ゆっくり、後から加速の、二次関数を使った例

こんな変化をさせる場合。物が落下するときの感じの変化。

jQuery.easing.myEasing2 = function(x, t, b, c, d) {
	return x * x;
}

あら？なんだかとても簡単そうな感じがしてきましたか？

変化のある動きをさせる例

こういうのはどうでしょう。

jQuery.easing.myEasing3 = function(x, t, b, c, d) {
	return x + Math.sin(4 * x * Math.PI) / 4;
}

変化率は0から1の範囲内しかだめ？

そうでもないが、問題があることもある。

marginを変化させるときには、マイナスの値や、目標値をオーバーした値などを指定しても反映されるが、paddingやopacityを変化させるときは、マイナスの値など設定できない値がある。

また、開始は0で終了は1になるようにしておかないと、使いづらいとは思う。

しかし、自分が何をしようとしているか分かっている場合は、何でもありです。

変化が一時的にマイナスになったり、一時的に100%を超える例

戻ったり、行き過ぎたり。

jQuery.easing.myEasing4 = function(x, t, b, c, d) {
	return x - Math.sin(x * Math.PI * 2) / 2;
}

なお、上のデモボタンはmarginを使ってアニメーションしているが、paddingを使うとマイナス値を設定できないので下のようになる。

というわけで、easing関数 自作すると楽しいよ！でした。

問題

jqueryuiのdatepickerで日付入力できるようにした要素をcloneして複製をどこかに追加したとき、日付入力できなくなってて困っているのですが。

答え

ここまでやること。

//複製して
var clone = $('あるinput').clone();
//どこかに追加して
$('どこか').append(clone);
//日付入力可能にする
clone.removeClass("hasDatepicker")    // classを削除
    .removeData("datepicker")     // 関連づけられたデータを削除
    .removeAttr("id")             // idも削除
    .unbind()                     // 関連づけられた関数を削除
    .datepicker();                // datepickerを再設定

もともとidのあった要素を複製したらidが重複するし、もともとidのなかった要素をdatepicker()すると、jqueryuiが重複しないidを付与しているので、どちらにしろidはいったん削除するか、改めて付与する。

Demo

ボタンをクリックすると、日付入力欄を含む行を複製する。

<table id="demo20130828">
<thead><tr><th>日付</th><th>メモ</th><th>複製</th></tr></thead>
  <tbody>
    <tr>
      <td><input type="text" class="datepicker"></td>
      <td><input type="text"></td>
      <td><input type="button" value="複製"></td>
    </tr>
    <tr>
      <td><input type="text" class="datepicker"></td>
      <td><input type="text"></td>
      <td><input type="button" value="複製"></td>
    </tr>
    <tr>
      <td><input type="text" class="datepicker"></td>
      <td><input type="text"></td>
      <td><input type="button" value="複製"></td>
    </tr>
  </tbody>
</table>

<script>
$(function(){
    $('#demo20130828 .datepicker').datepicker();
    $('#demo20130828').on('click', '[type="button"]', function(){
        var tr = this.parentNode.parentNode;
        var clone = $(tr).clone();
        $(tr).after(clone);
        $('.datepicker', clone).removeClass("hasDatepicker")
            .removeData("datepicker")
            .removeAttr("id")
            .datepicker();
    });
});
</script>

問題

Bootstrapを使っているのですが、日付選択UIはやっぱりjqueryuiのdatepickerを使うしかないでしょうか……

jqueriy.ui.datepicker はいいと思うんだけど、読み込まないといけないファイルが増えたり、見た目の統一感が問題だったり……

答え

jquery.ui.datepicker.jsをちょっといじくると、BootstrapのCSSを適用できて、Bootstrapっぽいdatepickerができる。

jquery.ui.datepickerのJavaScriptは完成度が高いので、そのまま使うとして、見た目はjqueryuiのCSSに頼らないようにする。

jquery.ui.datepicker.jsではカレンダー部分のHTMLを作っている_generateHTMLというメソッドや、作ったHTMLを適用・調整している_updateDatepickerというメソッドがある。このあたりをちょっと変えさせてもらう。

Bootstrap3環境で_generateHTMLを変更した例

//デフォルトの動作を少し変える
//前の月へ、次の月へのボタンを <, > に
//表示のとき一番外側にBootstrapのpanelを適用
$.datepicker.setDefaults({
	"prevText" : '&#x3c;',
	"nextText" : '&#x3e;',
	"beforeShow": function(i, o){
		$(o.dpDiv).addClass('panel panel-default');
	}
});
//オリジナルの_generateHTMLをコピーしておいて
$.datepicker.__generateHTML = $.datepicker._generateHTML;

//独自の処理を加えた_generateHTMLで上書きする
//_generateHTMLはHTMLの文字列を作っているので、文字列の置換でカレンダーのHTMLを書き換え可能
$.datepicker._generateHTML = function(inst){
	return '<div class="panel-body">'
		+ $.datepicker.__generateHTML(inst)
			//幅を200pxぐらいにしたい
			.replace('<table', '<table style="width:200px;"')
			//前の月へのボタン
			.replace('ui-datepicker-prev', 'pull-left btn btn-default btn-sm')
			//次の月への簿他
			.replace('ui-datepicker-next', 'pull-right btn btn-default btn-sm')
			//上部の年月の表示部分を中央に
			.replace('ui-datepicker-title', 'text-center')
			//アクティブな日を.btn-primaryに
			.replace('ui-state-default ui-state-active', 'btn btn-primary btn-block btn-xs')
			//当月でない日を.btn-infoで違う色に
			.replace(/ui-state-default ui-priority-secondary/g, 'btn btn-info btn-block btn-xs')
			//当月のその他の日を.btn-linkに
			.replace(/ui-state-default/g, 'btn btn-link btn-block btn-xs')
		+ '</div>';
}

これ↓は使わせてもらうけど、

これ↓からは開放されて、

こんなふう↓になる。

なお上の完成図では、見た目の調整で以下のCSSを適用した。

/* カレンダーに影をつけて目立たせる */
.ui-datepicker {box-shadow:3px 3px 5px rgba(0,0,0,0.5);}
/* 上の部分を太字にする */
.ui-datepicker-header {font-weight:bold;}
/* キーボードでの日付選択時などの強調表示 */
.ui-state-hover {background:#eee;}

DEMO

http://www.softel.co.jp/blogs/tech/archives/demo/datepicker-for-bootstrap

残課題

年月をプルダウンにしたり、複数月表示をしたり、オプションの指定によっては上記の対応では不十分な場合が考えられる。

使い方に応じて加工されたし。

追記

オプションを指定すると、非表示の予定のところが表示されることがあるようなので、場合によっては以下のCSSも指定しておくとよい。

.ui-datepicker {display:none;}

$.trigger()は引数を持たせることができます。

通常の使い方。

$(function(){
    $(document).on("BUTTONCLICK",function(){
        alert("クリックされました");
    });
    $('#sample').on("click",function(){
        $(document).trigger("BUTTONCLICK");
    });
});

引数を加えたバージョン

$(function(){
    $(document).on("BUTTONCLICK",function(e,a){
        alert(a);
    });
    $('#sample').on("click",function(){
        $(document).trigger("BUTTONCLICK","goodbye!");
    });
});

// e (第一引数)はイベントオブジェクト)
// a (第二引数がtriggerの第二引数から渡される)

区別をしてみる

$(function(){
    $(document).on("BUTTONCLICK", function(e,a){
        alert("hello!");
        if (a) {
            alert(a);
        }
    });
    $('#sample1').on("click", function(){
        $(document).trigger("BUTTONCLICK");
    });
    $('#sample2').on("click",function(){
        $(document).trigger("BUTTONCLICK", "goodbye!");
    });
});
//引数が与えられなかった場合、その引数はundefinedとなります。

demo

日付入力、カレンダー入力をしたいときは jquery.ui.datepicker.js。

では、年月入力ができる機能が欲しいときはどうしましょう。

→ jquery.ui.ympicker.js デモ

今回は、jquery.ui.datepicker.jsを 改造して作る例をご紹介します。

元が jquery.ui.datepicker.js なので、オプションなどもほぼそのまま、動きもだいたい似ています。

名づけて jquery.ui.ympicker.js。

以下、調理方法です。

１、材料

jqueryuiのダウンロードページから一式ダウンロードする。

ダウンロードしたzipファイルを解凍し、中身から、開発用の元のソース（development-bundle/ui/jquery.ui.datepicker.js）を使う。

２、名前を変更する

お好みの名前にしていただいてよいですが、ここではympickerとします。

外部jsのファイル名を jquery.ui.datepicker.js → jquery.ui.ympicker.js にします。

jquery.ui.ympicker.js をエディタで開き、さらに中も変更します。置換機能のあるエディタで以下のように書き換えます。

• Datepicker → Ympicker（大文字小文字に注意）
• datepicker → ympicker（大文字小文字に注意）
• 元に戻す感じで、 ui-ympicker → ui-datepicker（スタイルシートはdatepickerのを流用したいので、ui-datepicker*はそのままにしたい）

ここまでの変更で、$(セレクタ).ympicker() で、datepickerと同じ動きをするようになります。

では、動きを変えていきます。

３、年月選択仕様に変える

どのへんを書き換えているのか分かりづらいですが、ソースの中を検索すると見つかると思います。

過程をメモしておこうと思って書いた部分なので、結果だけ欲しい場合はデモ画面をご覧ください。

カレンダーの表示を変える

カレンダーを表示している _generateHTML メソッドを書き換える。月が並ぶように変える。

・ヘッダの曜日は不要

				calender += '<div class="ui-datepicker-header ui-widget-header ui-helper-clearfix' + cornerClass + '">' +
					(/all|left/.test(cornerClass) && row == 0 ? (isRTL ? next : prev) : '') +
					(/all|right/.test(cornerClass) && row == 0 ? (isRTL ? prev : next) : '') +
					this._generateMonthYearHeader(inst, drawMonth, drawYear, minDate, maxDate,
					row > 0 || col > 0, monthNames, monthNamesShort) + // draw month headers
//					'</div><table class="ui-datepicker-calendar"><thead>' +
					'</div><table class="ui-datepicker-calendar"><tbody>';
/*
					'<tr>';
				var thead = (showWeek ? '<th class="ui-datepicker-week-col">' + this._get(inst, 'weekHeader') + '</th>' : '');
				for (var dow = 0; dow < 7; dow++) { // days of the week
					var day = (dow + firstDay) % 7;
					thead += '<th' + ((dow + firstDay + 6) % 7 >= 5 ? ' class="ui-datepicker-week-end"' : '') + '>' +
						'<span title="' + dayNames[day] + '">' + dayNamesMin[day] + '</span></th>';
				}
				calender += thead + '</tr></thead><tbody>';
*/

・カレンダーの描画のループのスタートでその年の1月1日にして、月単位でループするようにする

				//var printDate = this._daylightSavingAdjust(new Date(drawYear, drawMonth, 1 - leadDays));
				//↑いろいろ計算しているけど無視して、選択している年の1月1日にする
				var printDate = this._daylightSavingAdjust(new Date(drawYear, 0, 1));

・ 4列3行にで12ヶ月にする

//				for (var dRow = 0; dRow < numRows; dRow++) { // create date picker rows
				for (var dRow = 0; dRow < 3; dRow++) { // create date picker rows

//					for (var dow = 0; dow < 7; dow++) { // create date picker days
					for (var dow = 0; dow < 4; dow++) { // create date picker days

日付を表示していたところを、月の表示に変える。

//							'" href="#">' + printDate.getDate() + '')) + ''; // display selectable date
							'" href="#">' + monthNamesShort[printDate.getMonth()] + '')) + ''; // display selectable date

1日ずつ足してループしているところを、1ヶ月ずつ足してループするようにする。

//						//printDate.setDate(printDate.getDate() + 1);
						printDate.setMonth(printDate.getMonth() + 1);

日付選択時の動きを変える

対象：_selectDay メソッド

datepickerではカレンダーの各セルのHTMLから日付を取得するようになっています。年月入力化するとセルには月の名前を入れることになるので、そこから日付は取れません。日付は引数で渡すように変えます。

	/* Action for selecting a day. */
//	_selectDay: function(id, month, year, td) {
	_selectDay: function(id, month, year, d, td) {
		var target = $(id);
		if ($(td).hasClass(this._unselectableClass) || this._isDisabledYmpicker(target[0])) {
			return;
		}
		var inst = this._getInst(target[0]);
//		inst.selectedDay = inst.currentDay = $('a', td).html();
		inst.selectedDay = inst.currentDay = d;
		inst.selectedMonth = inst.currentMonth = month;
		inst.selectedYear = inst.currentYear = year;
		this._selectDate(id, this._formatDate(inst,
			inst.currentDay, inst.currentMonth, inst.currentYear));
	},

_selectDay メソッドを使っている箇所が2箇所あるので、そちらも変えます。

//530行目付近
				case 13: var sel = $('td.' + $.ympicker._dayOverClass + ':not(.' +
									$.ympicker._currentClass + ')', inst.dpDiv);
						if (sel[0])
//							$.ympicker._selectDay(event.target, inst.selectedMonth, inst.selectedYear, sel[0]);
							$.ympicker._selectDay(event.target, inst.selectedMonth, inst.selectedYear, 1, sel[0]);

//1550行目付近
						tbody += '<td class="' +
//（中略）
							((!otherMonth || showOtherMonths) && daySettings[2] ? ' title="' + daySettings[2] + '"' : '') + // cell title
							(unselectable ? '' : ' onclick="DP_jQuery_' + dpuuid + '.ympicker._selectDay(\'#' +
//							inst.id + '\',' + printDate.getMonth() + ',' + printDate.getFullYear() + ', this);return false;"') + '>' + // actions
							inst.id + '\',' + printDate.getMonth() + ',' + printDate.getFullYear() + ',' + printDate.getDate() + ', this);return false;"') + '>' +
							(otherMonth && !showOtherMonths ? '&#xa0;' : // display for other months
							(unselectable ? '<span class="ui-state-default">' + printDate.getDate() + '</span>' : '<a class="ui-state-default' +
//（後略）

カレンダーのヘッダ部分の変更

年月が表示されていたところを、年のみにするよう _generateMonthYearHeader を書き換える。

月を表示しているところを全部コメントアウト。

		// month selection
/*
		if (secondary || !changeMonth)
			monthHtml += '<span class="ui-datepicker-month">' + monthNames[drawMonth] + '</span>';
		else {
			var inMinYear = (minDate && minDate.getFullYear() == drawYear);
			var inMaxYear = (maxDate && maxDate.getFullYear() == drawYear);
			monthHtml += '<select class="ui-datepicker-month" ' +
				'onchange="DP_jQuery_' + dpuuid + '.ympicker._selectMonthYear(\'#' + inst.id + '\', this, \'M\');" ' +
			 	'>';
			for (var month = 0; month < 12; month++) {
				if ((!inMinYear || month >= minDate.getMonth()) &&
						(!inMaxYear || month <= maxDate.getMonth()))
					monthHtml += '<option value="' + month + '"' +
						(month == drawMonth ? ' selected="selected"' : '') +
						'>' + monthNamesShort[month] + '</option>';
			}
			monthHtml += '</select>';
		}
		if (!showMonthAfterYear)
			html += monthHtml + (secondary || !(changeMonth && changeYear) ? '&#xa0;' : '');
*/

４、デフォルトの設定値を変える

指定がなければ以下の動作をするように、設定のデフォルト値を変えます。

this._defaultsのところで、

・年はプルダウン表示する → changeYear: true
・他の月も表示する → showOtherMonths: true
・他の月も選択可能にする → selectOtherMonths: true
・12ヶ月単位で移動すること → stepMonths: 12
・表示形式を年月に → dateFormat: ‘mm/yy’

５、使う

デフォルトのオプションも変えてしまったので、datepickerと同じように使えるでしょう。

//そのまま
$(セレクタ).ympicker();

//日本語仕様オプション
$(セレクタ).ympicker({
    closeText: '閉じる',
    prevText: '<前',
    nextText: '次>',
    currentText: '今日',
    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月'],
    dateFormat: 'yy/mm',
    yearSuffix: '年'
});

demo 年月入力 jquery.ui.ympicker.js デモ

DOWNLOAD jquery.ui.ympicker – ダウンロード

@todo

対応していない部分は結構あって、キーボードでもある程度操作できるところなどまではカスタマイズしていません。

以上、若干忘れ物があるかもしれませんので、お気づきの点などありましたら教えてください。

よろしくお願いします。

問題

marginの値を数値で取得したい。

答え

こんな感じでよいと思います。

parseInt($('#target').css('margin-left'), 10);

$(‘#target’).css(‘margin-left’) で 0px、50px などの単位付きの文字列が取得できるので、parseInt(～～, 10) で10進数として読みとります。

どうやらpxで取得されることと、小数の場合もありうることから、場合によっては、末尾の「px」を除去するという考えもありかもしれません。

問題

以下のような、日付と時間を入力するタイプの日時入力欄が入力しにくい。

YYYY-MM-DD hh:mm:ss形式で入力してもらえると楽なのはプログラマの都合。ユーザーには優しくない。

下図のような入力欄にしたい。

しかし、プログラム上は「日時」で管理されている項目なので、画面上は「日+時」になると、「日時」を分割したり、「日+時」を結合したりが面倒だ。

表面上はユーザーに優しいインターフェース、内部的にはプログラマに優しい処理をおこないたい。

答え

日時の入力欄を、後の処理はしやすいままで、入力しやすくするjQueryプラグインを作ってみる。

HTMLは以下のようにするだけ。

HTML

<input type="text" class="datetimepicker" name="entry_datetime" value="2012-11-01 12:30:00">

JavaScriptで、表面上は jqueryuiのDatepicker + 時刻プルダウンに変形する。

JavaScript

$(function(){
	$('.datetimepicker').each(function(){
		//日時はhiddenに切り替え。見た目は日付と時間入力に変更。
		var $dt = $('<input type="hidden">').attr('name', this.name).val(this.value);
		//見た目を調整するためのclassがあれば指定
		var $d = $('<input type="text">').addClass('calendar');
		var $t = $('<select></select>').addClass('input-small');
		$(this).after($dt, $d, ' ', $t);
		//日付の方はdatepickerにする
		$d.datepicker({dateFormat: 'yy-mm-dd','など、オプションを適当に':'指定してください'});
		//時刻の方は10分おきのプルダウンなどにする
		var hh = ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23'];
		var mm = ['00', '10', '20', '30', '40', '50'];
		for (var i = 0; i < hh.length; ++i) {
			for (var j = 0; j < mm.length; ++j) {
				var $o = $('<option></option>')
							.attr('value', hh[i] + ':' + mm[j] + ':00')
							.text(hh[i] + ':' + mm[j]);
				$t.append($o);
			}
		}
		//初期値があれば反映
		$d.val(this.value.replace(/^(\d\d\d\d-\d\d-\d\d).*$/, "$1"));
		$t.val(this.value.replace(/^.*(\d\d:\d\d:\d\d).*$/, "$1"));
		//日付変更時と時間変更時にhidden化した方へ値を反映する処理を仕込んでおく
		function x(){$dt.val($d.val() + ' ' + $t.val());}
		$d.datepicker('option', 'onSelect', x);
		$d.on('change', x);
		$t.on('change', x);
		//オリジナルはさようなら
		$(this).remove();
	});
});

こんなふうになります。

図解

Demo

デモはこちら

フォームから送信される値は、type=”hidden”にして見えなくした要素にJavaScriptで入れている日付と時刻を結合したものになる。サーバー側での後の処理が楽。

日付形式が必ずYYYY-MM-DD hh:mm:ss形式で、プルダウンは10分おきで秒は指定しないといった前提条件の下で作ってあるので、状況に応じてカスタマイズすること。

問題

jQueryプラグインとか無しで、拡大・縮小できる？

答え

拡大・縮小します。jQueryプラグイン無しで、拡大・縮小します！

jQueryのanimateは、数値で設定できるスタイルシートのプロパティでしかアニメーションできない。

それならば、ほぼ表示に影響しないプロパティを利用して、値の変化を発生させ、stepオプションでそれを横から利用して拡大・縮小などのプロパティの指定に使ってはどうかというアイデアで作ってみました。

前回、回転でz-indexを使いました。違う例をやってみたいので、今回は、拡大・縮小時ならほぼ気づかれない、paddding-rightを利用してみます（もちろんz-indexでもよいです）。

//ここでは表示上ほぼ気づかれないpadding-rightをアニメーションさせます
$('#sample20130315').animate({paddingRight:1},{
	//1秒かけてアニメーション
	duration:1000,
	//stepは、アニメーションが進むたびに呼ばれる
	step:function(now){
		//nowに現在のpadding-rightの値が渡してもらえる
		//0から1に向かって変化していくnowを利用してscaleさせてみる
		$(this).css({transform:'scale(' + now  + ')'});
	},
	//終わったら
	complete:function(){
		//次のために、元に戻しておく
		$('#sample20130315').css('paddingRight', 0);
	}
})

ちょっと拡大・縮小してみたいだけのときに使えると思います。

おまけ

scaleで、0から1.0に向かって変化する値をそのまま利用すると、単純に小さいのが大きくなるだけですが、

0から1.0に向かって変化する値を、何らかの加工をしてから使えば、もっと楽しい拡大・縮小が可能です。

$('#sample20130315a').animate({paddingRight:1},{
	//2秒かけてアニメーション
	duration:2000,
	//stepは、アニメーションが進むたびに呼ばれる
	step:function(now){
		//0から1に向かって変化していくnowを利用してscaleさせてみる
		$(this).css({transform:'scale(' + (1 + Math.sin(now * 4 * Math.PI) / 2)  + ')'});
	},
	//終わったら
	complete:function(){
		//次のために、元に戻しておく
		$('#sample20130315a').css('paddingRight', 0);
	}
})

ちなみに、1 + Math.sin(now * 4 * Math.PI) / 2 とは、以下のような変化です。

1（原寸大）を中心に、増減（拡大、縮小）する変化です。

問題

セレクトボックスを空にしてから選択肢（<option>）を追加してみてください。

答え

id=”target”のセレクトボックス
の子要素
を除去して、
id=”target”の要素に戻って、
append()でoption要素のHTMLを追加する。

$('#target').children().remove().end().append('<option selected value="値">テキスト</option>');

endの使用例でした。

問題

jQueryプラグインとか無しで、回転できる？

答え

回転します。

jQueryプラグイン無しで、回転します！

jQueryのanimateは、数値で設定できるスタイルシートのプロパティでしかアニメーションできない。

それならば、表示に影響しないz-indexなどのプロパティを利用して、値の変化を発生させ、stepオプションでそれを横から利用して回転などのプロパティの指定に使ってはどうかというアイデアで作ってみました。

//ここでは表示に影響しないz-indexをアニメーションさせます（見た目には何も起きません）
$('#sample20130314').animate({zIndex:1},{
	//1秒かけてアニメーション
	duration:1000,
	//stepは、アニメーションが進むたびに呼ばれる
	step:function(now){
		//nowに現在のz-indexの値（0から1に変化しているところ）が渡してもらえる
		//0から1に向かって変化していくnowを利用して3回転（1080度）させてみる
		$(this).css({transform:'rotate(' + (now * 1080) + 'deg)'});
	},
	//終わったら
	complete:function(){
		//次のために、元に戻しておく
		$('#sample20130314').css('zIndex', 0);
	}
})

ちょっと回してみたいだけのときに使えると思います。

animateやslideDownなどの動きのある処理で使う、値の変化の仕方を指定できるeasing。

jQuery本体には linear, swing のみがあり、jQueryUIやeasingプラグインを追加するとバリエーションが何種類も増えるeasing。

気に入った関数がない場合や、プラグインをわざわざ追加したくないとき、動きを自在にコントロールしたいときには、作ってしまってはいかがでしょう。

案外簡単に自作でき、理屈もわりと簡単。

追加方法

easing関数を追加するには、jQuery.easingに、好きな名前で関数を登録するだけ。

例

jQuery.easing.myEasing = function(x, t, b, c, d) {
	return x;
}

引数が5つあるが、基本は第一引数だけ見れば、だいたいのことができる。

戻り値は変化率とでもいえばよいだろうか。

一番簡単な、進捗に正比例して変化する例

こんな変化をさせる場合。横軸が時間（0～1）、縦軸が値の変化。

これでよい。

jQuery.easing.myEasing = function(x, t, b, c, d) {
	return x;
}

進捗率＝変化率で、進捗0なら変化も0、進捗1（100%）なら変化も1（100%）。

最初ゆっくり、後から加速の、二次関数を使った例

こんな変化をさせる場合。物が落下するときの感じの変化。

jQuery.easing.myEasing2 = function(x, t, b, c, d) {
	return x * x;
}

あら？なんだかとても簡単そうな感じがしてきましたか？

変化のある動きをさせる例

こういうのはどうでしょう。

jQuery.easing.myEasing3 = function(x, t, b, c, d) {
	return x + Math.sin(4 * x * Math.PI) / 4;
}

変化率は0から1の範囲内しかだめ？

そうでもないが、問題があることもある。

marginを変化させるときには、マイナスの値や、目標値をオーバーした値などを指定しても反映されるが、paddingやopacityを変化させるときは、マイナスの値など設定できない値がある。

また、開始は0で終了は1になるようにしておかないと、使いづらいとは思う。

しかし、自分が何をしようとしているか分かっている場合は、何でもありです。

変化が一時的にマイナスになったり、一時的に100%を超える例

戻ったり、行き過ぎたり。

jQuery.easing.myEasing4 = function(x, t, b, c, d) {
	return x - Math.sin(x * Math.PI * 2) / 2;
}

なお、上のデモボタンはmarginを使ってアニメーションしているが、paddingを使うとマイナス値を設定できないので下のようになる。

というわけで、easing関数 自作すると楽しいよ！でした。

問題

jqueryuiのdatepickerで日付入力できるようにした要素をcloneして複製をどこかに追加したとき、日付入力できなくなってて困っているのですが。

答え

ここまでやること。

//複製して
var clone = $('あるinput').clone();
//どこかに追加して
$('どこか').append(clone);
//日付入力可能にする
clone.removeClass("hasDatepicker")    // classを削除
    .removeData("datepicker")     // 関連づけられたデータを削除
    .removeAttr("id")             // idも削除
    .unbind()                     // 関連づけられた関数を削除
    .datepicker();                // datepickerを再設定

もともとidのあった要素を複製したらidが重複するし、もともとidのなかった要素をdatepicker()すると、jqueryuiが重複しないidを付与しているので、どちらにしろidはいったん削除するか、改めて付与する。

Demo

ボタンをクリックすると、日付入力欄を含む行を複製する。

<table id="demo20130828">
<thead><tr><th>日付</th><th>メモ</th><th>複製</th></tr></thead>
  <tbody>
    <tr>
      <td><input type="text" class="datepicker"></td>
      <td><input type="text"></td>
      <td><input type="button" value="複製"></td>
    </tr>
    <tr>
      <td><input type="text" class="datepicker"></td>
      <td><input type="text"></td>
      <td><input type="button" value="複製"></td>
    </tr>
    <tr>
      <td><input type="text" class="datepicker"></td>
      <td><input type="text"></td>
      <td><input type="button" value="複製"></td>
    </tr>
  </tbody>
</table>

<script>
$(function(){
    $('#demo20130828 .datepicker').datepicker();
    $('#demo20130828').on('click', '[type="button"]', function(){
        var tr = this.parentNode.parentNode;
        var clone = $(tr).clone();
        $(tr).after(clone);
        $('.datepicker', clone).removeClass("hasDatepicker")
            .removeData("datepicker")
            .removeAttr("id")
            .datepicker();
    });
});
</script>

問題

Bootstrapを使っているのですが、日付選択UIはやっぱりjqueryuiのdatepickerを使うしかないでしょうか……

jqueriy.ui.datepicker はいいと思うんだけど、読み込まないといけないファイルが増えたり、見た目の統一感が問題だったり……

こんなのがいい！

けど、こうなっちゃう

答え

jquery.ui.datepicker.jsをちょっといじくると、BootstrapのCSSを適用できて、Bootstrapっぽいdatepickerができる。

jquery.ui.datepickerのJavaScriptは完成度が高いので、そのまま使うとして、見た目はjqueryuiのCSSに頼らないようにする。

jquery.ui.datepicker.jsではカレンダー部分のHTMLを作っている_generateHTMLというメソッドや、作ったHTMLを適用・調整している_updateDatepickerというメソッドがある。このあたりをちょっと変えさせてもらう。

Bootstrap3環境で_generateHTMLを変更した例

//デフォルトの動作を少し変える
//前の月へ、次の月へのボタンを <, > に
//表示のとき一番外側にBootstrapのpanelを適用
$.datepicker.setDefaults({
	"prevText" : '&#x3c;',
	"nextText" : '&#x3e;',
	"beforeShow": function(i, o){
		$(o.dpDiv).addClass('panel panel-default');
	}
});
//オリジナルの_generateHTMLをコピーしておいて
$.datepicker.__generateHTML = $.datepicker._generateHTML;

//独自の処理を加えた_generateHTMLで上書きする
//_generateHTMLはHTMLの文字列を作っているので、文字列の置換でカレンダーのHTMLを書き換え可能
$.datepicker._generateHTML = function(inst){
	return '<div class="panel-body">'
		+ $.datepicker.__generateHTML(inst)
			//幅を200pxぐらいにしたい
			.replace('<table', '<table style="width:200px;"')
			//前の月へのボタン
			.replace('ui-datepicker-prev', 'pull-left btn btn-default btn-sm')
			//次の月への簿他
			.replace('ui-datepicker-next', 'pull-right btn btn-default btn-sm')
			//上部の年月の表示部分を中央に
			.replace('ui-datepicker-title', 'text-center')
			//アクティブな日を.btn-primaryに
			.replace('ui-state-default ui-state-active', 'btn btn-primary btn-block btn-xs')
			//当月でない日を.btn-infoで違う色に
			.replace(/ui-state-default ui-priority-secondary/g, 'btn btn-info btn-block btn-xs')
			//当月のその他の日を.btn-linkに
			.replace(/ui-state-default/g, 'btn btn-link btn-block btn-xs')
		+ '</div>';
}

これ↓は使わせてもらうけど、

これ↓からは開放されて、

こんなふう↓になる。

なお上の完成図では、見た目の調整で以下のCSSを適用した。

/* カレンダーに影をつけて目立たせる */
.ui-datepicker {box-shadow:3px 3px 5px rgba(0,0,0,0.5);}
/* 上の部分を太字にする */
.ui-datepicker-header {font-weight:bold;}
/* キーボードでの日付選択時などの強調表示 */
.ui-state-hover {background:#eee;}

DEMO

https://www.softel.co.jp/blogs/tech/archives/demo/datepicker-for-bootstrap

残課題

年月をプルダウンにしたり、複数月表示をしたり、オプションの指定によっては上記の対応では不十分な場合が考えられる。

使い方に応じて加工されたし。

追記

オプションを指定すると、非表示の予定のところが表示されることがあるようなので、場合によっては以下のCSSも指定しておくとよい。

.ui-datepicker {display:none;}