HARD DAY'S NIGHT別館

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

jQuery UI Datepicker(カレンダー)を不特定多数のフィールドに動的に表示するサンプル

日付フィールドに DatePicker を動的に生成または消滅させることができます。フィールド数が不特定多数の場合に役立ちます。

このサンプルではテーブルの行を追加して日付とコメントを入力する例です。日付のフィールドにフォーカスがいくとカレンダーを表示します。

コメントを追加:
日付 コメント

コード


// append_row: テーブルに行を追加
function appendRow() {
    var objTBL = document.getElementById("list");
    if (!objTBL) {
        return;
    }
    var cnt = objTBL.rows.length;

    // 最終行に新しい行を追加
    var row = objTBL.insertRow(cnt);
    // 列の追加
    var c1 = row.insertCell(0);
    var c2 = row.insertCell(1);
    var c3 = row.insertCell(2);

    // 各列にスタイルを設定
//  c1.style.cssText = "";
//  c2.style.cssText = "";
//  c3.style.cssText = "";
    
    // 各列に表示内容を設定
    c1.innerHTML = '<input type="text" name="report_date' + cnt + '" id="report_date' + cnt + '" value="" maxlength="20" />';
    c2.innerHTML = '<input type="text" name="comment' + cnt + '" id="comment' + cnt + '" value="" size="50" maxlength="100" />';
    c3.innerHTML = '<input type="button" name="edit_row' + cnt + '" id="edit_row' + cnt + '" value="確定" onclick="editRow(this)">';
    
    showDatePicker(cnt);
    // 追加した行の入力フィールドへフォーカスを設定
    var objInp = document.getElementById("report_date" + cnt);
    if (objInp) {
        objInp.focus();
    }
}

// editRow: 編集ボタン該当行の内容を入力・編集またモード切り替え
function editRow(obj)
{
    var objTR = obj.parentNode.parentNode;

    if (!objTR) {
        return;
    }

    var rowId = objTR.sectionRowIndex;
    var objDate = document.getElementById("report_date" + rowId);
    var objComm = document.getElementById("comment" + rowId);
    var objBtn = document.getElementById("edit_row" + rowId);

    if (!objDate || !objComm || !objBtn)
        return;
    
    // モードの切り替えはボタンの値で判定   
    if (objBtn.value == "編集")
    {
        showDatePicker(rowId);

        objDate.style.cssText = "border:1px solid #888;"
        objDate.readOnly = false;
        objComm.style.cssText = "border:1px solid #888;"
        objComm.readOnly = false;
        objBtn.value = "確定";

        objDate.focus();
    }
    else
    {
        hideDatePicker(rowId);

        objDate.style.cssText = "border:none;"
        objDate.readOnly = true;
        objComm.style.cssText = "border:none;"
        objComm.readOnly = true;
        objBtn.value = "編集";
    }
}

// 選択された行の日付カラムに DatePicker を表示
function showDatePicker(rowid) {
    jQuery("#report_date" + rowid).datepicker();
}

// 選択された行の日付カラムから DatePicker を非表示
function hideDatePicker(rowid) {
    jQuery("#report_date" + rowid).datepicker("destroy");
}
	

HTMLコード


<form id="frm" name="frm" method="GET" action="">
    <div>コメントを追加:<input type="button" name="append_row" id="append_row" value="追加" onClick="return appendRow();" /></div>
    <table id="list" border="1">
        <colgroup style="width:30%;"></colgroup>
        <colgroup style="width:50%;"></colgroup>
        <colgroup style="width:20%;"></colgroup>
        <tr>
            <th>日付</th>
            <th>コメント</th>
            <th></th>
        </tr>
        <tr>
            <td><input type="text" name="report_date1" id="report_date1" value="2014/02/16" maxlength="20" style="border:none;" readonly /></td>
            <td><input type="text" name="comment1" id="comment1" value="編集ボタンをクリックすると入力できます。" size="50" maxlength="100"  style="border:none;" readonly /></td>
            <td><input type="button" name="edit_row1" id="edit_row1" value="編集" onclick="editRow(this)"></td>
        </tr>
    </table>
</form>