jQuery 날짜 범위 선택기 사용에 대한 튜토리얼

小云云
풀어 주다: 2017-11-25 09:24:12
원래의
2542명이 탐색했습니다.

jQuery는 HTML과 JavaScript 간의 작업을 단순화하는 크로스 브라우저 JavaScript 라이브러리입니다. 이 기사에서는 jQuery 날짜 범위 선택기를 사용하는 방법에 대한 튜토리얼을 공유합니다.

준비:

이 날짜 선택기 플러그인을 사용하려면 jQuery 1.3.2+ 및 Moment 2.2.0+의 지원이 필요합니다.

<link rel="stylesheet" href="css/daterangepicker.css" /><script src="js/moment.min.js"></script><script src="js/jquery.daterangepicker.js"></script>
로그인 후 복사

HTML 구조

입력 상자인 날짜 선택기를 배치해야 하는 곳에 다음 html 구조를 추가하세요.

<input type="text" id="datepicker" value="">
로그인 후 복사

플러그인 호출

jQuery 날짜 범위 선택기 플러그인 호출은 다른 일반적인 jQuery 플러그인과 마찬가지로 매우 간단합니다.

$(&#39;#datepicker&#39;).dateRangePicker(option);
로그인 후 복사

구성 매개변수

날짜 선택기의 기본 구성 매개변수는 다음과 같습니다. :

{
    format: &#39;YYYY-MM-DD&#39;,
    separator: &#39; to &#39;,
    language: &#39;auto&#39;,
    startOfWeek: &#39;sunday&#39;,// or monday
    getValue: function()    {        return this.value;
    },
    setValue: function(s)    {        this.value = s;
    },
    startDate: false,
    endDate: false,
    minDays: 0,
    maxDays: 0,
    showShortcuts: true,
    time: {
        enabled: false
    },
    shortcuts:
    {        //&#39;prev-days&#39;: [1,3,5,7],
        &#39;next-days&#39;: [3,5,7],        //&#39;prev&#39; : [&#39;week&#39;,&#39;month&#39;,&#39;year&#39;],
        &#39;next&#39; : [&#39;week&#39;,&#39;month&#39;,&#39;year&#39;]
    },
    customShortcuts : [],
    inline:false,
    container: &#39;body&#39;,
    alwaysOpen:false,
    singleDate:false,
    batchMode:false,
    beforeShowDay: [function],    dayDivAttrs: [],    dayTdAttrs: [],    applyBtnClass: &#39;&#39;
}
로그인 후 복사

format(문자열): 순간 날짜 형식입니다. Moment 문서를 보려면 여기를 클릭하세요.

separator(문자열): 날짜 문자열 사이의 구분 기호입니다.

언어(문자열): 사전 정의된 언어는 "en"과 "cn"입니다. 이 매개변수를 사용하여 언어를 사용자 정의할 수 있습니다. 브라우저가 언어 자체를 감지하도록 "자동"으로 설정할 수도 있습니다.

startOfWeek(문자열): "일요일" 또는 "월요일".

getValue(함수): DOM 요소에서 날짜 범위를 가져올 때 이 함수가 호출되며 함수의 컨텍스트는 datepicker DOM으로 설정됩니다.

setValue(함수): DOM 요소에 날짜 범위를 쓸 때 이 함수가 호출됩니다.

startDate(문자열 또는 false): 사용자가 허용하는 가장 빠른 날짜를 정의하며 형식은 형식과 동일합니다.

endDate(문자열 또는 false): 사용자가 허용하는 마지막 날짜를 정의합니다. 형식은 형식과 동일합니다.

minDays(숫자): 이 매개변수는 날짜 범위의 최소 일수를 정의합니다. 0으로 설정하면 최소 일수에 제한이 없음을 의미합니다.

maxDays(숫자): 이 매개변수는 날짜 범위의 최대 일수를 정의합니다. 0으로 설정하면 최대 일수에 제한이 없음을 의미합니다.

showShortcuts(Boolean): 바로가기 영역을 표시하거나 숨깁니다.

time(객체): 이 매개변수가 허용되면 시간 범위 선택이 추가됩니다.

shortcuts(개체): 바로가기 버튼 버튼을 정의합니다.

customShortcuts(배열): 사용자 정의 바로가기 버튼을 정의합니다.

inline (Boolean): 오버레이 모드 대신 날짜 선택기를 렌더링하려면 인라인 모드를 사용하세요. true로 설정할 경우 컨테이너 매개변수를 함께 설정해야 합니다.

container (String, css selector || DOM Object): 렌더링할 날짜 선택기 DOM 요소입니다.

alwaysOpen(부울): 인라인 모드를 사용하는 경우 페이지가 로드될 때 날짜 선택기를 렌더링할 수 있습니다. 이 매개변수를 true로 설정하면 "닫기" 버튼이 숨겨집니다.

singleDate (Boolean): 단일 날짜를 선택하려면 true로 설정합니다.

batchMode(false / '주' / '월'): 자동 일괄 처리 모드입니다.

Events

이 날짜 선택기가 DOM에서 날짜 범위를 선택하면 세 가지 이벤트가 트리거됩니다.

$(&#39;#datepicker&#39;)
.dateRangePicker()
.bind(&#39;datepicker-change&#39;,function(event,obj){    console.log(obj);    // obj will be something like this:
    // {
    //      date1: (Date object of the earlier date),
    //      date2: (Date object of the later date),
    //      value: "2013-06-05 to 2013-06-07"
    // }})
.bind(&#39;datepicker-apply&#39;,function(event,obj){    console.log(obj);
})
.bind(&#39;datepicker-close&#39;,function(){    console.log(&#39;close&#39;);
});
로그인 후 복사

API

$(dom).dateRangePicker()를 호출한 후:

$(dom).data(&#39;dateRangePicker&#39;)
    .setDateRange(&#39;2013-11-20&#39;,&#39;2013-11-25&#39;);  //set date range, two date strings should follow the `format` in config object
    .clear();   // clear date range
    .close();   // close date range picker overlay
    .open();    // open date range picker overlay
    .destroy(); // destroy all date range picker related things
로그인 후 복사

위는 jQuery 날짜 범위 선택기를 사용하는 방법에 대한 튜토리얼입니다. 모두에게 도움이 되기를 바랍니다.

관련 권장 사항:

날짜 형식이 올바른지 확인하는 PHP

J의 현재 날짜와 시간을 가져오는 방법 및 기타 작업

현재 날짜와 시간을 가져오는 JavaScript 방법에 대한 자세한 설명 및 시간

위 내용은 jQuery 날짜 범위 선택기 사용에 대한 튜토리얼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