jQuery を使用して現在の日付と時刻を表示する

Neha Imran 2024年2月15日

jQuery jQuery DateTime

jQuery を使用して現在の日付と時刻を取得する
JavaScript の Date オブジェクト
jQuery を使用して現在の日付を取得する
jQuery を使用して現在の時刻を取得する

このチュートリアルでは、当社の Web サイトでの日付と時刻の表示について説明します。 JavaScript の Date オブジェクトを詳しく調べます。

主な焦点は、jQuery を使用してさまざまな形式で日付と時刻を取得することです。

jQuery を使用して現在の日付と時刻を取得する

Web ページの日付と時刻の表示は、非常にユーザーフレンドリーな機能です。一部の Web サイトは、新聞が毎日変化する情報を保持しているため、国の政治状態や日付付きのオンライン新聞 Web サイトなど、さまざまな問題について読者に更新しています。

特定のブログやニュースを検索して読むのは、日付と時刻が記載されているので簡単です。今日は、日付と時刻の機能を Web サイトに追加する方法について説明します。

JavaScript の `Date` オブジェクト

JavaScript は、アプリケーションまたは Web ページで日付と時刻を操作する Date オブジェクトを提供します。 Date オブジェクトには、日付を設定、取得、および変更するための多数のメソッドがあります。

Date オブジェクトは次のように作成されます。

var date = new Date();

date 変数の出力を見ると、次のようになります。

上の画像に示すように、現在の日付、時刻、曜日が表示されます。 Date() のように、new キーワードを使用せずに、現在の日付と時刻の文字列表現を返す関数と呼ぶこともできます。

上記の方法では日付と時刻が一緒に取得されるため、jQuery を使用してさまざまな形式で日付と時刻を個別に取得する方法について説明します。それらを個別に取得するための他のオプションを見てみましょう。

jQuery を使用して現在の日付を取得する

前に見たように、new Date() は曜日、日付、時刻を返しますが、曜日と日付を別々に表示したい場合はどうすればよいでしょうか? どうやってそれを行うつもりですか？

Date オブジェクトには、日、日、月、および年を取得するための独立したメソッドがあります。それらを詳しく見てみましょう。

getDay(): 現地時間による、指定された日付の曜日がこのメソッドによって返されます。日曜日は値 0 で示されます。
getDate(): この関数は、指定された日付または現在の日付の現地時間による月日を返します。
getMonth(): 現地時間に従って、指定された日付の月を数値として返します。0 は年の最初の月を示します。
getFullYear(): このメソッドは、指定された日付の年を現地時間で返します。

メソッド getDay() と getMonth() は数値を提供しますが、ウェブサイトに日と月を名前とともに表示したい場合があるので、さらに詳しく見てみましょう。

今日の名前を取得

曜日を取得するには、getDay() メソッドがありますが、これは 0 から 6 までの数値を返します。0 は日曜日、1 は月曜日などを表します。 Web ページで今日が 0 であるとは言いたくありません。

その日の名前が必要です。以下のコードを見て、これを実現する方法を確認してください。

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
                var day_names= ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]
                var date = new Date();
                $("#currentDay").text("Today is: " + day_names[date.getDay()]);
            });
        </script>
    </head>
    <body>
        <p id="currentDay"></p>
    </body>
</html>

出力：

曜日名

上記のコードは簡単に理解できます。曜日名の配列を作成し、日曜日をインデックス 0、月曜日をインデックス 1 などに割り当てました。

関数 getDay() が数値を返す場合、その数値を配列のインデックスとして使用して、そのインデックスの値を取得します。

月の名前を取得する

関数 getMonth() は、0 から 11 までの数値を返します。ここで、0 は 1 月を表し、1 は 2 月を表します。 Date オブジェクトには月の名前を取得する関数が含まれていないため、月の名前と共に日付を表示する必要がある場合があります。

