良く使う、Dateオブジェクトについて、まとめてみました。
(個人的にはどんどん追記していきたい)
目次
-
Dateオブジェクトとは
-
呼び出し方
-
日時を読み取るメソッド
-
日時を変更するメソッド
-
使い方
-
Reactライブラリ
1. Dateオブジェクトとは
カレンダー作成や日付取得に用いるオブジェクトです。
2. 呼び出し方
Date型としてDateオブジェクトを呼び出します。
const now :Date = new Date();
3. 日時を読み取るメソッド
| メソッド名 | 説明 |
|---|---|
| getFullYear() | 年を4桁で返す(例: 2022) |
| getMonth() | 月(0-11)を返す |
| getDate() | 日(1-31を返す) |
| getDay() | 曜日(0-6)を返す ※0は日曜日 |
| getHours() | 時間(0-23)を返す |
| getMinutes() | 分(0-59)を返す |
| getSeconds() | 秒(0-59)を返す |
| getMilliseconds() | ミリ秒(0-999)を返す |
| getTime() | 1970年1月1日00:00:00からの経過時間をミリ秒単位の数値で返す |
| toLocaleString() | 言語に合わせた日時の文字列を返す(2022/12/25 9:15:00など) |
4. 日時を変更するメソッド
カレンダーで予定を設定するのに使用したりします。
| メソッド名 | 説明 |
|---|---|
| setFullYear(x) | 引数で設定した年を設定する |
| setMonth(x) | 引数で設定した月を設定する(0-11) |
| setDate(x) | 引数で設定した日(1-31)を設定する |
| setHours(x) | 引数で設定した時間(0-23)を設定する |
| setMinutes(x) | 引数で指定した分(0-59)を設定する |
| setSeconds(x) | 引数で指定した秒(0-59)を設定する |
| setMilliseconds(x) | 引数で指定したミリ秒(0-999)を設定する |
指定した値が月末の日付を超える値を渡すと,
超えた日数は予定から繰り上がり、
月も同じように超えた場合は次の年に自動で置き換えられます。
5. 使い方
①日付を取得する方法
const now :Date = new Date(); //現在の日時を表すオブジェクト
let year:number = now.getFullYear(); // 2022
let date:number = now.getDate();
date.setDate(now.getDate() +10); //今日から10日後に日時を設定する
②今月の初日は何曜日かを取得する方法
//今日の日付を取得
const date : Date = new Date(); -> 2023/12/29
//今月の初日に変更
date.setDate(1); -> 2023/12/1
//初日の曜日を取得
const day:number = date.getDay(); -> 5(つまり金曜日)
③今月の末尾を取得する方法
//わざと1か月進める
date.setMonth(date.getMonth() +1); -> 1(12月から1か月進めたので)
// 日付を0に設定する(Dateの範囲が1-31なため、はみ出した分は前月へ繰り越される)
day = date.setDate(0); -> 2023/12/31
//dayの中の日付部分のみ取り出す
days:number = day.getDate(); -> 31
6. Reactライブラリ
同じような機能を持ったライブラリがReactにあったので紹介します。
この説明もしていきたいなあ。