jQuery UI Datepicker(カレンダー)表示位置の調整

jQuery UI Datepicker(カレンダー)表示の位置は通常テキストボックスの下に表示されます。
デフォルトの表示位置を jQuery Position を使って変更する方法をご紹介します。

参考URL:http://www.northwind.mydns.jp/samples/datepicker_sample8.php

<script type="text/javascript">
    $(function() {
        // 1番目のカレンダー
        $("#datepicker").datepicker({
            showOn: "button",
            beforeShow: function(input, inst) {
                var calendar = inst.dpDiv;    // Datepicker

                setTimeout(function() {
                    calendar.position({
                        my: 'left bottom',    // カレンダーの左下
                        at: 'left top',       // 表示対象の左上
                        of: input             // 対象テキストボックス
                    });
                }, 1);
            }
        });
        // 2番目のカレンダー
        $("#datepicker2").datepicker({
            showOn: "button",
            beforeShow: function(input, inst) {
                var calendar = inst.dpDiv;   // Datepicker

                setTimeout(function() {
                    calendar.position({
                        my: 'right top',     // カレンダーの右上
                        at: 'right bottom',  // 表示対象の右下
                        of: input            // 対象テキストボックス
                    });
                }, 1);
            }
        });
    });
</script>

カレンダ自動入力機能 HTML文をJavascriptの変数として

var HTML1 = "<input type='hidden' name='EstimatedOutsourceCode[" + counter_o + "]' id='EstimatedOutsourceCode[" + counter_o + "]' size='10' value='" + EstimatedOutsourceCode + "'>"
				          + "<input type='text' name='EstimatedOutsourceDate[" + counter_o + "]' id='EstimatedOutsourceDate[" + counter_o + "]' size='10' value='" + EstimatedOutsourceDate
						  +	"' onclick= '$(this).datepicker({changeMonth: true, changeYear: true, dateFormat: \"yy/mm\""
					      +","
						  + "beforeShow: function(input, inst) {"
						  +	"  var calendar = inst.dpDiv; "
						  + "  setTimeout(function() { "
						  + "      calendar.position({ "
						  + "			my: \"left bottom\", "
						  + " 		at: \"left top\", "
						  + "		of: input "
						  + "}); "
						  + "}, 1); "
						  + "} "	  	  	  	   	  	  	  
						  +"}); "
						  +"$(this).datepicker(\"show\")'>";

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s