JQueryで年月日ドラムロール UI　α版 - そこはかとなく甘服堂

Androidで動くものが見つからなかったので、気合いでiPhoneとAndroidで動く年月日ドラムロールを作ってみました。
α版です。ところどころアレです。
タッチでしか動きません。ううーん。
課題としては
・AndroidでCSSが適用されない部分がある（Shadowとか）
・12月までスクロールすると13月が返ってくる（笑）
・タップで選択した位置に移動しない
・指を離した瞬間にスクロールが止まる、加減速がない
・年月日がループしない（12月の下に1月、1月の上に12月みたいな）
あとはー。。。んー、書き方がスマートじゃない（笑）
実用とするには、クリアすべき問題が山積みです。

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=2.0,minimum-scale=1.0" />
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="format-detection" content="telephone=on">
<title>drumtest</title>
<meta name="description" content="iphoneとAndroidで動くドラムロールのテスト" />
<meta http-equiv="content-script-type" content="text/javasctipt" />
<meta http-equiv="content-style-type" content="text/css"  />
</head>
<body>

<div>
	<span id="disp_a"></span>年
	<span id="disp_b"></span>月
	<span id="disp_c"></span>日
</div>
<div id="reference_condition_date_window"></div>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js">
</script>

<script type="text/javascript">


var rcd_date = new Date();//基準日時
var rcdysy =  rcd_date.getFullYear();//年の開始
var rcdyey =  rcd_date.getFullYear() + 20;//年をいくつ用意するか
var rcdheight = 30;//1行の高さ
var rcdboxheight = rcdheight * 5;//ロールの行数

function rcd_display(targetobj){//ドラムロール描画先を指定
	$('#reference_condition_date_window').append('<div id="rcd_wrapper"></div>');
	targetobj.append('<div id="rcd_wrapper"></div>');
	$('#rcd_wrapper').append('<div id="rcdy"></div>');
	$('#rcd_wrapper').append('<div id="rcdm"></div>');
	$('#rcd_wrapper').append('<div id="rcdd"></div>');
	$('#rcd_wrapper').append('<div id="rcd_glass"></div>');

	$('#rcd_wrapper').css({
		'position':'relative',
		'display':'inline-block',
		'overflow':'hidden',
		'height':'150px',
		'line-height':'30px',
		'width':'80%',
		'border':'1px solid #cccccc',
		'font-size':'22px',
		'border-radius':'5px',
		'font-weight':'bold',
		'box-shadow':'0 20px 20px -10px rgba(0,0,0,0.7) inset,0 -20px 20px -10px rgba(0,0,0,0.7) inset',
	});

	$('#rcd_glass').css({
		'position':'absolute',
		'top':'60px',
		'left':'0',
		'height':rcdheight+'px',
		'width':'100%',
		'background-color':'rgba(140,140,255,0.3)',
		'border':'1px solid #555555',
	});

	$('#rcdy').css({
		'box-shadow':'1px 0 0 1px rgba(0,0,0,0.9)',
		'border-left':'2px solid #cccccc',
		'border-right':'2px solid #cccccc',
		'width':'40%',
	});

	$('#rcdm').css({
		'margin-left':'1px',
		'box-shadow':'1px 0 0 0 rgba(0,0,0,0.9)',
		'border-left':'2px solid #cccccc',
		'border-right':'2px solid #cccccc',
		'width':'27%',
	});

	$('#rcdd').css({
		'margin-left':'1px',
		'border-left':'2px solid #cccccc',
		'width':'27%',
	});

	$('#rcdy,#rcdm,#rcdd').css({
		'background-color':'transparent',
		'z-index':'1',
		'display':'inline-block',
		'overflow':'hidden',
		'text-align':'right',
		'height':rcdboxheight+'px',
	});

	$('#rcdy,#rcdm,#rcdd').append("<br /><br />");
	for( var i=rcdysy; i<=rcdyey; i++ ){
		$('#rcdy').append(i+"年<br />");
	}
	for( var i=1; i<=12; i++ ){
		$('#rcdm').append(i+"月<br />");
	}
	for( var i=1; i<=31; i++ ){
		$('#rcdd').append(i+"日<br />");
	}
	$('#rcdy,#rcdm,#rcdd').append("<br /><br />");
}


//obj = イベントをつけるオブジェクト,初期値,コールバック
function drmroll_set(obj,ofset_num,callbackfunc){
	if( ofset_num==undefined || ofset_num=="" || ofset_num==null ){
		ofset_num = 0;//ドラムロールの開始数値が1じゃない時用
	}
	obj.bind('touchstart', function() {
		event.preventDefault();
		var sx = event.changedTouches[0].pageX;
		var sy = event.changedTouches[0].pageY;
		var sts = obj.scrollTop();
		obj.bind('touchmove', function() {
			var y = event.changedTouches[0].pageY;
			var dy = y-sy;
			obj.scrollTop(sts-dy);
		});
		obj.bind('touchend', function() {
			var ste = obj.scrollTop();
			var amr = ste%rcdheight;
			var rcdhh = parseInt(rcdheight/2);
			if( amr <= rcdhh ){
				var ido = ste-amr;
			}else{
				var ido = ste+amr;
			}
			obj.scrollTop(ido);
			var rcdsb = rcdheight + parseInt(rcdheight/3);
			var monmon = ido += rcdsb;
			monmon = parseInt(monmon / rcdheight) + ofset_num;
			callbackfunc(monmon);
		});
	});
}

var rcdycal = function(num) {//年用コールバック
	$('#disp_a').html(num);
}
var rcdmcal = function(num) {//月用コールバック
	$('#disp_b').html(num);
}
var rcddcal = function(num) {//日用コールバック
	$('#disp_c').html(num);
}

//ドラムロール呼び出し
rcd_display($('#reference_condition_date_window'));
//ドラムロールにタッチイベントをセット
drmroll_set($('#rcdy'),rcdysy-1,rcdycal);
drmroll_set($('#rcdm'),"",rcdmcal);
drmroll_set($('#rcdd'),"",rcddcal);

</script>
</body>
</html>

しかし結局、半端なUIを自作するならよくできたカレンダーのがよくない？
ってことで、仕事の上ではボツとしました。
実装は趣味のサイトでやろう（笑）