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

この記事では主にブートストラップ日付プラグイン 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 では、ロケールはオブジェクト パラメーターを受け入れると述べていますが、オブジェクトのプロパティは指定しません)。 )

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

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

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

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

効果は次のとおりです:

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

Improvemently.com

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

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

効果は次のとおりです:

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

関連する推奨事項:

JQuery 日付プラグインの使い方 datepicker_jquery

js 日付プラグイン date今月、3 か月、今年の日付を取得するヘルプ_JavaScript スキル

JQuery 日付プラグイン datepicker Method_jquery

以上がブートストラップ日付プラグイン daterangepicker サンプルの詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。