jQueryのdatepickerプラグインで日付を選択・取得する方法

2024-05-25

jQueryで現在の日付を取得する方法

jQueryを使って、現在の日付を簡単に取得する方法をご紹介します。2つの方法を紹介しますので、状況に合わせて使い分けてください。

方法1: new Date() を使う

new Date() コンストラクタを使って、現在の日付を表す Date オブジェクトを作成します。
Date オブジェクトのメソッドを使って、年、月、日などの情報を取り出すことができます。

$(document).ready(function(){
  // 現在の日付を取得
  var now = new Date();

  // 年を取得
  var year = now.getFullYear();

  // 月を取得 (0始まりなので、1を足す)
  var month = now.getMonth() + 1;

  // 日を取得
  var day = now.getDate();

  // 取得した日付を整形して表示
  var formattedDate = year + "-" + month + "-" + day;
  $("#currentDate").html(formattedDate);
});

方法2: jQuery.datepicker プラグインを使う

jQuery UI の datepicker プラグインを導入します。
対象となる要素に datepicker() メソッドを呼び出し、オプションを設定します。
onSelect イベントハンドラを使って、選択された日付を取得します。

$(document).ready(function(){
  // jQuery UI の datepicker プラグインを導入
  $("#datepicker").datepicker();

  // 日付が選択された時のイベントハンドラ
  $("#datepicker").datepicker("option", "onSelect", function(dateText, inst) {
    // 選択された日付を取得
    var selectedDate = new Date(dateText);

    // 年を取得
    var year = selectedDate.getFullYear();

    // 月を取得 (0始まりなので、1を足す)
    var month = selectedDate.getMonth() + 1;

    // 日を取得
    var day = selectedDate.getDate();

    // 取得した日付を整形して表示
    var formattedDate = year + "-" + month + "-" + day;
    $("#currentDate").html(formattedDate);
  });
});

補足

上記のコードはあくまで一例です。必要に応じて、フォーマットや処理内容を変更してください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>現在の日付を取得</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
    $(document).ready(function(){
      // 現在の日付を取得
      var now = new Date();

      // 年を取得
      var year = now.getFullYear();

      // 月を取得 (0始まりなので、1を足す)
      var month = now.getMonth() + 1;

      // 日を取得
      var day = now.getDate();

      // 取得した日付を整形して表示
      var formattedDate = year + "-" + month + "-" + day;
      $("#currentDate").html(formattedDate);
    });
  </script>
</head>
<body>
  <p>現在の日付：</p>
  <span id="currentDate"></span>
</body>
</html>

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>現在の日付を取得</title>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
  <script>
    $(document).ready(function(){
      // jQuery UI の datepicker プラグインを導入
      $("#datepicker").datepicker();

      // 日付が選択された時のイベントハンドラ
      $("#datepicker").datepicker("option", "onSelect", function(dateText, inst) {
        // 選択された日付を取得
        var selectedDate = new Date(dateText);

        // 年を取得
        var year = selectedDate.getFullYear();

        // 月を取得 (0始まりなので、1を足す)
        var month = selectedDate.getMonth() + 1;

        // 日を取得
        var day = selectedDate.getDate();

        // 取得した日付を整形して表示
        var formattedDate = year + "-" + month + "-" + day;
        $("#currentDate").html(formattedDate);
      });
    });
  </script>
</head>
<body>
  <p>日付を選択してください：</p>
  <input type="text" id="datepicker">
  <p>選択された日付：</p>
  <span id="currentDate"></span>
</body>
</html>

説明

上記のコードは、head タグ内に jQuery と jQuery UI のライブラリを読み込むscriptタグを追加しています。
方法1では、$(document).ready() 内で new Date() を使って現在の日付を取得し、整形して表示しています。
方法2では、$(document).ready() 内で $("#datepicker").datepicker(); を使ってdatepickerプラグインを導入し、onSelect イベントハンドラで選択された日付を取得して表示しています。

実行方法

上記のコードをHTMLファイルに保存します。
ブラウザでそのHTMLファイルを開きます。

動作確認

方法1: ページが読み込まれると、現在の日付が自動的に表示されます。
方法2: カレンダーから日付を選択すると、選択された日付が「選択された日付」の下に表示されます。

jQueryで現在の日付を取得するその他の方法

方法3: Date.now() を使う

Date.now() 関数は、現在の日付と時刻を表すミリ秒単位のタイムスタンプを返します。このタイムスタンプを使って、Dateオブジェクトを作成し、年、月、日などの情報を取り出すことができます。

$(document).ready(function(){
  // 現在の日付と時刻を取得 (ミリ秒単位)
  var timestamp = Date.now();

  // タイムスタンプを Date オブジェクトに変換
  var now = new Date(timestamp);

  // 年を取得
  var year = now.getFullYear();

  // 月を取得 (0始まりなので、1を足す)
  var month = now.getMonth() + 1;

  // 日を取得
  var day = now.getDate();

  // 取得した日付を整形して表示
  var formattedDate = year + "-" + month + "-" + day;
  $("#currentDate").html(formattedDate);
});

方法4: moment.js ライブラリを使う

moment.js は、日付と時刻を扱うためのライブラリです。このライブラリを使うと、現在の日付を簡単に取得したり、フォーマットしたりすることができます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>現在の日付を取得</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
  <script>
    $(document).ready(function(){
      // 現在の日付を取得
      var now = moment();

      // 年を取得
      var year = now.year();

      // 月を取得 (0始まりなので、1を足す)
      var month = now.month() + 1;

      // 日を取得
      var day = now.date();

      // 取得した日付を整形して表示
      var formattedDate = year + "-" + month + "-" + day;
      $("#currentDate").html(formattedDate);
    });
  </script>
</head>
<body>
  <p>現在の日付：</p>
  <span id="currentDate"></span>
</body>
</html>

toLocaleDateString() メソッドは、Dateオブジェクトをブラウザのロケール設定に基づいた形式で文字列に変換します。このメソッドを使って、現在の日付を簡単に取得することができます。

$(document).ready(function(){
  // 現在の日付を取得
  var now = new Date();

  // 現在の日付をロケール設定に基づいた形式で文字列に変換
  var formattedDate = now.toLocaleDateString();

  // 取得した日付を画面に表示
  $("#currentDate").html(formattedDate);
});