Core > 日付の操作

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

by s_hiroshi

HTML

<div>
    <fieldset>
        <p>
            <label for="month">month</label>:
            <input id="month" name="month" type="text" size="2"> (1〜12)
        <p>
        <p>
            <label for="date">date</label>:
            <input id="date" type="text" size="14"> (1,2,3)
        </p>
    </fieldset>
    <textarea id="html"></textarea>
</div>

CSS

p {
    margin-bottom: 15px;
}
input {
    padding: 5px;
    font-size: 123.1%;
    line-height: 2;
    
}
fieldset {
    margin-bottom: 20px;
}

JavaScript

$('#date').blur(function(evt) {
    var now = new Date(),
        dayOfWeek = ['日', '月', '火', '水', '木', '金', '土'],
        resultHtml = '';
    // 月の設定
    if ($('#month').val() !== '') {
        // 月は0(1月)～11(12月)。 日は1～始まる
        month = parseInt($('#month').val(), 10) - 1;
    } else {
        month = now.getMonth();
    }
    //　マッチと加工
    $(this).val().replace(/(\d+)\s?(,|$)/g, function(x, y, z) {
        var year, date;
        // getYearはブラウザで挙動が異なるので使わない
        year = now.getFullYear();
        date = new Date(year, month, y);
        // getDayの戻り値は数字0～6, 0は日曜日
        resultHtml += y + '日(' + dayOfWeek[date.getDay()] + ')<br>' + '\n';
    });

    $('#html').text(resultHtml);
});