집 > 기사 > 웹 프론트엔드 > daterangepicker 컨트롤 사용에 대한 자세한 설명

daterangepicker 컨트롤 사용에 대한 자세한 설명

php中世界最好的语言원래의: 2018-04-17 09:12:383132검색

이번에는 daterangepicker 컨트롤 사용에 대해 자세히 설명하겠습니다. daterangepicker 컨트롤 사용 시 주의사항은 무엇인가요?

이중 달력 기간 선택 플러그인 - daterangepicker는 bootstrap프레임워크의 후반 단계에 있는 시간 제어 기능으로, 여러 기간 옵션을 설정하거나 기간을 사용자 정의할 수 있습니다. 시작 시간, 종료 시간 및 기간은 프로그램에서 설정할 수 있습니다.

1. 인용

daterangepicker는 monent.js 및 jquery를 사용합니다. 따라서 사용 시 daterangepicker를 도입하기 전에 monent.js, jquery, bootstrap을 도입해야 합니다.

rreee

또는 seaj.js를 사용할 때와 같이 modularity를 사용하여 프로그래밍하는 경우 전체 코드 압축 앞에

를 추가하세요. 정의("gallery/daterangepicker/1.3.7/daterangepicker",["jquery","moment","./daterangepicker-bs3.css"],
function(a){a("jquery");window.moment =a("순간"),a("./daterangepicker-bs3.css"),

(daterangepicker.js 소스코드는 중간에 추가 가능합니다) (현재 프로젝트에서 접했는데 사용이 가능한데 아직 명확하지 않아 개선이 필요합니다)

마지막에 참여하세요

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

2. 사용

사용하는 동안 datetimepicker의 매개변수 구성에 주의해야 합니다(공식 웹사이트에서 찾을 수 있음). 여기서 설명하고 싶은 것은 공식 웹사이트에서 소스 코드를 다운로드하고 그에 따라 매개변수를 구성할 수 있다는 것입니다. 다양한 용도를 이해하기 위한 데모

위의 체크박스를 선택하여 다양한 매개변수를 구성할 수 있습니다. 프로젝트에서 사용한 매개변수와 사용 방법에 대한 간략한 설명은 다음과 같습니다.

프로젝트의 전체 시스템으로 인해 이중 날짜 또는 단일 날짜가 있거나 시, 분, 초가 있거나 시, 분, 초가 없습니다. 따라서 쌍별 조합은 네 가지 상황으로 나뉩니다.

그래서 저는 다음을 사용합니다:

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('YYYY-MM-DD HH:mm:ss')+'~'+end.format('YYYY-MM-DD HH:mm:ss')));
 }else if(secondNot ==false&&dobubble ==true){
  $(eles).val($.trim(start.format('YYYY-MM-DD')+'~'+ end.format('YYYY-MM-DD')));
 }else if(secondNot ==false&&dobubble ==false){
  $(eles).val(start.format('YYYY-MM-DD'));
 }else if(secondNot ==true&&dobubble ==false){
  $(eles).val(start.format('YYYY-MM-DD HH:mm:ss'));
 }
 });
 //清空
 $(document).off('click','.clearBtns').on('click','.clearBtns',function(){
 $(eles).val('');
 })
}

그리고 다양한 상황에 대한 인용문:

시, 분, 초가 없는 단일 날짜: 달력("#bgrq",false,false);

시, 분, 초가 포함된 단일 날짜: Calendars('#inputDate',false,true);

시, 분, 초가 없는 이중 날짜: 달력('#extractionDate11',true,false);

시, 분, 초가 포함된 이중 날짜: Calendars('#extractionDate11',true,true);

3. 문제 해결

1. 드롭다운 날짜 상자를 클릭하고 빈 공간을 클릭하면 날짜 상자가 닫히고 값 전송 문제가 있습니다

daterangepicker의 기능은 드롭다운 날짜 상자를 클릭한 후 페이지의 다른 곳을 클릭하면 날짜 상자가 닫히고 이전에 선택한 날짜 값이 자동으로 날짜 상자에 저장되므로 우리는 이러한 것에 익숙합니다. 작업을 취소하는 것과 동일하므로 소스 코드를 수정하세요.

소스 코드에서 OutsideClick 메소드를 검색하세요:

this.hide()를 교체하세요.

rreee

동시에 표시 방법도 변경해야 합니다. 그렇지 않으면 사용자가 이중 날짜를 선택할 때 날짜 하나만 선택한 후 빈 공간을 클릭하고 다음에 입력 상자를 클릭할 때 오류가 발생합니다. 신고되어 더 이상 사용할 수 없습니다.

rreee

2. 처음에 날짜가 비어있는 문제

Daterangepicker는 시작 부분에 있는 바인딩된 입력 상자, 즉 매개변수에 현재 날짜를 자동으로 할당합니다. "autoUpdateInput":참/거짓, 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中文网其它相关文章！

daterangepicker 컨트롤 사용에 대한 자세한 설명

관련 기사