Core > 日付の操作(複数行)

日付の操作ライブラリを目指す。 month: 1 date: 1 2 3 1日(月) 2日(火) 3日(水)

by s_hiroshi

HTML

<div id="example">
    <p>
        変換前<br>
        名前1　１　１０　３０<br>
        名前2　１、　１０、３０
    </p>
    <p>
        変換後<br>
        名前1&lt;br&gt;<br>
        1日(日)&lt;br&gt;<br>
        10日(火)&lt;br&gt;<br>
        30日(月)&lt;br&gt;<br>
        <br>
        名前2&lt;br&gt;<br>
        1日(日)&lt;br&gt;<br>
        10日(火)&lt;br&gt;<br>
        30日(月)&lt;br&gt;<br>
    </p>
</div>
<div id="error"></div>
<div id="formarea">
    <fieldset>
        <label for="month">Month</label>
        <input id="month" name="month" type="text" size="2"> 1〜12 ※空白は今月を指定
    </fieldset>
    <fieldset>
        <label for="date">変換前</label><br />
        <textarea id="date" rows="4" cols="30"></textarea>
    </fieldset>
    <fieldset>
        <label for="result">変換後(HTML)</label><br />
        <textarea id="result" rows="4" cols="30"></textarea>
    </fieldset>
</div>

CSS

body {
    margin: 15px;
}
p {
    margin-bottom: 12px;
}
#error {
    color: #990000;
}
input {
    padding: 2px;
    line-height: 1.5;
    
}
fieldset {
    margin-bottom: 12px;
}
#example {
    font-size: 85%;
    margin-bottom: 30px;
}

JavaScript

// 全角数字を半角数字に変換(toHalfNum)は下記のサイトのスクリプトを利用。
// http://ameblo.jp/pclindesk/entry-10110151969.html

function myError(str) {
    $('#error').text(str);
}


$('#date').blur(function(evt) {
    var i, now = new Date(),
        resultHtml = '',
        rows = [],
        dayOfWeek = ['日', '月', '火', '水', '木', '金', '土'],
        createNewSubStr = function() {
            // 空白を削除
            arguments[0] = arguments[0].replace(/ /, '');
            // 文字列が数字のみ
            if (arguments[0].match(/[^0-9]/) == null) {
                // 月は0(1月)～11(12月) ※ 日は1～始まる
                var year = now.getFullYear(),
                    // getYearはブラウザによって挙動が異なる
                    date = new Date(year, month, arguments[0]);
                resultHtml += arguments[0] + '日(' + dayOfWeek[date.getDay()] + ')<br>' + '\n';
            } else {
                resultHtml += arguments[0] + '<br>' + '\n';
            }
            // 全角（を半角へ(
            // resultHtml = resultHtml.replace(/（/g, '(');
            // 全角）を半角)へ
            // resultHtml = resultHtml.replace(/）/g, ')');
            // 31(火)を31日(火)へ
            resultHtml = resultHtml.replace(/([0-9]+)\(/g, '$1日(')
        },
        // 全角数字を半角数字へ変換
        // 下記のサイトのスクリプト
        // http://ameblo.jp/pclindesk/entry-10110151969.html
        toHalfNum = function(src) {
            return src.replace(/[．０-９（）]/g, function(wc) {
                var zen = "．。０１２３４５６７８９（）",
                    han = "..0123456789()";
                return han[zen.indexOf(wc)];
            });
        };

    // 月の処理(月は0〜11)
    if ($('#month').val() !== '') {
        if (12 < parseInt($('#month').val(), 10)) {
            myError('1〜12を入力');
            return false;
        }
        month = parseInt($('#month').val(), 10) - 1;
    } else {
        month = now.getMonth();
    }
    // 改行で分割
    rows = $(this).val().split('\n');
    // 行ごとの処理
    for (i = 0; i < rows.length; i++) {
        // 全角数字を半角数字へ
        var row = toHalfNum(rows[i]);
        //...