jQueryの日付範囲ピッカー分析

jQuery Date Range Picker は、ユーザーが日付と時刻の範囲を選択できるようにする jQuery 日付ピッカー プラグインです。日付ピッカー プラグイン全体は CSS を使用してスタイルをレンダリングし、CSS を使用してスキンをカスタマイズするのは非常に簡単です。また、ブラウザの互換性は非常に優れており、複数の時刻形式をサポートしています。

デモを見る ソースコードをダウンロードする

準備する

この日付ピッカー プラグインを使用するには、jQuery 1.3.2 以降および Moment 2.2.0 以降のサポートが必要です。

<link rel="stylesheet" href="css/daterangepicker.css" rel="external nofollow" /> 
<script src="js/moment.min.js"></script> 
<script src="js/jquery.daterangepicker.js"></script>

HTML 構造

入力ボックスである日付ピッカーを配置する必要がある場所に、次の HTML 構造を追加します。

<input type="text" id="datepicker" value="">

プラグインの呼び出し

jQuery Date Range Picker プラグインの呼び出しは、他の一般的な jQuery プラグインと同様に非常に簡単です:

$('#datepicker').dateRangePicker(option);

設定パラメータ

日付のデフォルトの設定パラメータピッカーは次のとおりです:

{ 
 format: 'YYYY-MM-DD', 
 separator: ' to ', 
 language: 'auto', 
 startOfWeek: 'sunday',// or monday 
 getValue: function() 
 { 
  return this.value; 
 }, 
 setValue: function(s) 
 { 
  this.value = s; 
 }, 
 startDate: false, 
 endDate: false, 
 minDays: 0, 
 maxDays: 0, 
 showShortcuts: true, 
 time: { 
  enabled: false 
 }, 
 shortcuts: 
 { 
  //'prev-days': [1,3,5,7], 
  'next-days': [3,5,7], 
  //'prev' : ['week','month','year'], 
  'next' : ['week','month','year'] 
 }, 
 customShortcuts : [], 
 inline:false, 
 container: 'body', 
 alwaysOpen:false, 
 singleDate:false, 
 batchMode:false, 
 beforeShowDay: [function], 
 daypAttrs: [], 
 dayTdAttrs: [], 
 applyBtnClass: '' 
}

format (文字列): モーメントの日付形式。 Moment のドキュメントを表示するには、ここをクリックしてください。

separator (文字列): 日付文字列間の区切り文字。

言語 (文字列): 事前定義された言語は「en」と「cn」です。このパラメータを使用して言語をカスタマイズできます。 「自動」に設定して、ブラウザーが言語自体を検出できるようにすることもできます。

startOfWeek (文字列): 「日曜日」または「月曜日」。

getValue (関数): この関数は、DOM 要素から日付範囲を取得するときに呼び出され、関数のコンテキストが datepicker DOM に設定されます。

setValue (関数): この関数は、DOM 要素に日付範囲を書き込むときに呼び出されます。

startDate (文字列または false): ユーザーが許可する最も古い日付を定義します。形式は format と同じです。

endDate (文字列または false): ユーザーが許可する最後の日付を定義します。形式は format と同じです。

minDays (数値): このパラメーターは、日付範囲の最小日数を定義します。0 に設定すると、最小日数に制限がないことを意味します。

maxDays (数値): このパラメーターは、日付範囲の最大日数を定義します。0 に設定すると、最大日数に制限がないことを意味します。

showShortcuts (ブール値): ショートカット領域を隠すか、非表示にします。

time (オブジェクト): このパラメーターが許可されている場合、時間範囲の選択が追加されます。

ショートカット (オブジェクト): ショートカット ボタンのボタンを定義します。

customShortcuts (配列): カスタムショートカットボタンを定義します。

inline (ブール値): オーバーレイ モードの代わりにインライン モードを使用して日付ピッカーをレンダリングします。 true に設定した場合、コンテナーのパラメーターを一緒に設定する必要があります。

container (文字列、css セレクター || DOM オブジェクト): レンダリングされる日付セレクター DOM 要素。

alwaysOpen (ブール値): インライン モードを使用している場合、ページの読み込み時に日付ピッカーをレンダリングすることができます。このパラメータを true に設定すると、「閉じる」ボタンが非表示になります。

singleDate (ブール値): 単一の日付を選択するには true に設定します。

batchMode (false / 'week' / 'month'): 自動バッチ処理モード。

イベント

この日付ピッカーが DOM 内の特定の日付範囲を選択すると、3 つのイベントがトリガーされます。

$('#datepicker') 
.dateRangePicker() 
.bind('datepicker-change',function(event,obj) 
{ 
 console.log(obj); 
 // obj will be something like this: 
 // { 
 //  date1: (Date object of the earlier date), 
 //  date2: (Date object of the later date), 
 //  value: "2013-06-05 to 2013-06-07" 
 // } 
}) 
.bind('datepicker-apply',function(event,obj) 
{ 
 console.log(obj); 
}) 
.bind('datepicker-close',function() 
{ 
 console.log('close'); 
});

API

$(dom).dateRangePicker() を呼び出した後:

$(dom).data('dateRangePicker') 
 .setDateRange('2013-11-20','2013-11-25'); //set date range, two date strings should follow the `format` in config object 
 .clear(); // clear date range 
 .close(); // close date range picker overlay 
 .open(); // open date range picker overlay 
 .destroy(); // destroy all date range picker related things

プロジェクトアドレス: https://github.com/longbill/jquery-date-range-picker

関連する推奨事項:

jQuery 日付範囲ピッカーの使用方法チュートリアル

jQuery UI 日付ピッカー Datepicker の詳細な説明

React Native オープンソースの時刻日付ピッカー コンポーネントの詳細な説明

以上がjQueryの日付範囲ピッカー分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。