jQueryの日付範囲ピッカー分析-jsチュートリアル-php.cn

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

小云云

リリース： 2018-01-10 14:55:13

オリジナル

2059 人が閲覧しました

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 プラグインと同様に非常に簡単です:

$(&#39;#datepicker&#39;).dateRangePicker(option);

ログイン後にコピー

設定パラメータ

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

{ 
 format: &#39;YYYY-MM-DD&#39;, 
 separator: &#39; to &#39;, 
 language: &#39;auto&#39;, 
 startOfWeek: &#39;sunday&#39;,// 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: 
 { 
  //&#39;prev-days&#39;: [1,3,5,7], 
  &#39;next-days&#39;: [3,5,7], 
  //&#39;prev&#39; : [&#39;week&#39;,&#39;month&#39;,&#39;year&#39;], 
  &#39;next&#39; : [&#39;week&#39;,&#39;month&#39;,&#39;year&#39;] 
 }, 
 customShortcuts : [], 
 inline:false, 
 container: &#39;body&#39;, 
 alwaysOpen:false, 
 singleDate:false, 
 batchMode:false, 
 beforeShowDay: [function], 
 daypAttrs: [], 
 dayTdAttrs: [], 
 applyBtnClass: &#39;&#39; 
}

ログイン後にコピー

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 つのイベントがトリガーされます。

$(&#39;#datepicker&#39;) 
.dateRangePicker() 
.bind(&#39;datepicker-change&#39;,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(&#39;datepicker-apply&#39;,function(event,obj) 
{ 
 console.log(obj); 
}) 
.bind(&#39;datepicker-close&#39;,function() 
{ 
 console.log(&#39;close&#39;); 
});

ログイン後にコピー

API

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

$(dom).data(&#39;dateRangePicker&#39;) 
 .setDateRange(&#39;2013-11-20&#39;,&#39;2013-11-25&#39;); //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