更新日: 2016年4月6日
開発記録

指定の曜日から日付を取得するツール(JavaScript)

西暦年と何月、第何の何曜日かを指定して、その日付を取得するツールを作りました。ご利用お願いいたします！現在日時との日数の差も表示します。

【お知らせ】英単語を画像イメージで楽に暗記できる辞書サイトを作りました。英語学習中の方は、ぜひご利用ください！

画像付き英語辞書 Imagict | 英単語をイメージで暗記
【開発記録】
英単語を画像イメージで暗記できる英語辞書サービスを作って公開しました

指定週の曜日から日付を取得

年（西暦 ※半角数字4桁で入力）
月
第
曜日

指定した曜日の日付

今日の日付との日数の差

ソースコード

JavaScript と HTML のソースコードも掲載しておきますね。jQuery を使っています。

HTML

<p>
  <input type="text" id="what-year" value="2016" /> 年（西暦 ※半角数字4桁で入力）
</p>

<p>
  <select id="what-month">
    <option value="0">1</option>
    <option value="1">2</option>
    <option value="2">3</option>
    <option value="3">4</option>
    <option value="4">5</option>
    <option value="5">6</option>
    <option value="6">7</option>
    <option value="7">8</option>
    <option value="8">9</option>
    <option value="9">10</option>
    <option value="10">11</option>
    <option value="11">12</option>
  </select> 月
</p>

<p>第
  <select id="what-turn">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
  </select>
</p>

<p>
  <select id="what-day">
    <option value="0">日</option>
    <option value="1">月</option>
    <option value="2">火</option>
    <option value="3">水</option>
    <option value="4">木</option>
    <option value="5">金</option>
    <option value="6">土</option>
  </select> 曜日
</p>

<p>
  <button id="get-specified-date">日付を取得</button>
</p>

<div id="specified-date"></div>
<div id="days-diff"></div>

<p>

<input type="text" id="what-year" value="2016" /> 年（西暦 ※半角数字4桁で入力）

</p>

<p>

</select> 月

</p>

<p>第

</select>

</p>

<p>

</select> 曜日

</p>

<p>

<button id="get-specified-date">日付を取得</button>

</p>

JavaScript（jQuery）

// 指定した曜日から日付を返す
function getDateFromWeek(year, month, turn, weekday) {
    if (!year.match(/^[1-9][0-9]{3}$/)) {
        alert("西暦は有効な半角数字4桁で入力してください。");
        return null;
    }
    // 月初の日
    var firstDateOfMonth = new Date(year, month, 1);
    // 月初の曜日
    var firstDayOfWeek = firstDateOfMonth.getDay();

    // 指定された曜日が最初に出現する日付を求める
    var firstWeekdayDate = null;
    if (firstDayOfWeek == weekday) {
        // 月初の曜日が指定曜日の時
        firstWeekdayDate = new Date(year, month, 1);
    } else if (firstDayOfWeek < weekday) {
        // 月初の曜日 < 指定の曜日の時
        firstWeekdayDate = new Date(year, month, 1 + (weekday - firstDayOfWeek));
    } else if (weekday < firstDayOfWeek) {
        // 指定の曜日 < 月初の曜日の時
        firstWeekdayDate = new Date(year, month, 1 + (7 - (firstDayOfWeek - weekday)));
    } else {
        ;
    }
    // 第○の指定の分だけ日数を足す
    var firstWeekDay = firstWeekdayDate.getDate();
    var specifiedDate = new Date(year, month, firstWeekDay + 7 * (turn - 1));
    if (specifiedDate.getMonth() != month) {
        return null;
    }
    return specifiedDate;
}

// 現在の日付との日数差を返す
function getDaysDiff(now, specifiedDate) {
    var currentYear =  now.getFullYear();
    var currentMonth = now.getMonth();
    var currentDay =  now.getDate();
    var currentDate = new Date(currentYear, currentMonth, currentDay);
    var timeDiff = specifiedDate.getTime() - currentDate.getTime();
    var daysDiff = Math.floor(timeDiff / (1000 * 60 * 60 * 24));
    return daysDiff;
}

