サンプルコード calendar_dates.js

/*
 * 運行日編集
 * 呼び出し元にカレンダー等を表示するdivを作成し、BusMap2editRunDates()の引数にdivのidを与える
 * jquery, jquery-ui, jquery-ui.multidatespicker が必要
 */

var basicCond = {
    everyday: {msg:"毎日", days:["mo","tu","we","th","fr","sa","su"]},
    weekday: {msg:"土日を除く毎日",days:["mo","tu","we","th","fr"]},
    weekend: {msg:"土日のみ運行",days:["sa","su"]},
    none: {msg:"定期運行なし",days:[]},
    days: {msg:"曜日指定", days:[], candidates:["mo","tu","we","th","fr","sa","su"]}
};
var holidayCond = {
    include: {msg:"休日運行", sendVal:"include"},
    exclude: {msg:"休日を除く", sendVal:"exclude"},
    none: {msg:"条件なし", sendVal:"none"}
};
var dayofweek = {mo:"月",tu:"火", we:"水", th:"木", fr:"金", sa:"土", su:"日"};
// var holidayOpts = {ho:"休日", ex_ho:"休日を除く",none:"条件無し"};

var formIdName = "BusMap2selectDates";
var divName2confirm;
var BusMap2CalToggleSwitch=false; //trueなら入力欄を閉じる

/*
 * 入力用フォームを生成
 * 引数：入力フォームを表示するdivのid、確認用文字列を表示するdivのid
 */
function BusMap2editRunDates(divName, divName2, submitURL) {

    if($("#"+divName).size()==0) { //指定されたdivが存在しない場合にエラー表示
        $("#body").append(divName +' does not exist');
        return true;
    }
    if($("#"+divName2).size()==0) {
        document.write(divName2 +' does not exist');
        return true;
    }
    divName2confirm = divName2;

    if(BusMap2CalToggleSwitch) { /** トグルスイッチ：入力欄があれば消去**/
        $('#'+divName).html("");
        $('#'+divName2confirm).html("");
        BusMap2CalToggleSwitch=false;
        return;
    }

    BusMap2CalToggleSwitch= true;
    $("#"+ divName).append("<h3>基本運行日</h3>");
    var $editRunDatesForm = $("<form/>",{id:formIdName, name:formIdName, action:submitURL, method:"POST"});
    $("#"+ divName).append($editRunDatesForm);

    for(var n in basicCond) { //基本設定
        var $obj = $("<input>",{type:"radio", name:"basicCond", value:n});
        $("#"+formIdName).append($obj);
        $("#"+formIdName).append(basicCond[n].msg);
    }
    $("#"+formIdName+' [name="basicCond"][value="everyday"]').attr("checked","checked");

    for(var w in dayofweek) { // 曜日指定項目
        var $obj = $("<input>",{type:"checkbox", name:"dayofweek[]", value:w});
        $("#"+formIdName).append($obj);
        $("#"+formIdName).append(dayofweek[w]);
    }
    // $objのonclick関数に曜日指定チェックボックスのチェックを外す関数をつける
    $("#"+formIdName + ' [name="basicCond"][value!="days"]')
        .change(function() {
            $("#"+formIdName+ ' [name="dayofweek[]"]').attr("checked",false);
        });
    $("#"+formIdName + ' [name="dayofweek[]"]')
        .change(function() {
            $("#"+formIdName+ ' [name="basicCond"]').val(["days"]); // valの引数を配列にする必要がある?
        });

    $("#"+formIdName).append("<br/><h3>休日運行（基本設定への追加条件）</h3>");
    for(var n in holidayCond) { // 休日指定項目
        var $obj = $("<input>",{type:"radio", name:"holidayCond", value:holidayCond[n].sendVal});
        $("#"+formIdName).append($obj);
        $("#"+formIdName).append(holidayCond[n].msg);
    }
    $("#"+formIdName+' [name="holidayCond"]').attr("checked","checked");
    $("#"+formIdName).append("<br/>");

    // apppend calendars for running dates
    $("#"+formIdName).append("<h3>基本日に追加・除外する日の指定</h3>");
    var $temp =  $("<div/>",{id:"BusMap2calendar"});
    $("#"+formIdName).append($temp);
    $("#BusMap2calendar").append($("<table/>",{id:"BusMap2calTable"}));
    $("#BusMap2calTable")
        .append('<tr><th>運休日指定</th><th>運行日指定</th></tr>')
        .append('<tr><td><div id="ex_dates"></div></td><td><div id="add_dates"></div></td></tr>');


    $('#'+formIdName)
        .append('<input type="button" value="確認" onclick="getSelectedDate()"><br/>')

    var today = new Date();
    var y = today.getFullYear();
    $('#ex_dates').multiDatesPicker({
        dateFormat: "yy-mm-dd"
        //   numberOfMonths: [1,3]
        //            showCurrentAtPos: today.getMonth()
    });
    $('#add_dates').multiDatesPicker({
        dateFormat: "yy-mm-dd"
        //   numberOfMonths: [1,3]
        //              showCurrentAtPos: today.getMonth()
    });
}

