부트스트랩 날짜 플러그인 daterangepicker 예제에 대한 자세한 설명

이 글은 주로 부트스트랩 날짜 플러그인 daterangepicker를 사용하는 방법을 자세히 소개합니다. 관심 있는 친구들이 참고하면 도움이 될 것입니다.

오늘은 부트스트랩 날짜 플러그인을 사용했습니다. 검색할 정보가 많지 않은 것 같습니다. 여기에 사용 경험을 적어 보겠습니다.
플러그인 오픈 소스 주소: daterangepicker date control ,
플러그인을 사용하려면 오픈소스의 문서 정보를 따르고 다음 참조를 먼저 포함하세요. :

<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, 부트스트랩 프레임워크 및 moment.js에 대한 참조가 포함되어 있습니다. 및 이 플러그인의 CSS 파일
그러면 대부분의 jq 플러그인과 마찬가지로 이 플러그인도 $.fn의 확장입니다. 따라서 이 컨트롤을 사용하려면 다음을 수행하세요

<script type="text/javascript">
$(document).ready(function() {
 $(&#39;input[name="daterange"]&#39;).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은 로컬 언어 애플리케이션을 구축하는 데 중요한 매개변수입니다(github에서는 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
문제 없습니다. 범위 매개변수를 사용할 수 있습니다:
범위 매개변수는 객체 매개변수이기도 합니다. [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'));
 });

효과는 다음과 같습니다.

이렇게 하면 중국어가 물론, 원하는 스타일을 얻기 위해 자신만의 클래스를 적용하는 데 사용할 수 있는 다른 매개변수도 있습니다. 자세한 내용을 보려면 라디오 타임박스 기능을 사용할 수도 있습니다. , 공식 문서를 주의 깊게 확인하여 필요한 시간 선택 제어를 구축할 수 있습니다.

관련 권장 사항:

JQuery 날짜 플러그인 사용 방법 datepicker_jquery

js 날짜 플러그인 date이달, 3개월 및 올해의 날짜를 가져오는 데 도움_javascript 기술

사용법 JQuery 날짜 플러그인 datepicker Method_jquery

위 내용은 부트스트랩 날짜 플러그인 daterangepicker 예제에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!