jquery.ui.datepicker.mobile.js を使った際の日付選択イベント抽出

行いたかったのは、jquery.ui.datepicker.mobileで作られたカレンダーの日付をタップ(クリック)された際のそのイベントを検出すること。
jQueryのlive(type, fn)を利用すればよいということがやっとわかった。
bind関数との違いはbind(type,fn)を利用した場合、動的に後付された要素に対してはイベントの割り当てが行われないが、live(type,fn)の場合は後付された要素に対してもイベントハンドラが割り当てられる。
したがって、jquery.ui.datepicker.mobileで後付されたカレンダーの要素に対してイベントハンドラの割り当て(タップ・クリック時のイベントの割り当て)を行おうと思ったらlive(type,fn)を利用しなければいけならない。

以下、サンプル。
カレンダー中の日付をタップした際に選択された日付に対応する年月日がalertで表示されるもの。

<html>
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1"> 
<link rel="stylesheet"  href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" /> 
<link rel="stylesheet"  href="css/jquery.ui.datepicker.mobile.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script> 
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script> 
<script type="text/javascript" src="js/jQuery.ui.datepicker.js"></script> 
<script type="text/javascript" src="js/jquery.ui.datepicker.mobile.js"></script> 
<script type="text/javascript">
    $(".ui-datepicker-calendar").ready(function() {
        $("td").live("click", function(){
            alert($("#datepicker").val());
        });
    });
</script>
<body>
<div data-role="page" data-theme="b" id="jqm-home">
<div data-role="content">
<form action="#" method="get">
<input type="date" name="date" id="datepicker" value="" >
</form>
</div>
</div>
</body>
</html>

もっとも、datepickerのAPIイベントハンドラの操作できそうな気もするのだが…。
いろいろ探してみたが見つけられなかった。

(Visited 8 times, 1 visits today)

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です