この記事では主にブートストラップ日付プラグイン 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() { $('input[name="daterange"]').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')); });
このように、中国語があります。もちろん、独自のクラスを追加して、必要なスタイルを実現するために使用できる他のパラメーターもあります。また、ラジオ タイム ボックス機能を使用してそれを実現することもできます。 、公式ドキュメントを注意深く確認して、必要な時間選択コントロールを構築できます。
関連する推奨事項:
以上がブートストラップ日付プラグイン daterangepicker サンプルの詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。