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

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 플러그인과 마찬가지로 매우 간단합니다.

$('#datepicker').dateRangePicker(option);

구성 매개변수

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

{
    format: 'YYYY-MM-DD',
    separator: ' to ',
    language: 'auto',
    startOfWeek: 'sunday',// 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:
    {        //'prev-days': [1,3,5,7],
        'next-days': [3,5,7],        //'prev' : ['week','month','year'],
        'next' : ['week','month','year']
    },
    customShortcuts : [],
    inline:false,
    container: 'body',
    alwaysOpen:false,
    singleDate:false,
    batchMode:false,
    beforeShowDay: [function],    dayDivAttrs: [],    dayTdAttrs: [],    applyBtnClass: ''
}

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에서 날짜 범위를 선택하면 세 가지 이벤트가 트리거됩니다.

$('#datepicker')
.dateRangePicker()
.bind('datepicker-change',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('datepicker-apply',function(event,obj){    console.log(obj);
})
.bind('datepicker-close',function(){    console.log('close');
});

API

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

$(dom).data('dateRangePicker')
    .setDateRange('2013-11-20','2013-11-25');  //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 중국어 웹사이트의 기타 관련 기사를 참조하세요!