jQuery UI の datepicker の基本オプションとダイアログ(datepicker)の利用

ダイアログの初期値をフィールドから取得し、変更した日付をフィールドへ戻しています

ダイアログの表示では、オプション引数の後(datepicker_option の次)に [150, 80] というような、x,y 座標を指定できます。指定しなければ画面中央に表示されます。指定した場合は、画面の左上からの座標になります。

Date:

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
<script type="text/javascript">
var datepicker_option = {
	dateFormat: 'yy/mm/dd',
	dayNamesMin: ['日', '月', '火', '水', '木', '金', '土'],
	monthNames:  ['１月', '２月', '３月', '４月', '５月', '６月', '７月', '８月', '９月', '１０月', '１１月', '１２月'],
	showMonthAfterYear: true,
	yearSuffix: '年',
	changeYear: true,
	showAnim: 'fadeIn',
	yearRange: "c-70:c"
}
$(function() {
	$( "#datepicker" ).datepicker(datepicker_option);
	$( "#datetDialog" ).click(
		function() {
			$( "#datepicker" ).datepicker(
				"dialog",
				$("#datepicker").val(),
				function(sdate) {
					$("#datepicker").val( sdate );
				},
				datepicker_option
			);
		}
	);
});

</script>

Date: <input type="text" id="datepicker">
<br />
<input
	id="datetDialog"
	type="button"
	value="dialog">

関連する記事

ブログで jQuery を使用するのに、全ての記事で使うわけでは無いので、記事毎でロードする