// フォームから入力を受けて結果を表示
$("#get-specified-date").click(function () {
    // 日付を取得
    var year  = $("#what-year").val();
    var month = $("#what-month").val();
    var turn  = $("#what-turn").val();
    var day   = $("#what-day").val();
    var date  = getDateFromWeek(year, month, turn, day);
    if (date == null) {
        $("#specified-date").html('存在しません。');
        $("#days-diff").html('');
        return;
    }
    var dateStr = date.getFullYear() + '年' + (date.getMonth() + 1) + '月' + date.getDate() + '日';

    // 日数の差を計算
    var now = new Date();
    var daysDiff = getDaysDiff(now, date);
    var daysDiffStr = '';
    if (daysDiff == 0) {
        daysDiffStr = '今日です。';
    } else if (daysDiff < 0) {
        daysDiffStr = -daysDiff + '日前です。';
    } else if (0 < daysDiff) {
        daysDiffStr = daysDiff + '日後です。';
    }
    // 表示
    $("#specified-date").html(escapeHTML(dateStr));
    $("#days-diff").html(escapeHTML(daysDiffStr));
});

// HTMLエスケープ
function escapeHTML(val) {
    return $('<span>').text(val).html();
};

// 指定した曜日から日付を返す

function getDateFromWeek(year, month, turn, weekday) {

if (!year.match(/^[1-9][0-9]{3}$/)) {

alert("西暦は有効な半角数字4桁で入力してください。");

return null;

}

// 月初の日

var firstDateOfMonth = new Date(year, month, 1);

// 月初の曜日

var firstDayOfWeek = firstDateOfMonth.getDay();

// 指定された曜日が最初に出現する日付を求める

var firstWeekdayDate = null;

if (firstDayOfWeek == weekday) {

// 月初の曜日が指定曜日の時

firstWeekdayDate = new Date(year, month, 1);

} else if (firstDayOfWeek < weekday) {

// 月初の曜日 < 指定の曜日の時

firstWeekdayDate = new Date(year, month, 1 + (weekday - firstDayOfWeek));

} else if (weekday < firstDayOfWeek) {

// 指定の曜日 < 月初の曜日の時

firstWeekdayDate = new Date(year, month, 1 + (7 - (firstDayOfWeek - weekday)));

} else {

;

}

// 第○の指定の分だけ日数を足す

var firstWeekDay = firstWeekdayDate.getDate();

var specifiedDate = new Date(year, month, firstWeekDay + 7 * (turn - 1));

if (specifiedDate.getMonth() != month) {

return null;

}

return specifiedDate;

}

// 現在の日付との日数差を返す

function getDaysDiff(now, specifiedDate) {

var currentYear = now.getFullYear();

var currentMonth = now.getMonth();

var currentDay = now.getDate();

var currentDate = new Date(currentYear, currentMonth, currentDay);

var timeDiff = specifiedDate.getTime() - currentDate.getTime();

var daysDiff = Math.floor(timeDiff / (1000 * 60 * 60 * 24));

return daysDiff;

}

// フォームから入力を受けて結果を表示

$("#get-specified-date").click(function () {

// 日付を取得

var year = $("#what-year").val();

var month = $("#what-month").val();

var turn = $("#what-turn").val();

var day = $("#what-day").val();

var date = getDateFromWeek(year, month, turn, day);

if (date == null) {

$("#specified-date").html('存在しません。');

$("#days-diff").html('');

return;

}

var dateStr = date.getFullYear() + '年' + (date.getMonth() + 1) + '月' + date.getDate() + '日';

// 日数の差を計算

var now = new Date();

var daysDiff = getDaysDiff(now, date);

var daysDiffStr = '';

if (daysDiff == 0) {

daysDiffStr = '今日です。';

} else if (daysDiff < 0) {

daysDiffStr = -daysDiff + '日前です。';

} else if (0 < daysDiff) {

daysDiffStr = daysDiff + '日後です。';

}

// 表示

$("#specified-date").html(escapeHTML(dateStr));

$("#days-diff").html(escapeHTML(daysDiffStr));

});

// HTMLエスケープ

function escapeHTML(val) {

return $('<span>').text(val).html();

};

以上ですが、ご利用お願いいたします！

Rails と Swift はぜひ押さえておきたいです。

本気ではじめるiPhoneアプリ作り Xcode 7.x+Swift 2.x対応黒帯エンジニアがしっかり教える基本テクニック (ヤフー黒帯シリーズ)

パーフェクト Ruby on Rails

>> 次の記事 : Wunderlistからリマインダー(iPhone/iCloud)への移行ツールを作りました！

<< 前の記事 : 書評や商品レビューのブログ記事のみにGoogle検索を絞り込むブックマークレット

初回公開日: 2016年4月5日

指定の曜日から日付を取得するツール(JavaScript)

指定週の曜日から日付を取得

指定した曜日の日付

今日の日付との日数の差

ソースコード

Leave Your Message! コメントをキャンセル