テキストボックスに入力した日付から曜日を表示する方法!Javascriptの勉強

Javascriptで曜日表示したことないなと思い、曜日表示をさせてみました!

テキストボックスに入力した日付(文字列)から曜日を表示する

曜日を取得するには、Date.getDay()メソッドを使用します。

使い方

Date型の変数.getDay()

変数を使用すると、数値が返ってきます。

0 = 日、1 = 月、 2 = 火、3 = 木 ...のように数値が返ってきます。

そのため以下のような配列を用意してDate.getDay()メソッドで取得した数値の配列のインデックスを呼び出せば曜日を取得することが可能です。

let dayOfTheWeekStr = ["日", "月", "火", "水", "木", "金", "土"];

日付から曜日を表示するサンプルコード

See the Pen 取得した日付の曜日を表示する by Nakamoto (@programmerlife) on CodePen.

CodePenと同内容ですが、Javascriptを貼り付けます。

function blurFunction() {
// テキストボックスの日時をDate型にし、曜日を取得する

    // 文字列から年月日を抜き出しDate型に
    let date_str = document.getElementsByName("date_str");
    let date_str_value = date_str[0].value;
    if (date_str_value != "") {
        let year = parseInt(date_str_value.substr(0, 4), 10);
        let month = parseInt(date_str_value.substr(5, 2), 10) - 1;
        let day = parseInt(date_str_value.substr(8, 2), 10);
        let valueDate = new Date(year, month, day);

        // 曜日の配列を作成
        let dayOfTheWeekStr = ["日", "月", "火", "水", "木", "金", "土"];

        // 入力された日付の曜日を取得(数値)
        let dayOfTheWeekNum = valueDate.getDay();

        // 配列の曜日の文字列から曜日の数値の配列を表示するアラート
        alert(dayOfTheWeekStr[dayOfTheWeekNum] + "曜日です。");

    }
}

おわり

曜日を表示するのは思ったより難しくなくて安心しました。
case文で曜日作ろうかと思いましたが、配列が一般的みたいですね。
最近サボってたので、リハビリにちょうど良かったです。

Javascript

Posted by Nakamoto