ホームページ > 記事 > ウェブフロントエンド > ブートストラップ時間制御の daterangepicker の使用方法

ブートストラップ時間制御の daterangepicker の使用方法

不言オリジナル: 2018-06-25 11:35:162271ブラウズ

この記事では、主にブートストラップ時間制御 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 のソースコードを途中に追加できます) (プロジェクト内で見つかります)現時点では、自分で投げた後は使用できますが、まだ明確ではないため、改善が必要です）

最後に

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

を追加します

2.使用中に

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

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

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

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

/**
 * 日历
 * @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;);
 })
}

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

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

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

そして、さまざまな状況での参考として:

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

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

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

3. 問題解決

1. をクリックします。ドロップダウン日付ボックスをクリックし、空白スペースをクリックすると、日付ボックスが閉じ、値の問題を渡します

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

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

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

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 つの日付を選択したとき、1 つの日付だけを選択して空白をクリックしたとき、次にクリックしたときに変更されます。入力ボックスではエラーが報告され、使用できなくなります。

/*this.oldStartDate = this.startDate.clone();
this.oldEndDate = this.endDate.clone();
this.previousRightTime = this.endDate.clone();*/

this.oldStartDate = this.startDate;
this.oldEndDate = this.endDate;
this.previousRightTime = this.endDate;

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

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

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

1) clickRange メソッドの 1210 行目: 比較するために次のコードを追加します。りー

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);
 },

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

ブートストラップ時間制御の daterangepicker の使用方法

関連記事