jQueryで日時を設定する方法

Web アプリケーションの人気に伴い、日付と時刻の処理は Web サイト開発において非常に重要な側面になりました。 jQuery は、開発者が Web サイトで日付と時刻を簡単に処理できるようにする人気の JavaScript ライブラリです。この記事では、jQuery を使用して日付と時刻のピッカーを設定する方法、および jQuery を使用してページ上の日付と時刻を動的に変更する方法を紹介します。

1. 日付と時刻のピッカー

jQuery UI は、Web アプリケーション用に特別に設計された UI (ユーザー インターフェイス) ライブラリです。 jQuery UI を使用すると、開発者は Web ページに日付と時刻のピッカーを簡単に追加できます。

jQuery UI を使用して日付ピッカーを追加するのは簡単です。まず、jQuery ライブラリと jQuery UI ライブラリをページに追加する必要があります。次に、HTML コードに input 要素を追加し、その type 属性を「date」に設定します。

次のコードを使用して日付ピッカーを作成します。

<input type="date" id="datepicker">

jQuery UI ライブラリをページに追加するには、次のコードを使用します。

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

次に、次のコードを使用します。次のコードは日付ピッカーの初期化です:

$( function() {
  $( "#datepicker" ).datepicker();
});

「datepicker」メソッドを使用して日付ピッカーを初期化すると、入力ボックスの下に日付ピッカーが自動的に生成されます。

次のコードを使用してタイム ピッカーを初期化することもできます。

$( function() {
  $( "#timepicker" ).timepicker();
});

タイム ピッカーを追加するには、タイム ピッカー プラグイン ライブラリを導入する必要があります。タイムピッカーのプラグイン ライブラリは、https://github.com/jonthornton/jquery-timepicker にあります。

2. ページ上の日付と時刻を動的に更新する

jQuery UI ライブラリを使用してページの読み込み時に日付と時刻のピッカーを追加するだけでなく、jQuery コードを使用して動的に更新することもできます。ページ上の日付と時刻を更新します。

次は、jQuery を使用して日付と時刻を動的に更新するサンプル コードです。

$( function() {
//获取当前时间
  var date = new Date();
  //使用getFullYear()、getMonth()、getFullYear()等方法获取年、月、日等日期信息
  var day = date.getDate();
  var month = date.getMonth() + 1;
  var year = date.getFullYear();
  //将日期信息赋值给页面元素
  $("#date").html(day + "/" + month + "/" + year);
  //使用getHours()、getMinutes()、getSeconds()等方法获取时、分、秒等时间信息
  var hours = date.getHours();
  var minutes = date.getMinutes();
  var seconds = date.getSeconds();
  //将时间信息赋值给页面元素
  $("#time").html(hours + ":" + minutes + ":" + seconds);
  //使用setTimeout()函数每秒钟更新时间
  setTimeout( function() {
    updateTime();
  }, 1000);
});

function updateTime(){
  //获取当前时间
  var date = new Date();
  var day = date.getDate();
  var month = date.getMonth() + 1;
  var year = date.getFullYear();
  $("#date").html(day + "/" + month + "/" + year);
  var hours = date.getHours();
  var minutes = date.getMinutes();
  var seconds = date.getSeconds();
  $("#time").html(hours + ":" + minutes + ":" + seconds);
  setTimeout( function() {
    updateTime();
  }, 1000);
}

このコードは、「日付」要素 ID と「時刻」要素 ID を含むページ要素を動的に更新します。要素 ID は必要に応じて変更できます。

3. 概要

jQuery UI ライブラリを使用すると、Web ページに日付と時刻のピッカーを簡単に追加できます。 「datepicker」メソッドを使用して日付ピッカーを追加し、時刻ピッカー プラグイン ライブラリを使用して時刻ピッカーを追加できます。

jQuery コードを使用して、ページの読み込み時にページ上の日付と時刻を動的に更新します。 Date オブジェクトのメソッドを使用して日付と時刻の情報を取得し、jQuery を使用してそれらをページ要素に割り当てることができます。 setTimeout() 関数を使用して、時間を毎秒更新します。

上記のコードは、Web サイト開発者が独自のニーズに応じて変更および拡張できる基本的な例です。

以上がjQueryで日時を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。