날짜 시간 범위 선택 플러그 인:daterangepicker 사용 총화(필수 편)

10732 단어 daterangepicker플러그 인
공유 설명:
프로젝트 에서 날짜 와 시간 범 위 를 사용 하여 데 이 터 를 선별 해 야 합 니 다.년 월 일 시 분 초 까지 정확하게 하기;처음에는 layui 의 시간 날짜 로 플러그 인 을 선택 하 였 습 니 다.그러나 IIE 8 에서 처음 클릭 하면 설정 형식 오류 가 발생 합 니 다.오랫동안 연 구 를 했 지만 layui 의 문제 가 아니 라 는 것 이 확실 합 니 다.자신 이 쓴 demo 는 IE8 에서 실행 할 수 있 기 때 문 입 니 다.단지 나의 프로젝트 환경 에서 일부 코드 가 충돌 했다.그래서 boottstrap 플러그 인 daterangepicker 로 바 꿨 습 니 다.많은 자 료 를 보 았 다.홈 페이지 에 문서 결합 하기;거의 다 된 셈 이다.나의 총 결 코드 를 모두 에 게 공유 하기;daterangepicker 플러그 인 을 사용 하 는 초보 자 에 게 도움 이 되 기 를 바 랍 니 다.
총 결 은 네 가지 부분 으로 나 뉜 다.날짜 범위 선택 실현,날짜 시간 선택,두 개의 단일 달력 으로 범위 선택 을 실현 하고 input 대신 div 를 사용 하여 날짜 시간 선택 을 실현 한다.다음은 코드.
css 코드

<style type="text/css">
 body,
 ul,
 p,
 h3,
 img,
 input {
  margin: 0;
  padding: 0;
 }

 .box {
  display: block;
  text-align: center;
  margin: 20px auto;
 }

 input {
  width: 400px;
  height: 40px;
 }

 label {
  display: inline-block;
  width: 90px;
  line-height: 40px;
  height: 40px;
  margin: 0;
  font-weight: normal;
  font-family: "  ";
  background-color: #ddd;
 }
 .divDateSelect{
  width: 185px;
  height: 50px;
  line-height: 50px;
  margin:10px auto;
  border:2px solid #ddd;
  border-radius: 5px;
 }
 </style>
html 코드:

<!--            -->
 <div class="box">
  <label for="datePicker">   </label>
  <input type="text" name="datePicker" class="datePicker" id="datePicker">
 </div>
 <!--          -->
 <div class="box">
  <label for="singledatePicker">   </label>
  <input type="text" name="singledatePicker" class="singledatePicker" id="singledatePicker">
 </div>
 <!--                   -->
 <div class="box">
  <label for="from"> </label>
  <input type="text" name="from" class="from" id="from">
  <label for="to"> </label>
  <input type="text" name="to" class="to" id="to">
 </div>
 <!--    input, div     -->
 <div class="divDateSelect" id="divDateSelect">
  &nbsp;<i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
  <span></span> <b class="caret"></b>
 </div>
js 코드,상하 순서에 따라 html 네 부분 대응

$('input[name="datePicker"]').daterangepicker({
  timePicker: true, //    
  timePicker24Hour: true, //   
  timePickerSeconds: true, //      
  startDate: moment().hours(0).minutes(0).seconds(0), //      
  endDate: moment(new Date()), //       
  maxDate: moment(new Date()), //      
  "opens": "center",
  ranges: {
   // '  ': [moment(), moment()],
   '  ': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
   '  ': [moment().subtract(6, 'days'), moment()],
   ' 30 ': [moment().subtract(29, 'days'), moment()],
   '  ': [moment().startOf('month'), moment().endOf('month')],
   '  ': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
  },
  showWeekNumbers: true,
  locale: {
   format: "YYYY-MM-DD HH:mm:ss", //      
   applyLabel: '  ', //      
   cancelLabel: '  ', //      
   customRangeLabel: '   ',
   daysOfWeek: [' ', ' ', ' ', ' ', ' ', ' ', ' '],
   monthNames: ['  ', '  ', '  ', '  ', '  ', '  ',
    '  ', '  ', '  ', '  ', '   ', '   '
   ],
   firstDay: 1
  },
 }, function(start, end, label) {
  timeRangeChange = [start.format('YYYY-MM-DD HH:mm:ss'), end.format('YYYY-MM-DD HH:mm:ss')];
  console.log(timeRangeChange);
 });

$('input[name="singledatePicker"]').daterangepicker({
  "autoApply": true, //         ;              timePicker:false
  singleDatePicker: true, //   
  showDropdowns: true, //      
  timePicker: true, //    
  timePicker24Hour: true, //   
  timePickerSeconds: true, //      
  startDate: moment().hours(0).minutes(0).seconds(0), //      
  maxDate: moment(new Date()), //      
  "opens": "center",
  showWeekNumbers: true,
  locale: {
   format: "YYYY-MM-DD HH:mm:ss", //      
   applyLabel: '  ', //      
   cancelLabel: '  ', //      
   daysOfWeek: [' ', ' ', ' ', ' ', ' ', ' ', ' '],
   monthNames: ['  ', '  ', '  ', '  ', '  ', '  ',
    '  ', '  ', '  ', '  ', '   ', '   '
   ],
   firstDay: 1
  },
 }, function(start) {
  console.log(start.format('YYYY-MM-DD HH:mm:ss'));
 });

