jQuery モバイルの日付 (datedropper) と時刻 (timedropper) セレクター (ソース コード付き) download_jquery

私たちは日付と時刻のピッカーをよく使用します。以前に最もよく使用したのは jQuery UI の datepicker() でした。そこで、今日は日付と時刻のピッカーを紹介します。これは datedropper と 2 つに分かれています。 timepicker timedropper、どちらもモバイル アプリケーションに特に適しています。

オンラインデモ ソースコードのダウンロード

デートドロッパー

使用方法は 3 つのステップで非常に簡単です。

1. 関連する js および css ファイルを紹介します。 datedropper と timedropper は両方とも jQuery ベースのプラグインであるため、jQuery ライブラリ ファイルも導入する必要があることに注意してください。

<script src="jquery.js"></script> 
<script src="datedropper.js"></script> 
<link rel="stylesheet" type="text/css" href="datedropper.css"> 

2.body内にhtmlを配置します。

<input type="text" id="pickdate" /> 

3. datedropper を呼び出します

<script> 
$("#pickdate").dateDropper(); 
</script> 

次に、ニーズに応じていくつかのオプションを適切に設定できます。 datedropper は、次の基本的なオプション設定を提供します:

animate: アニメーション効果を表示します。true に設定すると、セレクター パネルの日付がアニメーション化され、現在の日付までスクロールします。デフォルトは true です。

init_animation: ポップアップ パネルをクリックしたときのアニメーション効果 (フェードイン (デフォルト)、バウンス、ドロップダウンなど)。

format: 日付の形式。デフォルトの形式を Y-m-d に変更しました。

lang: 言語。プラグインのデフォルトの月と週を中国語に翻訳しました。

max Year: 最大年。デフォルトは現在の年です。

min Year: 最小年、デフォルトは 1970 年。

yearsRange: 年の範囲、デフォルトは 10 年です。

dateDropper はスキン スタイル設定も提供します。

タイムドロッパー タイムドロッパー

日付ピッカーと同様に、使い方は簡単です。

1. js ファイルと css ファイルをインポートします。

<script src="jquery.js"></script> 
<script src="timedropper.js"></script> 
<link rel="stylesheet" type="text/css" href="timedropper.css"> 

2.body内にhtmlを配置します。

<input type="text" id="picktime" /> 

3. タイムドロッパーを呼び出します

<script> 
$("#picktime").timeDropper(); 
</script> 

timeDropper は次の基本的なオプション設定を提供します:

子午線: 12 時間形式を使用するかどうか。 false に設定すると、24 時間形式になります。

format: 形式、HH:mm (02:12 など)。

init_animation: アニメーション フォーム、フェードイン (デフォルト)、ドロップダウン。

setCurrentTime: 現在時刻を自動的に設定します。

timeDropper はスキン スタイル設定も提供します。

これは、jQuery モバイルの日付 (datedropper) と時刻 (timedropper) セレクターに関するものです。興味のある方は、エフェクトのデモを見て、ソース コードをダウンロードしてください。