ホームページ > 記事 > ウェブフロントエンド > ブートストラップ日付プラグイン daterangepicker サンプルの詳細な説明

ブートストラップ日付プラグイン daterangepicker サンプルの詳細な説明

小云云オリジナル: 2018-05-15 10:04:433100ブラウズ

この記事では主にブートストラップ日付プラグイン daterangepicker の使い方を詳しく紹介しますので、興味のある方は参考にしていただければ幸いです。

今日はブートストラップ日付プラグインを使用しましたが、検索する情報があまりないように感じます。使用した経験をここに書き留めておきます:
プラグインのオープンソースアドレス: daterangepicker date control。 ,
プラグインを使用するには、オープンソースのドキュメント情報に従い、最初に次の参照を含めます。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="moment.js"></script>
<script type="text/javascript" src="daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="bootstrap.css" />
<link rel="stylesheet" type="text/css" href="daterangepicker-bs3.css" />

日付処理用の jquery、ブートストラップフレームワーク、moment.js への参照が含まれています。最後に、js を読み込みます。このプラグインの CSS ファイルと CSS ファイル
ほとんどの jq プラグインと同様に、このプラグインも $.fn の拡張子です。このため、このコントロールを使用するには次の手順を実行します

<script type="text/javascript">
$(document).ready(function() {
 $(&#39;input[name="daterange"]&#39;).daterangepicker();
});
</script>

jq を使用して挿入する要素を取得します次に、daterangepicker 関数を実行してデフォルトのスタイルと属性を使用します
しかし、これだけでは明らかに十分ではありません。次のように、daterangepicker 関数はパラメーターオブジェクトとコールバック関数を受け入れることができます。日付の変更には、開始時刻、終了時刻、ラベル名の 3 つのパラメーターがあります。ここで、Ajax リクエストなどの操作を実行できます

上記により、英語版の日付コントロールを構築できます

。
次に、ロケールと範囲の 2 つのパラメーターに焦点を当てます

1 つ目は、ロケールパラメーターです。ロケールは、ローカル言語アプリケーションを構築するための重要なパラメーターです (github では、ロケールはオブジェクトパラメーターを受け入れると述べていますが、オブジェクトのプロパティは指定しません)。 )

以下はプラグインのロケールのデフォルト属性です

$(&#39;input[name="daterange"]&#39;).daterangepicker(
 { 
  format: &#39;YYYY-MM-DD&#39;,
  startDate: &#39;2013-01-01&#39;,
  endDate: &#39;2013-12-31&#39;
 },
 function(start, end, label) {
  alert(&#39;A date range was chosen: &#39; + start.format(&#39;YYYY-MM-DD&#39;) + &#39; to &#39; + end.format(&#39;YYYY-MM-DD&#39;));
 }
);

このプラグインを中国語プラグインにするには、これらのパラメータを変更するだけで済みます

{ 
applyLabel: ‘Apply&#39;, 
cancelLabel: ‘Cancel&#39;, 
fromLabel: ‘From&#39;, 
toLabel: ‘To&#39;, 
weekLabel: ‘W&#39;, 
customRangeLabel: ‘Custom Range&#39;, 
daysOfWeek: moment.weekdaysMin(), 
monthNames: moment.monthsShort(), 
firstDay: moment.localeData()._week.dow };

効果は次のとおりです:

もちろん、github で効果を実現し、時間を追加するためのショートカットキーを追加することもできます:

Improvemently.com

問題ありません、範囲パラメータを使用できます:
範囲パラメータはオブジェクトパラメータでもあります {name: [start,end] name はショートカットキーの名前で、それぞれ時間の開始と終了を表す配列を受け取ります

$(&#39;input[name=datetime]&#39;).daterangepicker({ 
    format: &#39;YYYY-MM-DD&#39;,
    startDate: &#39;2013-01-01&#39;,
    endDate: new Date(),
    maxDate:new Date(),
    locale:{
      applyLabel: &#39;确认&#39;,
      cancelLabel: &#39;取消&#39;,
      fromLabel: &#39;从&#39;,
      toLabel: &#39;到&#39;,
      weekLabel: &#39;W&#39;,
      customRangeLabel: &#39;Custom Range&#39;,
      daysOfWeek:["日","一","二","三","四","五","六"],
      monthNames: ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],
    }
  }, function (start, end, label) {
    alert(&#39;A date range was chosen: &#39; + start.format(&#39;YYYY-MM-DD&#39;) + &#39; to &#39; + end.format(&#39;YYYY-MM-DD&#39;));
  });

効果は次のとおりです:

このように、中国語があります。もちろん、独自のクラスを追加して、必要なスタイルを実現するために使用できる他のパラメーターもあります。また、ラジオタイムボックス機能を使用してそれを実現することもできます。、公式ドキュメントを注意深く確認して、必要な時間選択コントロールを構築できます。

ブートストラップ日付プラグイン daterangepicker サンプルの詳細な説明

関連記事