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

カレンダー Javascript


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

作成するもの

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

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



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




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

まずは、表示させるための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()という関数にします。
(関数名が長ったらしいですが。。)

3~7行目で、「今日」の年や月、日、曜日を取得しています。

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

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

注意点

getMonth() + 1」の部分ですが、「getMonth()」だけだと0~11までの数字が返ってくる(1月は0、12月は11)
ので実際の月表示の際は返ってきた値に「+1」してあります。


整形が出来たら、returnの部分で配列に値をいれて関数の呼び出し元に返します。

最後に、作成した関数の実行部分ですが
26行目で先程作った関数を実行したら返った配列の値をそれぞれ書き換えたい要素を指定し、html()で書き換えるだけです。

ブラウザでの表示が↓のように変わると思います(2022/7/11時点)

デモを用意しました。(こちらはボタンクリックで日付が表示されます。)

はじめの日付終わりの日付

以上、「Javascript・jQueryで今週のはじめとおわりの日付を取得する」でした。

間違い等ございましたら、教えていただけますと幸いです。

コメント

タイトルとURLをコピーしました