カレンダーを使用する

javascript jqGrid

jQuery UIのカレンダーを使用するサンプル。
以下の前準備が必要なので注意。いずれもコピー元はjQuery UIのフォルダ以下にあります。

  • jquery-ui-1.7.2.custom.js を js フォルダにコピーし、インクルードする
  • jquery-ui-i18n.js を js/i18n フォルダにコピーし、インクルードする
  • ui.datepicker.css を css フォルダにコピーし、インクルードする
  • calendar.gif を css/images フォルダにコピーする
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>カレンダーサンプル</title>
  
<link rel="stylesheet" type="text/css" media="screen" href="css/jquery-ui-1.7.2.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.datepicker.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>

<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.js"></script>
<script type="text/javascript" src="js/i18n/jquery-ui-i18n.js"></script>

<script type="text/javascript" src="js/i18n/jquery.jqGrid.min.js"></script>
<script type="text/javascript" src="js/jquery.jqGrid.min.js"></script>

<script type="text/javascript">
function pickdates(id)
{
	var opts = {};
	$.extend(opts, $.datepicker.regional['ja']);
	opts.dateFormat      = "yy-mm-dd";
	opts.showButtonPanel = true;
	opts.showOn          = 'button';
	opts.buttonImage     = 'css/images/calendar.gif';
	opts.buttonImageOnly = false;
	opts.showButtonPanel = true;
	opts.changeYear      = true;
	opts.changeMonth     = false;

	jQuery("#"+id+"_birthday","#list").datepicker(opts);
}

jQuery(document).ready(function()
{
	var last_id=null;

	jQuery("#list").jqGrid({
		datatype: "local",
		colNames:['従業員番号', '名前', '誕生日'],
		colModel:[
			{name:'employee_no', editable:true},
			{name:'name'       , editable:true},
			{name:'birthday'   , editable:true, editoptions:{size:10}},
		],
		onSelectRow: function(id)
		{
			if(id && id!==last_id)
			{
				jQuery('#list').restoreRow(last_id);
				jQuery('#list').editRow(id, false, pickdates);
				last_id = id;
			}
		},
		caption: 'カレンダー'
	});

	var mydata = [
		{employee_no:"1",name:"test1",birthday:"2009-01-01"},
		{employee_no:"2",name:"test2",birthday:"2009-02-01"},
		{employee_no:"3",name:"test3",birthday:"2009-03-01"},
	];

	for(var i=0;i<=mydata.length;i++)
		jQuery("#list").addRowData(undefined,mydata[i]);
});
</script>
</head>
<body>

<table id="list" class="scroll" cellpadding="0" cellspacing="0"></table>

</body>
</html>