【Javascript・jQuery】今週のはじめとおわりの日付を取得する

週単位でその週の初めと終わりの日付を表示させることがあったので、Dateオブジェクトを利用して初めの日付と終わりの日付を取得してみたいと思います。

Contents

作成するもの
HTML
JS
注意点

作成するもの

・毎週、日付が更新されるように今日の日付をもとにして今の週の始まりと終わりの日付を取得する関数を作成。

・ページ読み込み後に特定のテキストを取得した日付に書き換える。

今回、参考にさせていただいたサイトになります。

今回はカレンダーが日曜日から始まるものが多いので今週の日曜日から土曜日までの日付を取得します。

まずは、表示させるためのHTMLから

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <title></title>
</head>
<body>
<style>
.weekspanWrap{
padding:3rem 0;
background:#000;
text-align:center;
}
.weekspanWrap .weekspan{
font-weight:bold;
color:#FFF;
}
.weekspanWrap .weekspan span{
margin: 0 1rem;
}
</style>
    <header></header>
    <div class="weekspanWrap">
        <p class="weekspan">
            <span id="startDate">はじめの日付</span>～<span id="endDate">終わりの日付</span>
        </p>
    </div>
    <script src="./js/thisWeekDate.js"></script>
    <footer></footer>
</body>
</html>

まず7行目でjQuery読み込みます。

28行目で「はじめの日付」と「終わりの日付」が入る部分を記述しています。

31行目で日付の取得と書き換えに使用するJSファイルを読み込みます。

続いてJSファイルです。

JS


　　function StartAndEndOfThisWeek(){
        let today = new Date(); //Dateをインスタンス化
        let thisYear = today.getFullYear(); //今年の年を取得
        let thisMonth = today.getMonth();　//今月を取得
        let date = today.getDate(); //今日の日にちを取得
        let dayNum = today.getDay(); //今日の曜日を取得（0～6までの数字でとれる）


        let thisSunday = date - dayNum; //今日の日にちから曜日の数だけ引く
        let thisSaturday = thisSunday + 6  //thisSundayに6を足す（はじめの日から6日後）
        let startTime = new Date(thisYear, thisMonth, thisSunday); // 日曜の0:00
        let endTime = new Date(thisYear, thisMonth, thisSaturday,23,59,59,999); //土曜の23:59


        //ここからは表示したい形に整形
        let startDate =  (startTime.getMonth() + 1) + "/" + startTime.getDate() //日曜日の月日で文字列を作成
        let endDate =  (endTime.getMonth() + 1) + "/" + endTime.getDate() //土曜日の月日で文字列を作成


        return [startDate,endDate] //配列に入れて返す
   　}


      $(window).on('load',function(){ //ページを読み込みこんでから実行
          let thisWeekDate = StartAndEndOfThisWeek()
          $('#startDate').html(thisWeekDate[0])  //「はじめの日付」を書き換え
          $('#endDate').html(thisWeekDate[1])  //「終わりの日付」を書き換え
      })

JSファイルは以上になります。取得した日付を他でも使えるようにStartAndEndOfThisWeek()という関数にします。
（関数名が長ったらしいですが。。）

３～７行目で、「今日」の年や月、日、曜日を取得しています。

10,11行目で今日の日にちをもとに今週の最初と最後を計算して、12,13行目で実際の日時をそれぞれDate関数で取得します。

17,18行目で表示したい形に整形します。（今回は、「月/日」の形です。）