曜日の名前を決定するために使用したのと同じ方法を使用します。以下のコードを調べてください。

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
               var month_names = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ];
                var date = new Date();
                $("#currentMonth").text("Present Month is: " + month_names[date.getMonth()]);
            });
        </script>
    </head>
    <body>
        <p id="currentMonth"></p>
    </body>
</html>

出力：

日付を（日付月、年）形式で表示する

曜日または月を名前で取得する方法については既に説明しました。 日付、月、および年 形式で日付を表示する方法を見てみましょう。

1つの形式で提示する方法を習得したら、選択したさまざまな形式を試すことができます。

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
                var month_names = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ];
                var date = new Date();
                $("#dateFormat").text(date.getDate() + " " + month_names[date.getMonth()] + ", " + date.getFullYear());
            });
        </script>
    </head>
    <body>
        <p id="dateFormat"></p>
    </body>
</html>

出力：

dateFormat

jQuery を使用して現在の時刻を取得する

JavaScript Date オブジェクトは、現在の時刻を取得する静的メソッドを提供します。静的メソッドはクラスのオブジェクトにバインドされず、クラス名のみを使用して独立して呼び出すことができます。

静的メソッド Date.now() は、現在の時刻に対応する数値を返します。

Date.now()

出力：

currentTime

時間はミリ秒単位で返されます。これは、私たちの Web ページで時間を表示するための読みやすい方法ではありません。

時間: 分: 秒 形式で時間を表示したいと考えています。希望する形で時間を取得する方法について説明しましょう。

Web サイトに時刻を表示する形式は多数あります。 24 時間制と 12 時間制の 2つの主要な形式について説明します。その後、それをよく理解し、選択した任意の形式で時間を取得できるようになります。

24 時間形式 (時間: 分: 秒)

Date オブジェクトは、指定された日付の時刻を取得するさまざまな方法を提供します。それぞれの方法を詳しく見ていきましょう。

getHours(): このメソッドは、現地時間ごとの時間を返します。
getMinutes(): このメソッドは、現地時間ごとの分を返します。
getSeconds(): このメソッドは、現地時間あたりの秒数を返します。

これら 3つの方法を使用すると、必要な形式で時刻を簡単に表示できます。以下のコードを確認して、明確に理解してください。

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
                var date = new Date();
                $("#24HFormat").text(date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds());
            });
        </script>
    </head>
    <body>
        <p id="24HFormat"></p>
    </body>
</html>

出力：

24時間形式

デフォルトでは、これらの Date オブジェクトメソッドは時間を 24 時間形式で返します。これにより、Web サイトで必要な形式で時刻を簡単に表示できます。

12 時間形式 (hh: mm: ss)

時、分、秒を取得する関数は、前のメソッドで既に説明されており、これらの関数が 24 時間形式を返すことがわかりました。次に、24 時間形式を 12 時間形式に変換する必要があります。

以下のコードを調べて、正しく理解してください。

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
                var date = new Date();
                var hours = date.getHours() > 12 ? date.getHours() - 12 : date.getHours();
                var am_pm = date.getHours() >= 12 ? "PM" : "AM";
                hours = hours < 10 ? "0" + hours : hours;
                var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
                var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
                time = hours + ":" + minutes + ":" + seconds + " " + am_pm;
                $("#12HFormat").text(time);
            });
        </script>
    </head>
    <body>
        <p id="12HFormat"></p>
    </body>
</html>

出力：

12時間形式

これは多くのコーディングだと思われるかもしれませんが、簡単です。コードで行っていることを詳しく見ていきましょう。

まず、時刻を 12 時間形式に変換するために、getHours() メソッドによって返された値が 12 より大きいかどうかを確認し、12 より大きい場合は、そこから 12 を差し引きます。次に、時間が 12 以上かどうかをチェックして、AM と PM のどちらかを判断し、PM を表示します。それ以外の場合は、AM です。

次の 3 行のコードでは、値が 10 未満かどうかを確認し、01 または 02 などとして表示できるように 0 を追加しています。