ホームページ >ウェブフロントエンド >フロントエンドQ&A >jqueryで時間制御を選択する方法
jqueryで時間制御を選択する方法
- WBOYオリジナル
- 2023-05-23 20:47:062104ブラウズ
インターネットの発展に伴い、Web 開発では時間選択コントロールがますます一般的に使用されるようになりました。その中でも、jQuery タイムピッカー プラグインは、簡単な操作と美しい効果という明らかな利点を備えており、開発者によって広く歓迎され、サポートされています。この記事では、開発者が時間選択コントロールをより迅速かつ簡単に実装できるようにする jQuery タイム ピッカー プラグインの使用方法を紹介します。
1. jQuery タイム ピッカー プラグインの概要
jQuery タイム ピッカー プラグインは、高速かつ柔軟な、クロスブラウザーの日付と時刻ピッカー プラグインです。 jQuery ライブラリは、適応性が高く、拡張が容易で、スタイルが美しいなどの特徴を備えています。使いやすく、複数の言語をサポートし、高度にカスタマイズでき、豊富なイベント コールバック関数を提供します。開発者は、関連する JS および CSS ファイルを導入し、それらを呼び出すだけで時間選択コントロールを実装することができます。現在、jQuery タイムピッカー プラグインには複数のバージョンがあります。この記事では、バージョン番号 2.1.9 のプラグインについて説明します。
2. jQuery タイムピッカー プラグインの使用
- 関連ファイルの紹介
まず、jQuery ライブラリと関連 JS を導入する必要があります。 jQuery タイムピッカー プラグインの CSS ファイル。
<head> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/jquery-timepicker/2.1.9/jquery.timepicker.min.js"></script> <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/jquery-timepicker/2.1.9/jquery.timepicker.min.css"> </head>
- HTML ページ レイアウト
次に、時間ピッカーのコンテナとしてページに input タグを追加します。
<input type="text" class="timepicker" />
このうち、class 属性値は timepicker であり、この入力タグがタイムピッカーであることを示しています。
- プラグインの初期化
jQuery タイム ピッカー プラグインの timepicker() メソッドを呼び出して、タイム ピッカーを初期化します。
$(document).ready(function() {
$('.timepicker').timepicker();
});その中で、ready() メソッドは、JavaScript コードを実行する前にドキュメントが完全にロードされていることを確認するために使用されます。 timepicker() メソッドは、さまざまなオプションのパラメーターがあり、高度にカスタマイズできるタイムピッカーを初期化するために使用されます。
- 高度な関数の使用法
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"
});
});上記のコードは、時間セレクターの最も早い時間を 9:00 に設定し、最も遅い時間を 17:00 に設定します。 (4) 言語の変更言語パックを設定することでタイムピッカーの言語を変更できます。 $(function() {
$("#timepicker").timepicker({
timeFormat: "HH:mm",
lang: "zh"
});
});上記のコードは、時間セレクターの時間形式を「HH:mm」に設定し、言語を中国語に設定します。 3. 概要この記事では、jQuery タイムピッカー プラグインを使用して時間選択コントロールを実装する方法を紹介します。関連ファイルを導入し、HTML ページ レイアウトを追加し、プラグインを初期化することで、美しく実用的なタイム ピッカーをすばやく作成できます。さらに、時間形式、分間隔、時間制限、言語パックなどの高度な機能を設定することで、時間ピッカーをさらにカスタマイズできます。したがって、タイムピッカーを開発する開発者にとって、jQuery タイムピッカー プラグインの使用方法を学ぶことは非常に必要なスキルです。 以上がjqueryで時間制御を選択する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。