HARD DAY'S NIGHT別館

当サイトへお越しいただきありがとうございます。 実務に生かせるような技術・ライブラリを使った簡単なサンプルを公開してゆきます。

jqGrid に jQuery UI Datepicker(カレンダー)を表示するサンプル

jqGrid のセルに日付データを入力または編集する際に jQuery Datepicker(カレンダー)を表示します。
行を選択するとセルが編集可能になり、日付カラムにフォーカスがうつるとカレンダーが表示されます。

コード


$(function() {
    var mydata = [
        {rid:"1", sdate:"2012/09/30", memo:"クリックしてメモを入力してください。"},
        {rid:"2", sdate:"2012/10/05", memo:"クリックしてメモを入力してください。"},
        {rid:"3", sdate:"2012/10/31", memo:"クリックしてメモを入力してください。"},
    ];
    var lastRow;

    jQuery("#list").jqGrid({
        data: mydata,
        datatype: "local",
        colNames:['ID', '日付', 'メモ'],
        colModel:[
            {index:'rid', name:'rid', width:50, editable:false },
            {index:'sdate', name:'sdate', width:150, editable:true, sorttype:"date" },
            {index:'memo', name:'memo', width:250, editoptions:{maxlength:50}, editable:true },
        ],
        width: 450,
        height: 250,
        caption: 'メモ一覧',
        onSelectRow: function(rowid) {
            if (rowid && rowid !== lastRow) {
                // 最後に編集中の行を保存
                jQuery('#list').saveRow(lastRow);
                // あらたに選択された行を編集可にする
                jQuery('#list').editRow(rowid, true, showDatePicker);
                // 現在編集中の行を記録
                lastRow = rowid;
            }
        },
        editurl:"jqgrid_postdata.php"
    }); 
});
// 選択された行の日付カラムに DatePicker を表示
function showDatePicker(rowid) {
    jQuery("#" + rowid + "_sdate", "#list").datepicker();
}
	

HTMLコード


<table id="list">
</table>