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 28 times, 1 visits today)
  • このエントリーをはてなブックマークに追加

SNSでもご購読できます。

コメントを残す

*