jqueryで時間制御を選択する方法-フロントエンドQ&A-php.cn

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

WBOY

リリース： 2023-05-23 20:47:06

オリジナル

2103 人が閲覧しました

インターネットの発展に伴い、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 サイトの他の関連記事を参照してください。