boottstrap 날짜 플러그 인 daterangepicker 사용 설명

오늘 boottstrap 날짜 플러그 인 을 사 용 했 는데 검색 한 자료 가 많 지 않 은 것 같 습 니 다.
플러그 인 원본 주소:daterangepicker 날짜 컨트롤,
플러그 인 사용 은 원본 에 있 는 문서 정보 에 따라 하면 됩 니 다.다음 참조 부터 포함 합 니 다.

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

jquery,boottstrap 프레임 워 크 에 대한 참조 및 날짜 처리 에 사용 되 는 moment.js 를 포함 하고 마지막 으로 이 플러그 인의 js 와 css 파일 을 불 러 옵 니 다.
그리고 대부분의 jq 플러그 인과 마찬가지 로 이 플러그 인 도$.fn 의 확장 을 위해 다음 과 같은 작업 을 수행 합 니 다.

<script type="text/javascript">
$(document).ready(function() {
 $('input[name="daterange"]').daterangepicker();
});
</script>

jq 로 삽입 할 요 소 를 가 져 오고 daterangepicker 함 수 를 실행 하면 기본 스타일 과 속성 을 사용 할 수 있 습 니 다.
그러나 이것 만 있 으 면 안 됩 니 다.daterangepicker 함 수 는 매개 변수 대상 과 반전 함 수 를 받 아들 일 수 있 습 니 다.다음 과 같 습 니 다.

$('input[name="daterange"]').daterangepicker(
 { 
  format: 'YYYY-MM-DD',
  startDate: '2013-01-01',
  endDate: '2013-12-31'
 },
 function(start, end, label) {
  alert('A date range was chosen: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
 }
);

리 셋 함 수 는 날짜 가 변 경 된 후에 세 개의 인자 가 실 행 됩 니 다.시작 시간,종료 시간,탭 이름 등 이 있 습 니 다.ajax 요청 과 같은 작업 을 수행 할 수 있 습 니 다.
이상 은 영문 판 날짜 컨트롤 을 구축 할 수 있 습 니 다.

다음은 locale 과 ranges 두 가지 인 자 를 소개 하 겠 습 니 다.
우선 locale 이라는 매개 변수 locale 은 로 컬 언어 응용 을 구축 하 는 중요 한 매개 변수 입 니 다.
다음은 플러그 인 에서 locale 기본 속성 입 니 다.

{ 
applyLabel: ‘Apply', 
cancelLabel: ‘Cancel', 
fromLabel: ‘From', 
toLabel: ‘To', 
weekLabel: ‘W', 
customRangeLabel: ‘Custom Range', 
daysOfWeek: moment.weekdaysMin(), 
monthNames: moment.monthsShort(), 
firstDay: moment.localeData()._week.dow };

우 리 는 이 매개 변 수 를 변경 해야만 이 플러그 인 을 중국어 플러그 인 으로 만 들 수 있다.

$('input[name=datetime]').daterangepicker({ 
    format: 'YYYY-MM-DD',
    startDate: '2013-01-01',
    endDate: new Date(),
    maxDate:new Date(),
    locale:{
      applyLabel: '  ',
      cancelLabel: '  ',
      fromLabel: ' ',
      toLabel: ' ',
      weekLabel: 'W',
      customRangeLabel: 'Custom Range',
      daysOfWeek:[" "," "," "," "," "," "," "],
      monthNames: ["  ","  ","  ","  ","  ","  ","  ","  ","  ","  ","   ","   "],
    }
  }, function (start, end, label) {
    alert('A date range was chosen: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
  });

효 과 는 다음 과 같 습 니 다:

물론 github 의 그 효 과 를 실현 하고 싶 을 수도 있 습 니 다.시간 을 추가 하 는 단축 키 를 추가 하고 싶 습 니 다.
Improvely.com
문제 없습니다.range 매개 변 수 를 사용 하여 실현 할 수 있 습 니 다.
range 매개 변수 도 대상 매개 변수{name:[start,end]name 은 단축 키 의 이름 입 니 다.하나의 배열 을 받 아들 이 는 것 은 시간의 시작 과 끝 입 니 다.

$('input[name=datetime]').daterangepicker({ 
  format: 'YYYY-MM-DD',
  startDate: '2013-01-01',
  endDate: new Date(),
  maxDate:new Date(),
  locale:{
   applyLabel: '  ',
   cancelLabel: '  ',
   fromLabel: ' ',
   toLabel: ' ',
   weekLabel: 'W',
   customRangeLabel: '    ',
   daysOfWeek:[" "," "," "," "," "," "," "],
   monthNames: ["  ","  ","  ","  ","  ","  ","  ","  ","  ","  ","   ","   "],
  },
  range: {
   "  ": ['2015-04-12',new Date()]
  }
 }, function (start, end, label) {
  alert('A date range was chosen: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
 });

효 과 는 다음 과 같 습 니 다:

이렇게 해서 중국어 날짜 플러그 인 이 생 겼 습 니 다.물론 다른 매개 변 수 는 자신의 class 를 추가 하여 boottstrap 을 쓰 는 스타일 을 사용 하여 자신 이 원 하 는 스타일 을 실현 할 수 있 고 단일 시간 상자 함수 로 도 실현 할 수 있 습 니 다.구체 적 인 것 은 공식 문 서 를 자세히 살 펴 보고 자신 이 필요 로 하 는 시간 선택 컨트롤 을 구축 할 수 있 습 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.