daterangepicker コントロールの使用方法の詳細な説明

今回は、daterangepicker コントロールの使用方法について詳しく説明します。daterangepicker コントロールを使用する際の注意事項は何ですか?実際のケースを見てみましょう。

デュ​​アル カレンダー期間選択プラグイン - daterangepicker は、bootstrap フレームワークの後半段階にある時間コントロールであり、複数の期間オプションを設定したり、ユーザーが開始時刻と終了時刻を選択したりできます。 、および期間の最大スパンはプログラムで設定できます。

1. 引用

daterangepicker は monent.js と jquery に依存します。したがって、daterangepicker を導入する前に、monent.js、jquery、bootstrap を導入する必要があります。

りー

または、seaj.js を使用する場合など、modularity を使用してプログラミングする場合は、コード圧縮全体の前に

を追加します。 define("gallery/daterangepicker/1.3.7/daterangepicker",["jquery","moment","./daterangepicker-bs3.css"],
function(a){a("jquery");window.moment =a("瞬間"),a("./daterangepicker-bs3.css"),

(daterangepicker.jsのソースコードは途中に追加可能) (現時点でプロジェクト内で遭遇しましたが使えますが、まだ不明瞭で改善の必要があります)

最後にご参加ください

rreee

2. 使用する

使用時に注意する必要があるのは、datetimepicker のパラメータ設定です (これは公式 Web サイトにあります)。ここで説明したいのは、公式 Web サイトでソースコードをダウンロードし、それに応じてパラメータを設定できるということです。さまざまな用途を理解するためのデモ

上のチェックボックスを選択すると、さまざまなパラメータを設定できます。ここでは、プロジェクトで使用したパラメーターとその使用方法について簡単に説明します。

プロジェクトのシステム全体により、日付が 2 つある場合や 1 つの日付が存在する場合や、時、分、秒が存在する場合や、時、分、秒が存在しない場合があります。したがって、ペアワイズの組み合わせは 4 つの状況に分類されます。

そこで私は以下を使用します:

<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" />

daterangepicker には独自のクリア機能がなく、プロジェクトの要件によっては日付ボックスを空にする必要がある場合があるため、入力ボックスの後ろに十字ボタンを追加しました。以下のようにクリア完了です

コードは参考として使用できます (これを実装するにはさまざまな方法があります)

define("gallery/daterangepicker/1.3.7/daterangepicker-bs3.css",[],function(){
 seajs.importStyle(".daterangepicker{position:absolute;color:inherit;.........}"
 )})
 })

さまざまな状況の引用:

時、分、秒のない単一の日付: calenders("#bgrq",false,false);

時、分、秒を含む単一の日付: Calendars('#inputDate',false,true);

時、分、秒のない二重日付: calenders('#extractionDate11',true,false);

時、分、秒の二重日付: Calendars('#extractionDate11',true,true);

3. 問題解決

1. ドロップダウンの日付ボックスをクリックし、空白スペースをクリックすると、日付ボックスが閉じられ、値の転送に問題が発生します

daterangepicker の機能は次のとおりです。ドロップダウン日付ボックスをクリックした後、ページの他の場所をクリックすると、日付ボックスが閉じられ、以前に選択した日付値が日付ボックスに自動的に保存されます。これはキャンセルと同じなので、ソースコードを変更します:

ソース コードでOutsideClick メソッドを検索します:

その中の this.hide() を置き換えます。

りー

同時に、表示方法も変更する必要があります。変更しないと、ユーザーが 2 つの日付を選択した場合、日付を 1 つだけ選択して空白をクリックし、次に入力ボックスをクリックしたときにエラーが発生します。報告され、使用できなくなります。

りー

2. 日付が最初は空である問題

Daterangepicker は、バインドされた入力ボックスの先頭、つまりパラメーターに現在の日付を自動的に割り当てます。 "autoUpdateInput":true/false、 trueの場合は日付が自動で追加されます。 falseの場合は最初は空白ですが、後から日付を選択すると自動で反映されない場合があります。したがって、いくつかの修正を加える必要があります (これはこのブログから借用したものです) ここで、もう少し明確になります

（引用：在此我们可以使用autoUpdateInput属性，autoUpdateInput是用来打开和关闭daterangepicker选择时，是否自动传值到input[text] 这个DOM的属性，通过设置初始autoUpdateInput为false，可以实现初始值为空，这是在input中设置的placeholder才能正常显现出来。但是设置该属性之后，不管怎么选择daterangePikcer的日期，都不会有传值到input中，也就是没有办法正常显示选择的日期了，所以要在恰当的时刻，调用$(id).data('daterangepicker').autoUpdateInput=true,就可以了。作者最初设置为，最初默认值为空，当daterangepicker 的input发生点击时，autoUpadateInput=true，但是这时出现input不管是否选中日期，都会自动有值，所以为了修改这个问题，我在daterangepicker的源码中进行了修改，当然也可以重新更改需要的onclick事件。

在源码中，当autoUpdateInput设置为false之后，我们想要在点击确定，选中日期和点击range三个地方，将autoUpdateInput改变回来，所以，在三处设置this.autoUpdateInput=true属性）

1）在1210行左右的clickRange方法中：添加可以如下对照以下代码：

clickRange: function(e) {
 var label = e.target.getAttribute('data-range-key');
 this.chosenLabel = label;
 if (label == this.locale.customRangeLabel) {
 this.showCalendars();
 // } else {
 }else if (!this.endDate && date.isBefore(this.startDate)) {
 this.autoUpdateInput=true;
  //special case: clicking the same date for start/end,
  //but the time of the end date is before the start date
  this.setEndDate(this.startDate.clone());
 } else { // picking end
 this.autoUpdateInput=true;
 var dates = this.ranges[label];
 this.startDate = dates[0];
 this.endDate = dates[1];
 if (!this.timePicker) {
  this.startDate.startOf('day');
  this.endDate.endOf('day');
 }
 if (!this.alwaysShowCalendars)
  this.hideCalendars();
 this.clickApply();
 }
},

2）、在1340行左右，两处添加  this.autoUpdateInput=true; 请对照以下：

} else if (!this.endDate && date.isBefore(this.startDate)) {
 this.autoUpdateInput=true;
 //special case: clicking the same date for start/end,
 //but the time of the end date is before the start date
 this.setEndDate(this.startDate.clone());
} else { // picking end
 this.autoUpdateInput=true;
 if (this.timePicker) {
 var hour = parseInt(this.container.find('.right .hourselect').val(), 10);
 if (!this.timePicker24Hour) {
  var ampm = this.container.find('.right .ampmselect').val();
  if (ampm === 'PM' && hour < 12)
  hour += 12;
  if (ampm === 'AM' && hour === 12)
  hour = 0;
 }

3）、在1400行左右，给clickApply方法中添加  this.autoUpdateInput=true;

clickApply: function(e) {
 this.autoUpdateInput=true;
 this.hide();
 this.element.trigger('apply.daterangepicker', this);
 },相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

vue组件之间的传值方式

Angular4实现3d效果

以上がdaterangepicker コントロールの使用方法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。