function getSelectedDate() {
    var listStr='';
    var checkedDayArr = {};
    $('#'+divName2confirm).html("");

    var exDates = $('#ex_dates').multiDatesPicker('getDates');
    exDates.sort();
    var availableDates = $('#add_dates').multiDatesPicker('getDates');
    availableDates.sort();
    var listStr="<table><th>基本運行日</th><th>基本運行から除く日</th><th>運行日（基本運行日がある場合は追加）</th></tr><tr><td>";

    //基本条件
    var selectedCond = $("#"+formIdName + ' [name="basicCond"]:checked').val();
    if(selectedCond=="days") {
        $('#'+formIdName + ' [name="dayofweek[]"]:checked').map(function() {
            listStr+= dayofweek[$(this).val()] +"<br/>";
            checkedDayArr[$(this).val()]= dayofweek[$(this).val()];
        });
    } else listStr += basicCond[selectedCond].msg;


    // 休日条件文字列
    var holidayCondVal = $('#'+formIdName + ' [name="holidayCond"]:checked').val();
    listStr +="<br/>";
    listStr += holidayCondVal!="none"? holidayCond[holidayCondVal].msg:"";
    listStr+= "</td><td>";

    // 日にち別指定文字列
    for(var i in exDates) {
        listStr += exDates[i] + "<br/>";
    }
    listStr += "</td><td>";
    for(var i in availableDates) {
        listStr += availableDates[i] +"<br/>";
    }
    listStr += "</tr></table>";

//    $('#'+divName2confirm).html(listStr); /* 上記のテーブル文字列はテスト用 */

    var messageStr = "";
    if(selectedCond=="days") {
        for(var i in checkedDayArr) messageStr += checkedDayArr[i] + ",";
        messageStr = messageStr.replace(/,$/,"");
        //カンマをとる
    } else if(selectedCond!="none")
        messageStr = basicCond[selectedCond].msg;

    var excludeMsg="";
    switch (holidayCondVal) {
    case "include": messageStr += holidayCond[holidayCondVal].msg; break;
    case "exclude": excludeMsg = "（ただし、休日";
    }
    if(exDates.length>0) {
        excludeMsg += excludeMsg!=""?"、":"（ただし、";
        excludeMsg+=dates2string(exDates);
    }
    if(excludeMsg!="") messageStr += excludeMsg+ "を除く)";

    // $('#'+divName2confirm).append("<br/>メッセージ文："+dayofweek2str(selectedCond,checkedDayArr,holidayCondVal));

    if(availableDates.length>0) {
        if(messageStr!="") messageStr+="及び";
        messageStr += dates2string(availableDates);
    }
    if(messageStr.match(/運行/)==null) messageStr += "運行";

    var $obj = $("<input>",{type:"hidden", name:"message", value:messageStr});
    $("#"+formIdName).append($obj);
    $("#"+formIdName).append(messageStr);


    // 日にち条件をフォームに入れる
    for(var i in exDates) {
        var $obj = $("<input>",{type:"hidden", name:"exclude_dates[]", value:exDates[i]});
        $("#"+formIdName).append($obj);
    }
    listStr += "</td><td>";
    for(var i in availableDates) {
        var $obj = $("<input>",{type:"hidden", name:"available_dates[]", value:availableDates[i]});
        $("#"+formIdName).append($obj);
    }

    $("#"+formIdName).append('<br/><input type="submit" value="送信">');

}

function dates2string(arr) {

    var str =cutYearStr(arr[0]);

    var prevDate = arr[0];
    var contNum = 0;
    var  delimiter= "、";
    for(var i=1; i<arr.length; i++) {
        if(nextDay(prevDate)==arr[i]) {
            contNum++;
        } else {
            prevDateStr = cutYearStr(prevDate);
            currDateStr = cutYearStr(arr[i]);

            if(contNum>1) str+= "〜" + prevDateStr;
            else if(contNum==1) str+= "、"+ prevDateStr;
            str += "、"+currDateStr;
            contNum = 0;
        }
        prevDate = arr[i];
    }
    var parts = arr[arr.length-1].split("-");
    var currDateStr = cutYearStr(arr[arr.length-1]);

    if(contNum>1) str+= "〜" + currDateStr;
    else if(contNum==1) str+= "、"+ currDateStr;

    return str;
}

function nextDay(dayStr) { // yyyy-mm-dd
    var date = new Date();
    var parts = dayStr.split('-');
    date.setFullYear(parts[0], parts[1]-1, parts[2]);
    date.setTime(date.getTime()+86400000);
    return $.datepicker.formatDate('yy-mm-dd',date);
}

function cutYearStr(str) { // yyyy-mm-ddからmm-ddへ
    var parts = str.split("-");
    return parts[1]+"-"+parts[2];
}