var minDate = null;
 var max = null;
 function fromDate(maxDate) {
  if(!maxDate){
   max = moment(new Date())
  }else{
   max = maxDate;
  }
  $('input[name="from"]').daterangepicker({
   "autoApply": true, //         ;              timePicker:false
   singleDatePicker: true, //   
   showDropdowns: true, //      
   timePicker: true, //    
   timePicker24Hour: true, //   
   timePickerSeconds: true, //      
   // startDate: moment().hours(0).minutes(0).seconds(0), //      
   maxDate: max , //      
   "opens": "center",
   showWeekNumbers: true,
   locale: {
    format: "YYYY-MM-DD HH:mm:ss", //      
    applyLabel: '  ', //      
    cancelLabel: '  ', //      
    daysOfWeek: [' ', ' ', ' ', ' ', ' ', ' ', ' '],
    monthNames: ['  ', '  ', '  ', '  ', '  ', '  ',
     '  ', '  ', '  ', '  ', '   ', '   '
    ],
    firstDay: 1
   },
  }, function(s) {
   toDate(s);
  });
 }
 fromDate()
 function toDate(minDate) {
  $('input[name="to"]').daterangepicker({
   "autoApply": true, //         ;              timePicker:false
   singleDatePicker: true, //   
   showDropdowns: true, //      
   timePicker: true, //    
   timePicker24Hour: true, //   
   timePickerSeconds: true, //      
   // startDate: moment().hours(0).minutes(0).seconds(0), //      
   maxDate: moment(new Date()), //      
   minDate: minDate,
   "opens": "center",
   showWeekNumbers: true,
   locale: {
    format: "YYYY-MM-DD HH:mm:ss", //      
    applyLabel: '  ', //      
    cancelLabel: '  ', //      
    daysOfWeek: [' ', ' ', ' ', ' ', ' ', ' ', ' '],
    monthNames: ['  ', '  ', '  ', '  ', '  ', '  ',
     '  ', '  ', '  ', '  ', '   ', '   '
    ],
    firstDay: 1
   },
  }, function(s) {
   fromDate(s)
  });
 }
 toDate();

var start = moment(new Date());
 function cb(start) {
  $('#divDateSelect span').html(start.format('YYYY-MM-DD HH:mm:ss'));
 }
 $('#divDateSelect').daterangepicker({
  "autoApply": true, //         ;              timePicker:false
  singleDatePicker: true, //   
  showDropdowns: true, //      
  // timePicker: true, //    
  timePicker24Hour: true, //   
  timePickerSeconds: true, //      
  startDate: moment().hours(0).minutes(0).seconds(0), //      
  maxDate: moment(new Date()), //      
  "opens": "center",
  showWeekNumbers: true,
  locale: {
   format: "YYYY-MM-DD HH:mm:ss", //      
   applyLabel: '  ', //      
   cancelLabel: '  ', //      
   daysOfWeek: [' ', ' ', ' ', ' ', ' ', ' ', ' '],
   monthNames: ['  ', '  ', '  ', '  ', '  ', '  ',
    '  ', '  ', '  ', '  ', '   ', '   '
   ],
   firstDay: 1
  },
 }, cb);
 cb(start);
효과 그림:
첫 번 째 부분:

두 번 째 부분:

세 번 째 부분 은 두 번 째 부분 을 나 누 어 첫 번 째 부분의 효 과 를 실현 하 는 것 이다.원 리 는 시작 날 짜 를 정 한 후에종료 날짜 달력 의 최소 선택 날 짜 를 설정 합 니 다.종료 날짜 선택 후;시작 날짜 의 최대 선택 날짜 설정 하기;
네 번 째 부분:

관건 적 인 옵션 의 의 미 는 코드 에 설명 되 어 있 습 니 다.boottstrap 을 포함 한 css 파일 을 가 져 옵 니 다.daterangepicker 의 css 파일;js 는 jquery 의 js 를 포함한다.boottstrap 의 js;daterangepicker 의 js 및 moment.js;
비고:
1 moment.js 는 배열 의 index Of()방법 을 사 용 했 습 니 다.그러나 IE8 은 지원 하지 않 습 니 다.호 환 코드 도입 필요;코드 주소https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/index Of 는 poly fill 에 있 습 니 다.
2 IE8 에서;두 달력 의 범 위 를 선택 하면 연 결 된 달력 의 세로 배열 문제 가 발생 합 니 다.해결 방법 은 두 개의 달력 을 저장 하 는 상자 에 고정된 폭 을 설정 하여 두 개의 달력 의 div 를 내 려 놓 을 수 있 습 니 다.달력 의 div 두 개 를 float:left 로 설정 하면 됩 니 다.
3.홈 페이지 주소;옵션 설정:http://www.daterangepicker.com/#options　　
예:http://www.daterangepicker.com/#examples
4 본 고 는 daterangepicker 를 처음 만난 친 구 를 도 울 수 있 기 를 바 랍 니 다.
이상 의 날짜 와 시간 범위 에서 플러그 인 을 선택 하 십시오.daterangepicker 는 총 결(필수 편)을 사용 하 는 것 이 바로 편집장 이 여러분 에 게 공유 하 는 모든 내용 입 니 다.여러분 에 게 참고 가 되 고 저희 도 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
angular.copy()딥 복사
React Native 정상|아래쪽 내 비게 이 션 사용 팁

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage