집 > 기사 > 웹 프론트엔드 > 부트스트랩 날짜 플러그인 daterangepicker 예제에 대한 자세한 설명

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

小云云원래의: 2018-05-15 10:04:433088검색

이 글은 주로 부트스트랩 날짜 플러그인 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 함수는 다음과 같이 매개변수 개체와 콜백 함수를 허용할 수 있습니다.

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

콜백 함수는 날짜 변경에는 시작 시간, 종료 시간 및 레이블 이름의 세 가지 매개변수가 있습니다. ajax 요청과 같은 여기에서 수행하려는 작업을 수행할 수 있습니다

위의 내용으로 날짜 제어의 영어 버전을 만들 수 있습니다

다음으로 locale과 ranges라는 두 가지 매개변수에 집중하겠습니다

첫 번째는 locale 매개변수입니다. Locale은 로컬 언어 애플리케이션을 구축하는 데 중요한 매개변수입니다(github에서는 locale이 개체 매개변수를 허용하지만 개체의 속성을 지정하지 않는다고 말합니다). )

다음은 플러그인의 로케일 기본 속성입니다

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

이 플러그인을 중국어 플러그인으로 만들기 위해 이러한 매개변수만 변경하면 됩니다

$(&#39;input[name=datetime]&#39;).daterangepicker({ 
    format: &#39;YYYY-MM-DD&#39;,
    startDate: &#39;2013-01-01&#39;,
    endDate: new Date(),
    maxDate:new Date(),
    locale:{
      applyLabel: &#39;确认&#39;,
      cancelLabel: &#39;取消&#39;,
      fromLabel: &#39;从&#39;,
      toLabel: &#39;到&#39;,
      weekLabel: &#39;W&#39;,
      customRangeLabel: &#39;Custom Range&#39;,
      daysOfWeek:["日","一","二","三","四","五","六"],
      monthNames: ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],
    }
  }, function (start, end, label) {
    alert(&#39;A date range was chosen: &#39; + start.format(&#39;YYYY-MM-DD&#39;) + &#39; to &#39; + end.format(&#39;YYYY-MM-DD&#39;));
  });

효과는 다음과 같습니다:

물론, github에서 효과를 얻고 시간을 추가하기 위한 단축키를 추가할 수도 있습니다:
Improvely.com
문제 없습니다. 범위 매개변수를 사용할 수 있습니다:
범위 매개변수는 객체 매개변수이기도 합니다. [start,end] name은 바로가기 키의 이름이며 각각 시간의 시작과 끝을 나타내는 배열을 허용합니다

$(&#39;input[name=datetime]&#39;).daterangepicker({ 
  format: &#39;YYYY-MM-DD&#39;,
  startDate: &#39;2013-01-01&#39;,
  endDate: new Date(),
  maxDate:new Date(),
  locale:{
   applyLabel: &#39;确认&#39;,
   cancelLabel: &#39;取消&#39;,
   fromLabel: &#39;从&#39;,
   toLabel: &#39;到&#39;,
   weekLabel: &#39;W&#39;,
   customRangeLabel: &#39;选择时间&#39;,
   daysOfWeek:["日","一","二","三","四","五","六"],
   monthNames: ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],
  },
  range: {
   "近期": [&#39;2015-04-12&#39;,new Date()]
  }
 }, function (start, end, label) {
  alert(&#39;A date range was chosen: &#39; + start.format(&#39;YYYY-MM-DD&#39;) + &#39; to &#39; + end.format(&#39;YYYY-MM-DD&#39;));
 });

효과는 다음과 같습니다.

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

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

관련 기사