【保存版】JavaScriptで日付処理をマスターしよう！曜日取得から応用例まで

2024-06-30

JavaScriptとjQueryで日付から曜日を取得する方法

JavaScriptで日付から曜日を取得する方法

JavaScriptには、日付を扱うための Date オブジェクトが用意されています。このオブジェクトには、様々なメソッドが用意されており、その中の getDay() メソッドを使うことで、指定された日付の曜日を取得することができます。

// 特定の日付の曜日を取得
const targetDate = new Date('2024-06-29'); // 2024年6月29日
const day = targetDate.getDay();
console.log(day); // 6 (土曜日)

// 現在の日付の曜日を取得
const today = new Date();
const todayDay = today.getDay();
console.log(todayDay); // 6 (土曜日)

上記のように、getDay() メソッドは、0を日曜日、1を月曜日、...6を土曜日として、数値で曜日を返します。

jQueryを使う場合は、datepicker プラグインなどを利用することで、より簡単に日付から曜日を取得することができます。

jQuery UIとdatepickerプラグインをを読み込む
カレンダー要素を作成し、datepickerプラグインを適用する
onSelect イベントを設定し、選択された日付の曜日を取得する

<!DOCTYPE html>
<html>
<head>
  <title>日付から曜日を取得</title>
  <script src="https://jquery.com/"></script>
  <script src="https://jqueryui.com/"></script>
  <link rel="stylesheet" href="https://jqueryui.com/download/all/">
  <script>
    $(function() {
      $("#datepicker").datepicker({
        onSelect: function(date, instance) {
          const day = new Date(date).getDay();
          const dayName = ["日", "月", "火", "水", "木", "金", "土"][day];
          console.log(dayName); // 選択された日付の曜日を出力
        }
      });
    });
  </script>
</head>
<body>
  <p>カレンダーから日付を選択してください：</p>
  <input type="text" id="datepicker">
</body>
</html>

上記のように、datepickerプラグインの onSelect イベントを使うことで、選択された日付の曜日を取得することができます。

Moment.jsライブラリを読み込む
Moment.jsオブジェクトを作成し、format() メソッドを使って曜日を取得する

<!DOCTYPE html>
<html>
<head>
  <title>日付から曜日を取得</title>
  <script src="https://momentjs.com/"></script>
  <script>
    const targetDate = moment('2024-06-29'); // 2024年6月29日
    const dayName = targetDate.format('dddd'); // 曜日を取得
    console.log(dayName); // 土曜日
  </script>
</head>
<body>
</body>
</html>

上記のように、Moment.jsライブラリの format() メソッドを使うことで、指定された形式で曜日を取得することができます。

まとめ

JavaScriptとjQueryを使って日付から曜日を取得する方法について解説しました。用途に合わせて、適切な方法を選択してください。

補足

上記のコードはあくまで例であり、状況に合わせて適宜修正してください。
曜日を取得する他にも、Date オブジェクトやjQuery UI datepickerプラグイン、Moment.jsライブラリを使って、様々な日付操作を行うことができます。

JavaScriptのみで曜日を取得

// 特定の日付の曜日を取得
const targetDate = new Date('2024-06-29'); // 2024年6月29日
const day = targetDate.getDay();
const dayNames = ["日", "月", "火", "水", "木", "金", "土"];
console.log(dayNames[day]); // 土曜日

// 現在の日付の曜日を取得
const today = new Date();
const todayDay = today.getDay();
console.log(dayNames[todayDay]); // 土曜日

jQuery UI datepickerプラグインを使って曜日を取得

<!DOCTYPE html>
<html>
<head>
  <title>日付から曜日を取得</title>
  <script src="https://jquery.com/"></script>
  <script src="https://jqueryui.com/"></script>
  <link rel="stylesheet" href="https://jqueryui.com/download/all/">
  <script>
    $(function() {
      $("#datepicker").datepicker({
        onSelect: function(date, instance) {
          const day = new Date(date).getDay();
          const dayName = ["日", "月", "火", "水", "木", "金", "土"][day];
          console.log(dayName); // 選択された日付の曜日を出力
        }
      });
    });
  </script>
</head>
<body>
  <p>カレンダーから日付を選択してください：</p>
  <input type="text" id="datepicker">
</body>
</html>

Moment.jsライブラリを使って曜日を取得

<!DOCTYPE html>
<html>
<head>
  <title>日付から曜日を取得</title>
  <script src="https://momentjs.com/"></script>
  <script>
    const targetDate = moment('2024-06-29'); // 2024年6月29日
    const dayName = targetDate.format('dddd'); // 曜日を取得
    console.log(dayName); // 土曜日
  </script>
</head>
<body>
</body>
</html>

JavaScriptで日付から曜日を取得するその他の方法

switch式を使う

// 特定の日付の曜日を取得
const targetDate = new Date('2024-06-29'); // 2024年6月29日
const day = targetDate.getDay();

switch (day) {
  case 0:
    console.log("日曜日");
    break;
  case 1:
    console.log("月曜日");
    break;
  case 2:
    console.log("火曜日");
    break;
  case 3:
    console.log("水曜日");
    break;
  case 4:
    console.log("木曜日");
    break;
  case 5:
    console.log("金曜日");
    break;
  case 6:
    console.log("土曜日");
    break;
  default:
    console.log("不正な日付です");
}

DateオブジェクトのtoLocaleDateString()メソッドを使う

// 特定の日付の曜日を取得
const targetDate = new Date('2024-06-29'); // 2024年6月29日
const dayName = targetDate.toLocaleDateString('ja-JP', { weekday: 'long' });
console.log(dayName); // 土曜日

// 現在の日付の曜日を取得
const today = new Date();
const todayDayName = today.toLocaleDateString('ja-JP', { weekday: 'long' });
console.log(todayDayName); // 土曜日

Intl APIを使う

// 特定の日付の曜日を取得
const targetDate = new Date('2024-06-29'); // 2024年6月29日
const dayName = new Intl.DateTimeFormat('ja-JP', { weekday: 'long' }).format(targetDate);
console.log(dayName); // 土曜日

// 現在の日付の曜日を取得
const today = new Date();
const todayDayName = new Intl.DateTimeFormat('ja-JP', { weekday: 'long' }).format(today);
console.log(todayDayName); // 土曜日