jqueryで時間制御を選択する方法

インターネットの発展に伴い、Web 開発では時間選択コントロールがますます一般的に使用されるようになりました。その中でも、jQuery タイムピッカー プラグインは、簡単な操作と美しい効果という明らかな利点を備えており、開発者によって広く歓迎され、サポートされています。この記事では、開発者が時間選択コントロールをより迅速かつ簡単に実装できるようにする jQuery タイム ピッカー プラグインの使用方法を紹介します。

1. jQuery タイム ピッカー プラグインの概要

jQuery タイム ピッカー プラグインは、高速かつ柔軟な、クロスブラウザーの日付と時刻ピッカー プラグインです。 jQuery ライブラリは、適応性が高く、拡張が容易で、スタイルが美しいなどの特徴を備えています。使いやすく、複数の言語をサポートし、高度にカスタマイズでき、豊富なイベント コールバック関数を提供します。開発者は、関連する JS および CSS ファイルを導入し、それらを呼び出すだけで時間選択コントロールを実装することができます。現在、jQuery タイムピッカー プラグインには複数のバージョンがあります。この記事では、バージョン番号 2.1.9 のプラグインについて説明します。

2. jQuery タイムピッカー プラグインの使用

1. 関連ファイルの紹介

まず、jQuery ライブラリと関連 JS を導入する必要があります。 jQuery タイムピッカー プラグインの CSS ファイル。

2. HTML ページ レイアウト

次に、時間ピッカーのコンテナとしてページに input タグを追加します。

このうち、class 属性値は timepicker であり、この入力タグがタイムピッカーであることを示しています。

3. プラグインの初期化

jQuery タイム ピッカー プラグインの timepicker() メソッドを呼び出して、タイム ピッカーを初期化します。

$(document).ready(function() { $('.timepicker').timepicker(); });

その中で、ready() メソッドは、JavaScript コードを実行する前にドキュメントが完全にロードされていることを確認するために使用されます。 timepicker() メソッドは、さまざまなオプションのパラメーターがあり、高度にカスタマイズできるタイムピッカーを初期化するために使用されます。

4. 高度な関数の使用法

jQuery タイムピッカー プラグインは、基本的な時間選択に加えて、時間形式の設定、分間隔の設定など、多くの高度な機能も提供します。 、時間制限の追加、言語の変更など。以下に、これらの共通機能の実装をそれぞれ紹介します。

(1) 時刻フォーマットの設定

format 属性を設定することで、時刻セレクターのフォーマットを設定できます。書式設定オプションには、日付形式、時刻形式、初期時刻を含めることができます (初期時刻を表示したい場合は、対応する時刻を設定する必要があります)。

$(function() { $("#timepicker").timepicker({ timeFormat: "HH:mm:ss", dateFormat: "yy-mm-dd", dateTimeFormat: "yy-mm-dd HH:mm:ss", initialValue: "09:00" }); });

上記のコードは、時刻セレクターの時刻形式を「HH:mm:ss」に、日付形式を「yy-mm-dd」に、日付時刻形式を「yy-mm-」に設定します。 dd HH:mm" :ss"、初期時刻は "09:00" です。

(2) 分間隔の設定

step 属性を設定することで、15 分を例として、時間セレクターの分と秒の間隔を設定できます:

$(function() { $("#timepicker").timepicker({ step: 15 * 60 // 单位为秒 }); });

上記のコード設定では、タイムピッカーの分間隔は15分に設定されています。

(3) 時間制限の追加

minTime 属性と maxTime 属性を設定することで、時間セレクターの時間範囲を制限できます (例として 9:00 から 17:00 まで)。 ##

$(function() { $("#timepicker").timepicker({ minTime: "9:00", maxTime: "17:00" }); });

$(function() { $("#timepicker").timepicker({ timeFormat: "HH:mm", lang: "zh" }); });

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