ブートストラップ時間制御daterangepickerの使い方を詳しく解説-jsチュートリアル-php.cn

この記事では、ブートストラップタイムコントロールの daterangepicker の使用方法とさまざまな小さなバグ修正を主に紹介します。興味のある方は参考にしていただければ幸いです。

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

1. Quote

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

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

ログイン後にコピー

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

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

(途中にdaterangepicker.jsのソースコードを追加することもできます）（現時点でプロジェクト内で遭遇し、自分で解決しました。使用できますが、まだ明確ではないため改善の必要があります）使用中に、次のものが必要ですdatetimepicker のパラメーター設定に注意してください (これは公式 Web サイトにあります)。ここで説明したいのは、公式 Web サイトでソースコードをダウンロードし、そのデモに従ってパラメーターを設定すると、そのさまざまな内容を理解できるということです。を使用します

上のチェックボックスを選択して、さまざまなパラメータを設定できます。ここでは、プロジェクトで使用するパラメータとその使用方法について簡単に説明します。二重の日付か単一の日付、または分と秒がある場合と時、分、秒がない場合があるため、組み合わせは 4 つの状況に分けられますそこで私は次のように使用します:

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

ログイン後にコピー

daterangepicker には独自のクリア関数がないため、およびプロジェクトの要件では、日付ボックスを空にする必要がある場合があります。以下に示すように、

をクリアするためのコードを参照として使用できます(これにはさまざまな実装があります)。メソッド)

/**
 * 日历
 * @param obj eles 日期输入框
 * @param boolean dobubble 是否为双日期（true）
 * @param boolean secondNot 有无时分秒（有则true）
 * @return none
 */
function calenders(eles,dobubble,secondNot){
 var singleNot,formatDate;
 if(dobubble ==true){
 singleNot = false;
 }else{
 singleNot = true;
 }
 if(secondNot ==true){
 formatDate = "YYYY-MM-DD HH:mm:ss";
 }else{
 formatDate = "YYYY-MM-DD";
 }
 
 $(eles).daterangepicker({
 "singleDatePicker": singleNot,//是否为单日期
 "timePicker": secondNot,//时间显示与否
 "timePicker24Hour": secondNot,//是否按24小时式来显示
 "timePickerSeconds": secondNot,//是否带秒
 "showDropdowns":true,//是否显示年月下拉选项，可以快速定位到哪一年哪一月
 "timePickerIncrement" :1,
 "linkedCalendars": false,//是否开始和结束连动，建议设为false，不然日期一直跳来跳去，首次使用者会觉得用户体检极度不佳
 "autoApply":true,//是否自动应用，不带时分秒的都可以实现在选择完日期后自动关闭，带时分秒时不会自动关闭
 "autoUpdateInput":false, //是否自动应用初始当前日期
 "locale": {
  "direction": "ltr",
  "format": formatDate,
  "separator": "~",
  "applyLabel": "Apply",
  "cancelLabel": "Cancel",
  "fromLabel": "From",
  "toLabel": "To",
  "customRangeLabel": "Custom",
  "daysOfWeek": [
  "Su",
  "Mo",
  "Tu",
  "We",
  "Th",
  "Fr",
  "Sa"
  ],
  "monthNames": [
  "一月",
   "二月",
   "三月",
   "四月",
   "五月",
   "六月",
   "七月",
   "八月",
   "九月",
   "十月",
   "十一月",
   "十二月"
  ],
  "firstDay": 1
 }
 }, function(start,end, label) {
 if(secondNot ==true&&dobubble ==true){
  $(eles).val($.trim(start.format(&#39;YYYY-MM-DD HH:mm:ss&#39;)+&#39;~&#39;+end.format(&#39;YYYY-MM-DD HH:mm:ss&#39;)));
 }else if(secondNot ==false&&dobubble ==true){
  $(eles).val($.trim(start.format(&#39;YYYY-MM-DD&#39;)+&#39;~&#39;+ end.format(&#39;YYYY-MM-DD&#39;)));
 }else if(secondNot ==false&&dobubble ==false){
  $(eles).val(start.format(&#39;YYYY-MM-DD&#39;));
 }else if(secondNot ==true&&dobubble ==false){
  $(eles).val(start.format(&#39;YYYY-MM-DD HH:mm:ss&#39;));
 }
 });
 //清空
 $(document).off(&#39;click&#39;,&#39;.clearBtns&#39;).on(&#39;click&#39;,&#39;.clearBtns&#39;,function(){
 $(eles).val(&#39;&#39;);
 })
}

ログイン後にコピー

そして、さまざまな状況での参考のために:

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

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

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

時、分、秒を含む二重日付:calenders('#extractionDate11', true,true);

3. 問題解決

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

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

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

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

<p class="input-group">
 <input type="text" name="extractionDate11" id="extractionDate11" class="form-control dateStart" placeholder="请选择起始时间" readonly size="30">
 <p class="input-group-addon clearBtns">x</p>
 </p>
 <span class="caret"></span>

ログイン後にコピー

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

outsideClick: function(e) {
 var target = $(e.target);
 // if the page is clicked anywhere except within the daterangerpicker/button
 // itself then call this.hide()
 if (
 // ie modal dialog fix
 e.type == "focusin" ||
 target.closest(this.element).length ||
 target.closest(this.container).length ||
 target.closest(&#39;.calendar-table&#39;).length
 ) return;
 // this.hide();
 if (this.isShowing){
 $(document).off(&#39;.daterangepicker&#39;);
 $(window).off(&#39;.daterangepicker&#39;);
 this.container.hide();
 this.element.trigger(&#39;hide.daterangepicker&#39;, this);
 this.isShowing = false;
 }
 this.element.trigger(&#39;outsideClick.daterangepicker&#39;, this);
},

ログイン後にコピー

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

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

(引用: ここでは、autoUpdateInput 属性を使用できます。autoUpdateInput は、選択時に daterangepicker を開いたり閉じたり、自動的に渡すかどうかに使用されます) input[text] に設定する値この DOM 属性では、初期値 autoUpdateInput を false に設定することで、入力に設定されたプレースホルダーが正常に表示される場合に限り、初期値を空にすることができます。ただし、この属性を設定した後は、空になります。 daterangePikcer がどのように選択されても、入力に値を渡すことは、選択された日付を通常どおり表示する方法がないことを意味するため、$(id).data('daterangepicker').autoUpdateInput を呼び出す必要があります。適切なタイミングで =true に設定しました。最初は、daterangepicker の入力がクリックされたときのデフォルト値は autoUpdateInput=true ですが、入力が表示されると、したがって、この問題を修正するために、daterangepicker のソースコードを変更しました。もちろん、必要な onclick イベントを変更することもできます。 [OK] をクリックし、日付を選択して範囲をクリックしたときに autoUpdateInput を元に戻すので、これを 3 つの場所に設定します)。

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

clickRange: function(e) {
 var label = e.target.getAttribute(&#39;data-range-key&#39;);
 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(&#39;day&#39;);
  this.endDate.endOf(&#39;day&#39;);
 }

 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(&#39;.right .hourselect&#39;).val(), 10);
 if (!this.timePicker24Hour) {
  var ampm = this.container.find(&#39;.right .ampmselect&#39;).val();
  if (ampm === &#39;PM&#39; && hour < 12)
  hour += 12;
  if (ampm === &#39;AM&#39; && hour === 12)
  hour = 0;
 }

ログイン後にコピー

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

clickApply: function(e) {
 this.autoUpdateInput=true;
 this.hide();
 this.element.trigger(&#39;apply.daterangepicker&#39;, this);
 },

ログイン後にコピー