AIR DATEPICKER 경량 크로스 브라우저 jQuery 달력. 날짜 선택기 위젯 jQuery UI Datapicker 선택 양식의 Jquery 날짜 선택기

날짜 선택기 위젯

이 문서는 날짜를 더 쉽게 입력할 수 있는 편리한 대화형 달력인 Datepicker 위젯에 관한 것입니다. 날짜를 표현하는 형식이 다양하기 때문에 사용자로부터 달력 정보를 텍스트로 받는 것은 항상 어려운 일입니다. Datepicker 위젯을 사용하면 날짜를 쉽게 선택하고 일관된 방식으로 표시할 수 있으므로 오류 가능성이 줄어듭니다.

Datepicker 위젯을 생성하는 두 가지 주요 방법이 있습니다. 입력 요소에 연결하는 가장 일반적인 방법은 datepicker() 메서드를 사용하는 것입니다. 이렇게 하면 요소의 모양이 즉시 변경되지는 않지만 요소가 입력 포커스를 받자마자(클릭하거나 키를 사용하여 다른 요소에서 탐색) 달력이 옆에 표시됩니다. 원하는 날짜를 선택하세요.

설명된 유형의 달력을 호출합니다. 팝업 캘린더. 이러한 달력을 만드는 예는 다음과 같습니다.

jQuery UI 입력 (너비: 200px; 텍스트 정렬: 왼쪽) $(function() ( $("#datep").datepicker(); )); 날짜:

그림은 포커스를 입력 필드로 이동할 때 어떤 일이 발생하는지 보여줍니다.

사용자는 날짜를 수동으로 입력하거나 달력을 사용하여 선택할 수 있습니다. 입력 요소가 포커스를 잃거나 사용자가 (또는) 키를 누르면 달력이 사라집니다.

보시다시피 표시된 예에서는 달력이 영어로 표시됩니다. jQuery UI Datepicker 위젯은 61개의 현지화 옵션을 포함하여 전 세계에서 사용되는 다양한 날짜 형식 지정 표준에 대해 상당히 포괄적인 지원을 제공합니다. 액세스하려면 JavaScript 도우미 스크립트 하나를 문서로 가져와서 사용할 현지화 옵션을 Datepicker 위젯에 알려야 합니다. 해당 예는 다음과 같습니다.

... ... $(function() ( $("#datep").datepicker($.datepicker.regional["ru"]); )); ...

jquery-ui-i18n.js 파일은 jqueryui.com에서 다운로드해야 하는 jQuery UI 라이브러리 아카이브 파일의 development-bundle/ui/i18n 폴더에 있습니다. 소스 파일이 있는 폴더에 복사한 후 코드와 같이 문서에 추가합니다. 결과는 그림에 나와 있습니다.

Datepicker 위젯을 사용하는 두 번째 방법은 이를 문서에 삽입하는 것입니다. 이렇게 하려면 jQuery를 사용하여 div 또는 범위 요소를 선택하고 datepicker() 메서드를 호출하세요. 기본 제공 달력은 기반이 되는 HTML 요소가 표시되는 한 표시됩니다. 내장 캘린더를 생성하는 예는 다음과 같습니다.

jQuery UI 레이블 (margin-right:12px; ) 입력 (width: 200px; text-align: left; margin-right: 10px) #wrapper > * (float: left) $(function() ( $("#inline" ).datepicker($.datepicker.regional["ru"]); )); 날짜:

이 예에서는 날짜 선택기 위젯을 생성하기 위해 기본 HTML 요소로 범위 요소를 사용합니다. 결과는 그림에 나와 있습니다.

팝업 개체로 작업하지 않으려는 경우 내장 달력이 유용할 수 있습니다. 물론 날짜 작업이 너무 집중적이어서 항상 달력을 준비하는 것이 적합한 응용 프로그램도 있습니다. 그러나 대부분의 경우 필요할 때까지 캘린더를 숨겨 두는 것이 좋습니다.

포함된 Datepicker 위젯을 숨기고 표시할 때 어려운 점은 이를 문서에 추가하려면 페이지 레이아웃을 변경해야 하므로 표시 문제가 발생할 수 있다는 것입니다. 제 생각에는 대부분의 상황에서는 팝업 위젯을 사용하는 것이 훨씬 더 편리합니다.

이전에 날짜 처리를 다루어 본 적이 있다면 이 범주의 데이터로 작업하는 것이 얼마나 어려운지 잘 알고 있을 것입니다. Datepicker 위젯이 지원하는 다양한 속성은 이러한 복잡성을 반영합니다. 다음 섹션에서는 이 위젯이 구성되는 관련 속성 그룹에 대해 설명합니다.

팝업 및 포함된 달력의 기본 속성을 구성하는 데 여러 구성 옵션이 사용됩니다. 이러한 속성을 사용하면 위젯이 문서에 통합되는 방식을 제어할 수 있으므로 매우 중요합니다. 해당 목록은 아래 표에 나와 있습니다.

가장 간단한 설정이 가장 유용하기도 합니다. defaultDate 옵션을 사용하면 달력을 열 때 자동으로 강조 표시되는 날짜를 지정할 수 있습니다.

defaultDate 옵션을 설정하지 않으면 현재 날짜가 대신 사용됩니다. (물론 이는 사용자 시스템에 설정된 날짜를 의미합니다. 시간대, 일광 절약 시간제 또는 구성 오류로 인해 사용자에게 표시되는 날짜가 예상한 날짜와 다를 수 있습니다.)

이 옵션은 입력 요소에 value 속성이 없는 경우에만 사용됩니다. 이 속성이 존재하는 경우(귀하가 문서에 포함했거나 사용자가 미리 선택한 결과인지 여부) Datepicker 위젯은 해당 값을 사용합니다.

달력을 다른 시작 날짜로 열려면 아래 표에 설명된 방법 중 하나를 사용하여 설정할 수 있습니다.

defauitDate 옵션을 사용하여 지금으로부터 5년 후의 날짜를 지정하는 예는 다음과 같습니다.

$(function() ( $.datepicker.setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker(( defaultDate: "+5y" )); ));

현재 날짜가 2013년 12월이라고 가정해 보겠습니다. 그러면 아래 그림과 같이 defauitDate 옵션 값에 따라 결정되는 날짜는 2018년 12월에 해당합니다.

상대 날짜를 표시하기 위해 설명된 형식을 두 번 이상 접하게 됩니다. 이는 필요한 정확성을 제공하는 매우 유연한 형식입니다. 예제와 마찬가지로 변경하지 않으려는 간격은 생략할 수 있습니다. 예를 들어 "+0d +0w +0m +5y" 값 대신 "+5y" 값을 사용하는 것이 가능합니다. 이 형식의 좋은 점은 다양한 간격에 대해 양수 값과 음수 값을 혼합할 수 있어 원하는 날짜를 정확하게 결정할 수 있다는 것입니다.

showOn 옵션을 사용하면 팝업 달력이 표시되어야 하는 이벤트에 대한 응답을 제어할 수 있습니다. 이 옵션은 다음 세 가지 값 중 하나를 사용할 수 있습니다.

입력 요소가 포커스를 받으면 팝업 달력이 열립니다. 이것이 기본값입니다.

버튼을 클릭하면 팝업 캘린더가 열립니다.

팝업 달력은 버튼을 클릭할 때와 입력 요소가 포커스를 받을 때 모두 나타납니다.

버튼 또는 두 값을 모두 사용하는 경우 Datepicker 위젯은 버튼 요소를 생성하고 문서에서 입력 요소 바로 뒤에 배치합니다. showOn 옵션을 사용하는 예는 다음과 같습니다.

$(function() ( $.datepicker.setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker(( showOn: "both" )); ));

그림과 같이 문서에 버튼이 생겼습니다. 이 예제에서는 showOn 옵션이 둘 다로 설정되어 있으므로 버튼을 클릭할 때와 입력 요소가 포커스를 받을 때 팝업 달력이 표시됩니다.

Datepicker 위젯에 의해 추가된 버튼은 jQuery UI 버튼 위젯이 아닙니다. 모든 버튼을 동일한 유형으로 지정하려면 버튼 요소를 선택하고 jQuery UI 버튼() 메서드를 호출하세요.

버튼 요소는 버튼 이미지 및 버튼 텍스트 옵션을 사용하여 스타일을 지정할 수 있습니다. ButtonImage 옵션을 이미지의 URL로 설정하면 Datepicker 위젯이 해당 이미지를 버튼에 배치합니다. 또한 아래 예와 같이 버튼(줄임표)과 연결된 기본 텍스트를 버튼 텍스트 옵션을 사용하여 다른 텍스트로 바꿀 수 있습니다.

$(function() ( $.datepicker.setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker(( showOn: "both", ButtonText: "Select" )); ) );

버튼이미지와 버튼이미지온리 옵션을 함께 사용하면 버튼을 완전히 없애고 이미지로 대체할 수 있습니다. 해당 예는 다음과 같습니다.

jQuery UI 레이블(여백-오른쪽:12px) 입력(너비: 200px; 텍스트 정렬: 왼쪽) #dpcontainer *(세로 정렬: 중간) #dpcontainer img(너비: 35px;) $(function() ( $.datepicker .setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker(( showOn: "both", ButtonImage: "right.png", ButtonImageOnly: true )); )); 날짜:

이 예에서는 이미지를 right.png로 설정하고 버튼ImageOnly 옵션을 true로 설정합니다. 또한 레이블 및 입력 요소를 기준으로 이미지의 배치를 제어하기 위해 여러 CSS 스타일이 문서에 추가되었습니다. Datepicker 위젯은 img 요소를 배치할 위치를 정확하게 파악할 수 없으므로 문서에서 img 요소를 올바르게 배치하려면 CSS 스타일을 적용해야 했습니다. 버튼 대신 이미지를 사용한 결과는 그림에 나와 있습니다.

Datepicker 위젯의 목적은 사용자가 날짜를 선택할 수 있도록 하는 것이지만, 대부분의 경우 이 프로세스에 몇 가지 제한 사항을 적용해야 합니다. 아래 표에는 사용자가 유효한 날짜만 선택하도록 제한을 설정할 수 있는 설정이 설명되어 있습니다.

constrainInput 옵션을 true로 설정하면 텍스트 필드의 문자 입력을 엄격하게 정의된 형식을 따르는 문자로만 제한할 수 있습니다. 허용되는 문자 집합은 위에서 설명한 현지화 설정에 따라 결정됩니다. Datepicker 위젯이 현지화되지 않은 경우 허용되는 문자에는 숫자와 슬래시(/) 문자만 포함될 것으로 예상할 수 있습니다.

constrainInput 옵션에 지정된 값을 사용한다고 해서 사용자가 99/99/99와 같은 잘못된 날짜를 입력할 수 없다는 의미는 아니지만 오류 가능성이 크게 줄어듭니다. showOn 옵션이 버튼으로 설정된 경우 이 설정은 더욱 중요합니다. 입력 필드에 포커스가 있을 때 팝업 달력이 자동으로 열리지 않기 때문입니다.

사용자는 일반적으로 날짜를 선택하기 위해 달력을 사용하려고 하지만 그렇게 하려면 달력을 확인해야 합니다. 달력이 화면에 표시되지 않으면 모든 사용자가 달력을 열려면 버튼을 클릭하는 것만으로는 충분하지 않다는 것을 깨닫지 못할 것입니다. 사용자에게 텍스트 필드에 날짜를 직접 입력할 수 있는 옵션을 제공하면 입력한 날짜 형식이 올바르지 않을 가능성이 높아집니다. constrainInput 옵션을 사용하는 예는 다음과 같습니다.

$(function() ( $.datepicker.setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker(( constrainInput: true, minDate: "-3", maxDate: "+ 1" )); ));

여기서는 true 값이 이 옵션의 기본값이므로 명확성을 위해서만 constrainInput 옵션에 할당됩니다. 나머지 두 가지 옵션을 사용하면 선택할 수 있는 날짜 범위를 최소 및 최대 날짜로 제한할 수 있습니다.

앞에서 설명한 defaultDate 옵션과 마찬가지로 minDate 및 maxDate 옵션의 값은 null(정의되지 않은 날짜), JavaScript Date 개체, 일 수 및 상대 날짜 문자열이 될 수 있습니다. 이 예에서는 현재 날짜를 기준으로 일 수를 나타내기 위해 숫자 표현이 선택되었습니다.

그림에서 Datepicker가 선택할 수 없는 달력 셀을 비활성화하는 것을 볼 수 있습니다.

월 버튼은 필요하지 않은 경우 자동으로 비활성화됩니다. 달력의 왼쪽과 오른쪽 상단에 위치한 버튼으로 다음 달이나 이전 달로 빠르게 이동할 수 있습니다. 그림과 같이 선택 가능한 날짜는 모두 이번 달이므로 두 버튼 모두 비활성화됩니다. 이러한 상황에서는 필요에 따라 hideIfNoPrevNext 옵션을 true로 설정하여 이러한 버튼을 완전히 숨길 수 있습니다.

minDate 값은 과거 값과 maxDate 값이 미래 값일 필요는 없으며 동시에 두 값일 필요도 없습니다. 사용자가 "준비" 기간 이전의 범위에서 날짜를 선택할 수 있도록 하려면 minDate 옵션을 미래의 값으로 설정하여 아래 예와 같이 사용자가 해당 기간 내의 날짜를 선택하지 못하도록 할 수 있습니다. :

$(function() ( $.datepicker.setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker(( minDate: "+4" )); ))

이 예에서는 사용자가 현재 날짜로부터 4일 이후의 날짜를 선택할 수 없도록 지정했습니다. maxDate 옵션은 정의되지 않았습니다. 이는 사용자가 지정된 "지연 기간" 이후의 모든 날짜를 선택할 수 있음을 의미합니다. 결과는 그림에 나와 있습니다.

이 상황에서는 다음 달 버튼이 활성화되는 반면 이전 달 버튼은 비활성화됩니다(사용자가 선택할 수 있는 과거 날짜가 부족하기 때문에).

minDate 및 maxDate 옵션은 defaultDate 옵션과 함께 작동합니다. 즉, 현재 날짜에 대한 바인딩 범위는 선택 사항입니다.

Datepicker 위젯을 사용하면 numberOfMonths 옵션을 사용하여 달력에 동시에 표시되어야 하는 개월 수를 설정할 수 있습니다. 이는 필요한 개월 수를 지정하거나 월별 달력 그리드의 차원을 정의하는 두 요소의 배열을 지정하여 수행할 수 있습니다.

아래 예는 팝업 위젯에 비해 그리드 크기가 너무 큰 경우가 많기 때문에 내장 Datepicker 위젯에 가장 적합하다고 생각되는 배열 기반 접근 방식을 구현합니다(이에 대해서는 나중에 다시 설명하겠습니다).

$(function() ( $.datepicker.setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker(( numberOfMonths: )); ));

이 예에서는 높이가 1개월이고 너비가 3개월인 달력 그리드를 지정합니다. 결과는 그림에 나와 있습니다.

두 요소의 배열은 숫자 값 3과 동일합니다. numberOfMonths 옵션의 값이 숫자로 지정되면 위젯은 해당 월 수를 한 행에 표시합니다.

팝업 달력으로 작업할 때 이 접근 방식을 거의 사용하지 않는 이유는 큰 그리드의 경우 브라우저 창과 디스플레이 크기에 대해 특정 가정을 해야 하기 때문입니다. Datepicker 팝업 위젯 창은 운영 체제 대화 상자가 아닙니다. 이는 HTML 문서의 일부로 나타나는 교묘한 스타일의 HTML 요소입니다. 즉, 큰 달력 그리드가 작은 화면이나 작은 브라우저 창에 표시되면 문서에 포함된 나머지 정보의 대부분이 화면 밖에 표시됩니다.

달력 헤더에 단순히 월과 연도를 표시하는 대신 드롭다운 목록을 사용하여 관련 기간에 직접 액세스할 수 있습니다. 이 기능은 사용자가 다양한 날짜 중에서 날짜를 선택해야 할 때 속도를 제공하며,changeMonth 및changeYear 옵션을 사용하여 구현됩니다.

이러한 옵션 중 하나를 true로 설정하면 해당 드롭다운 목록이 활성화되고 목록 활성화 여부를 독립적으로 제어할 수 있습니다. 이러한 옵션을 사용하는 예는 다음과 같습니다.

$(function() ( $.datepicker.setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker((changeMonth: true,changeYear: true, yearRange: "-1:+ 2" )); ));

이 시나리오에서는 두 드롭다운 목록이 모두 활성화됩니다. 또한 yearRange 옵션은 사용자가 전환할 수 있는 연도 범위를 제한하는 데 사용됩니다. 필수 범위는 "-1:+2" 값을 사용하여 지정됩니다. 이는 달력을 통해 사용자가 현재 연도로부터 1년 전과 2년 앞으로 이동할 수 있음을 의미합니다.

드롭다운 목록과 지정된 연도 범위가 그림에 표시됩니다.

연도 범위를 정의할 때 yearRange 옵션을 사용하여 실제 연도를 지정할 수 있습니다. 따라서 이 예에서는 "2012:2015" 값을 지정할 수 있습니다.

사용자에게 표시될 때 Datepicker 위젯의 모양을 사용자 정의할 수 있는 여러 가지 속성이 있습니다. 일반적인 날짜 선택 작업의 경우 이전 예에서 이미 친숙한 기본 달력 모양으로 만족할 수 있지만 특정 웹 애플리케이션의 요구 사항에 맞게 모양을 사용자 정의하는 기능은 매우 유용합니다.

Datepicker 위젯의 모양을 변경할 수 있는 속성은 아래 표에 나와 있습니다.

일부 응용 프로그램에서는 특정 날짜가 해당 연도의 주 수를 아는 것이 중요합니다. 예를 들어, 이는 많은 회계 프로그램에서 필요합니다. Datepicker 위젯에서는 아래 예와 같이 showWeek 및 weekHeader 옵션을 사용하여 주 정보 표시를 제어합니다.

$(function() ( $.datepicker.setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker(( showWeek: true, weekHeader: "주 번호" )); ) ) ;

showWeek 옵션이 true이면 달력에 주 번호가 포함된 열이 표시됩니다. 이 열의 기본 헤더는 "주"이지만 weekHeader 옵션을 사용하여 변경할 수 있습니다. 이 예에서는 이름이 "주 번호"로 변경된 주 열을 보여줍니다.

기본적으로 달력에는 이번 달에 해당하는 날짜만 표시됩니다. 이는 달력 눈금에 빈 셀이 있을 수 있음을 의미합니다. 아래 예와 같이 showOtherMonths 옵션을 true로 설정하면 빈 셀이 이전 달과 다음 달의 날짜로 채워지도록 허용할 수 있습니다.

$(function() ( $.datepicker.setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker(( showOtherMonths: true )); ));

결과는 아래 그림에 나와 있습니다. 이 경우 selectOtherMonths 옵션이 true로 설정되면 다른 달에 속한 날짜를 사용할 수 있습니다.

showButtonBar 옵션을 true로 설정하면 Datepicker 위젯 창 하단에 추가 버튼 막대가 추가됩니다. 팝업 달력의 경우 패널에는 "오늘"과 "닫기"라는 두 개의 버튼이 있습니다. 오늘 버튼을 누르면 현재 날짜로 돌아갈 수 있고, 닫기 버튼을 누르면 달력 창을 닫을 수 있습니다. 이러한 버튼에 사용되는 텍스트는 currentText 및 closeText 옵션을 사용하여 변경할 수 있습니다.

goToCurrent 옵션을 true로 설정하면 달력은 현재 날짜가 아닌 선택한 날짜로 돌아갑니다. 이 기능은 Datepicker 위젯이 특정 defaultDate 옵션 값으로 구성된 경우 유용합니다. 날짜를 선택하는 목적이 과거 또는 미래의 사건과 관련된 경우 현재 날짜로 돌아가는 것이 항상 적절한 것은 아닙니다. 해당 예는 다음과 같습니다.

$(function() ( $.datepicker.setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker(( showButtonPanel: true, currentText: "Go", gotoCurrent: true, defaultDate : "+1m +1y" )).val("2014/12/20"); ));

goToCurrent 옵션을 사용하면 버튼을 눌러 선택한 날짜로 이동하게 됩니다. 이 예에서 선택한 날짜는 입력 요소의 value 속성이지만 사용자가 다른 날짜를 선택한 다음 달력을 다시 열면 버튼을 클릭하면 지정한 날짜가 아닌 사용자가 선택한 날짜로 달력이 반환됩니다.

Datepicker 위젯에서 지원하는 방법은 아래 표에 나열되어 있습니다.

내가 getDate 및 setDate 메소드를 사용하는 가장 일반적인 경우는 사용자에게 여러 Datepicker 위젯을 사용하여 전체 날짜 범위를 선택할 수 있는 기능을 제공하려는 경우입니다. 이러한 상황에서는 텍스트 필드에 선택한 날짜를 표시하지 않고 지정된 마감 날짜 사이의 일수만 표시하는 것을 선호합니다. 해당 예는 다음과 같습니다.

jQuery UI 레이블(여백:12px) 입력(너비: 200px; 텍스트 정렬: 왼쪽) #wrapper > * (float: 왼쪽) #result (여백: 자동; 패딩: 10px; 너비: 200px; 지우기: 왼쪽) $( function() ( $("#result").hide(); $.datepicker.setDefaults($.datepicker.regional["ru"]); $("#dateStart, #dateEnd").datepicker(( minDate: "-7d", maxDate: "+7d", onSelect: function(date, datepicker) ( if (datepicker.id == "dateStart") ( $("#dateEnd").datepicker("setDate", date) . datepicker("enable").datepicker("option", "minDate", date) ) if (!$("#dateEnd").datepicker("isDisabled")) ( var startDate = $("#dateStart"). datepicker("getDate"); var endDate = $("#dateEnd").datepicker("getDate"); var diff = endDate.getDate() - startDate.getDate(); $("#dayCount").text( diff).parent().show(); ) ) )).filter("#dateEnd").datepicker("disable"); )); 시작: 종료: 일수:

이 예에서는 두 개의 달력을 만듭니다. 그 중 하나는 문서가 로드된 직후 비활성화된 상태입니다. 사용자의 날짜 선택에 응답하기 위해 onSelect 이벤트가 사용됩니다(나중에 자세히 설명하겠습니다).

사용자가 첫 번째 달력에서 날짜를 선택하면 setDate 메서드를 사용하여 두 번째 달력을 준비하고 getDate 메서드를 사용하여 두 달력에서 날짜를 검색한 다음 첫 번째 날짜와 두 번째 날짜 사이의 날짜 차이를 계산합니다(간단하게 하기 위해 두 날짜가 모두 같은 달의 날짜라고 가정합니다.) 브라우저 창의 문서 보기가 그림에 표시됩니다.

모든 jQuery UI 위젯과 마찬가지로 Datepicker 위젯은 애플리케이션 상태의 중요한 변경 사항에 대한 알림을 받을 수 있는 일련의 이벤트를 지원합니다. 이러한 이벤트는 아래 표에 나와 있습니다.

onSelect 메서드는 이전 섹션에서 설명한 내용을 포함하여 몇 가지 예에서 이미 사용되었기 때문에 다시 설명하지 않겠습니다. 내가 지적하고 싶은 유일한 점은 이벤트 핸들러에 전달된 인수가 선택한 날짜와 이벤트를 발생시킨 Datepicker 인스턴스의 문자열 표현이라는 것입니다.

onChangeMonth 이벤트를 사용하면changeMonth 및changeYear 옵션이나 월 페이지 버튼을 사용하여 활성화된 드롭다운 목록을 통해 사용자가 다른 월이나 연도를 선택할 때 발생하는 이벤트에 응답할 수 있습니다.

onClose 메소드를 사용하면 팝업 캘린더 닫기에 응답할 수 있습니다. 이 이벤트는 사용자가 달력에서 날짜를 선택하지 않은 경우에도 발생합니다. 이벤트 핸들러의 인수는 날짜의 문자열 표현(또는 사용자가 선택하지 않고 창을 닫은 경우 빈 문자열)과 이벤트를 발생시킨 Datepicker 인스턴스입니다.

2012/08/20 롬치크

안녕하세요. 얼마 전 문제가 발생했습니다. 사용자는 입력에 특정 형식으로 날짜를 지정해야 했습니다. 오랫동안 고민하지 않고 입력을 클릭하면 달력이 나타나는지 확인하기로 결정했습니다. 구현하기 어렵지 않은데 왜 그럴까요? 멋진 jQuery 달력 위젯이 있다면 - datepicker. 다음으로 datepicker 설치, 구성 및 연결에 대해 설명하겠습니다.

먼저, 제가 하고 싶은 일에 대한 명확한 예를 들어 보겠습니다.

날짜를 선택하면 달력이 사라지고 선택한 날짜가 텍스트 필드에 나타납니다.
구현을 시작해 보겠습니다.

공식 jQueryUI 웹사이트로 이동합니다. 불필요한 다운로드를 방지하려면 "모든 구성 요소 선택 취소"를 클릭하세요.

그리고 "핵심"을 선택합니다.

기본적으로 그게 전부입니다. 하지만 이 위젯에는 미리 설정된 디스플레이(테마)가 있습니다.
오른쪽 상단에서 적절한 테마를 선택하고 위젯 버전을 선택한 후 "다운로드"를 클릭하세요.

다음 단계에서는 아카이브의 압축을 풉니다.
페이지 구조에 즉시 동의합시다.

이제 다운로드한 아카이브의 jquery-1.8.0.min.js 및 jquery-ui-1.8.23.custom.min.js 파일을 js 폴더에 배치합니다. 이제 다운로드한 아카이브의 css 폴더에서 datepicker 테마 이름(제 경우에는 ui-lightness)이 있는 폴더를 페이지의 css 폴더에 배치합니다. 이것으로 jQuery Datepicker 달력 위젯 설치가 완료되었습니다.
Datepicker 연결을 시작해 보겠습니다. 이미 말했듯이 텍스트 필드를 클릭하면 캘린더를 호출하고 싶습니다. 쉽게 액세스할 수 있도록 입력에 id=”datepicker”를 추가해 보겠습니다.

이제 이 테스트 필드를 클릭하면 달력을 호출하는 작은 jQuery 스크립트를 작성해 보겠습니다.

$(function())( $("#datepicker").datepicker(); ));

저장하고 확인합니다.

가장 먼저 설정할 것은 캘린더의 테마입니다. 아래에는 Datepicker 테마 이름과 표시 내용이 포함된 표가 제공됩니다.

보시다시피 올바른 테마를 선택할 수 있을 만큼 충분한 테마가 있지만 어떤 이유로든 그러한 테마를 찾지 못한 경우 날짜 선택기의 스타일 파일을 변경하여 표준 테마 중 하나를 쉽게 변경할 수 있습니다.
datepicker 설정은 여기서 끝나지 않으며 datepicker 함수를 호출할 때 추가 매개변수를 전달할 수 있습니다.

여기서는 귀하에게 유용할 수 있는 기본 매개변수만 제공했습니다. 매개변수의 전체 목록을 보려면 공식 문서로 이동하세요.
이제 dateFormat 매개변수가 취하는 값을 살펴보겠습니다.

이제 그게 다입니다.
우리는 훌륭한 jQuery 위젯 중 하나인 datepicker 달력 위젯의 설치, 연결 및 구성을 살펴보았습니다.
기사가 마음에 드셨기를 바랍니다. 질문이 있으시면 댓글에 적어주세요.
이것으로 여러분과 성공적인 웹 개발에 작별 인사를 드립니다.

이 기사 시리즈는 숙련된 전문가를 위한 것이 아니라 단지 개발을 위한 자극제일 뿐이며 UI와 jQuery에 대해 전혀 모르는 초보자를 위한 가능성에 대한 일종의 소풍일 뿐이라는 점을 즉시 예약하겠습니다. 일반적인.
갑시다!

다운로드: http://jqueryui.com/download
우리는 샤머니즘 프레임워크, 달력 및 스타일 시트의 현지화를 연결합니다.

이로써 준비는 완료되었습니다.

달력을 만들려면 HTML 한 줄만 있으면 됩니다:

또는 페이지 요소로 사이트에 달력을 포함시키려는 경우:

그리고 몇 개의 js 라인:

$(function())( $.datepicker.setDefaults($.extend($.datepicker.regional["ru"])); $("#datepicker").datepicker(); ));

그래서 우리는 러시아어로 완벽하게 작동하는 달력을 얻었습니다. 하지만 영어나 우크라이나어로 웹사이트를 만든다면 어떨까요? 상황을 우리에게 유리하게 바꾸려면 매개변수 하나만 변경하면 되며 이 작업은 동적으로 수행할 수 있습니다.

$("#datepicker").datepicker("option", $.datepicker.regional["uk"]));

표준 "기본" 기능만으로는 특정 작업을 수행하는 데 항상 충분하지 않습니다. 이제 설정을 약간 편집해 보겠습니다.

$("#datepicker").datepicker(( minDate: "-30", //선택할 수 있는 최소 날짜, 즉 "지금"으로부터 -30일 maxDate: "+1m +1w +3d" //최대 날짜 선택할 수 있습니다(예: "지금"으로부터 + 1개월, 1주, 3일));

위 목록에는 콜백을 포함하는 세 가지 옵션이 있습니다.
beforeShow는 달력이 표시되기 전에 호출되는 함수입니다.
CSS 옵션을 사용하면 입력이 노란색 배경으로 설정됩니다.
OnSelect는 날짜를 선택할 때 호출되는 함수를 정의합니다. 이는 선택한 날짜를 경고에 표시하고 빈 CSS 옵션 값을 전달하여 입력을 이전 형식으로 반환합니다.
onClose는 달력이 닫힐 때 작동하는 함수입니다. 즉, 입력에 흰색 배경을 반환합니다.

• altField는 Datepicker에서 날짜를 선택하자마자 업데이트되어야 하는 다른 필드에 대한 jQuery 선택기입니다. 이 추가 필드의 날짜 형식은 altFormat 옵션을 사용하여 설정됩니다.
• altFormat - altField 옵션에 사용될 날짜 형식입니다. 이러한 설정을 사용하면 사용자에게 하나의 날짜 형식을 표시하고 다른 형식을 계산에 사용할 수 있습니다. 가능한 형식의 전체 목록은 http://api.jqueryui.com/datepicker/에서 확인할 수 있습니다.
• appendText - 각 날짜 선택기 필드 뒤에 표시될 텍스트입니다. 예를 들어 필드를 필수로 표시하는 데 사용할 수 있습니다.
• ButtonImage — 달력을 호출하는 데 사용할 수 있는 버튼에 표시될 이미지의 주소입니다. 'button' 또는 'both' 값을 사용할 때 showOn 옵션과 함께 사용됩니다. ButtonText 옵션에 텍스트를 지정한 경우 해당 텍스트가 이미지의 alt 속성 값이 됩니다.
• ButtonImageOnly - 이 옵션을 true로 설정하면 버튼 이미지 옵션에 주소가 정의된 이미지가 버튼에 표시되지 않고 자체적으로 표시됩니다.
• ButtonText - 달력을 여는 데 사용할 수 있는 버튼에 표시되는 텍스트입니다. 'button' 또는 'both' 값을 사용할 때 showOn 옵션과 함께 사용됩니다.
• changeMonth - 이 옵션에 true 값을 전달하면 드롭다운 목록에서 월을 선택할 수 있습니다.
• changeYear - 이 옵션에 true 값을 전달하면 드롭다운 목록에서 연도를 선택할 수 있습니다.
• closeText - 이 옵션은 showButtonPanel이 true일 경우 showButtonPanel과 함께 사용됩니다. closeText 옵션의 값은 사용되는 경우 현지화 파일에 정의되지만 이 값은 명시적으로 지정하여 재정의할 수 있습니다.
• constrainInput - 기본적으로 옵션은 true이며 위젯 옵션에 정의된 날짜 형식이 텍스트 입력 필드에서 엄격하게 준수되도록 합니다. 이 형식을 따르지 않으려면 옵션을 false로 설정해야 합니다.
• currentText - 이 옵션은 showButtonPanel이 true인 경우 showButtonPanel과 함께 사용됩니다. currentText 옵션의 값은 사용되는 경우 현지화 파일에 정의되지만 이 값은 명시적으로 지정하여 재정의할 수 있습니다.
• dateFormat - 날짜 형식을 정의합니다. dateFormat 옵션의 값은 사용되는 경우 현지화 파일에 정의되지만 이 값은 명시적으로 지정하여 재정의할 수 있습니다. 가능한 형식의 전체 목록은 다음에서 찾을 수 있습니다.
  http://docs.jquery.com/UI/Datepicker/formatDate
• dayNames는 일요일부터 시작하는 요일의 전체 이름을 포함하는 배열입니다. 사용되는 경우 현지화 파일에 정의되지만 이 값은 명시적으로 지정하여 재정의할 수 있습니다.
• dayNamesMin은 일요일부터 시작하는 요일 이름의 약어 2자를 포함하는 배열입니다. 사용되는 경우 현지화 파일에 정의되지만 이 값은 명시적으로 지정하여 재정의할 수 있습니다.
• dayNamesShort - 일요일부터 시작하는 요일 이름의 3자리 약어를 포함하는 배열입니다. 사용되는 경우 현지화 파일에 정의되지만 이 값은 명시적으로 지정하여 재정의할 수 있습니다.
• defaultDate - 날짜 선택 필드가 비어 있는 경우 처음 열 때 강조 표시될 날짜를 설정합니다. 옵션은 Date 객체를 통해 현재로부터의 일수(예: +7 또는 -15) 또는 기간을 지정하는 값 문자열(연도는 'y', 'm')로 지정할 수 있습니다. '는 월, 'w'는 주, 'd'는 일(예: '+1m +7d'), 마지막으로 현재 날짜는 null입니다.
• 지속 시간 — 달력을 열거나 닫을 때 애니메이션 효과의 지속 시간입니다. 값을 문자열('fast', 'normal'(기본값), 'slow') 또는 밀리초 단위의 숫자로 사용할 수 있습니다. 빈 문자열을 전달하면 애니메이션 효과 없이 달력이 열리고 닫힙니다.
• firstDay - 이 옵션은 주의 첫 번째 요일을 설정합니다. 일요일 - 0, 월요일 - 1,... 사용되는 경우 현지화 파일에 정의되지만 이 값은 명시적으로 지정하여 재정의할 수 있습니다.
• gotoCurrent - 옵션 값을 true로 설정하면 오늘 버튼(showButtonPanel: true인 경우 사용 가능)이 현재 날짜 대신 선택한 날짜를 가리킵니다.
• hideIfNoPrevNext - minDate 및 maxDate 옵션을 사용하여 사용 가능한 날짜 범위를 제한하는 경우 범위 끝에 도달하면 뒤로 및 앞으로 화살표가 비활성화됩니다. 하지만 hideIfNoPrevNext 옵션에 true 값을 전달하면 완전히 숨길 수 있습니다.
• isRTL - 오른쪽에서 왼쪽으로 쓰는 언어를 사용하는 경우 이 옵션을 true로 설정해야 합니다. 사용되는 경우 현지화 파일에 정의됩니다.
• maxDate - Date 개체를 통해 현재 일수(예: +7) 또는 기간을 정의하는 값 문자열(연도는 'y', 월은 'm')로 Date 개체를 통해 선택 가능한 최대 날짜를 설정합니다. , 주를 나타내는 'w', 일을 나타내는 'd'(예: '+1y +1m') 또는 제한이 없는 경우 null입니다.
• minDate - Date 개체를 통해 선택 가능한 최소 날짜를 현재 일수(예: -7) 또는 기간을 정의하는 값 문자열(연도는 'y', 월은 'm')로 설정합니다. , 주를 나타내는 'w', 일을 나타내는 'd'(예: '-1y -1m') 또는 제한이 없는 경우 null입니다.
• MonthNames는 월의 전체 이름을 포함하는 배열입니다. 사용되는 경우 현지화 파일에 정의되지만 이 값은 명시적으로 지정하여 재정의할 수 있습니다.
• MonthNamesShort - 월 이름에 대한 3글자 약어를 포함하는 배열입니다. 사용되는 경우 현지화 파일에 정의되지만 이 값은 명시적으로 지정하여 재정의할 수 있습니다.
• NavigationAsDateFormat - 기본적으로 옵션은 false입니다. true로 설정하면 dateFormat 함수가 nextText, prevText 및 currentText 옵션 값에 적용되어 탐색 중에 이전 및 다음 달 이름 등을 표시합니다.
• nextText는 다음 달에 대한 링크로 표시되는 텍스트입니다. 사용되는 경우 현지화 파일에 정의되지만 이 값은 명시적으로 지정하여 재정의할 수 있습니다. ThemeRoller의 스타일 파일을 사용하는 경우 이 값은 아이콘으로 대체됩니다.
• numberOfMonths - 이 옵션은 한 번에 몇 개월을 표시할지 결정합니다. 옵션 값은 행과 열의 수를 각각 정의하는 단순한 숫자이거나 두 요소의 배열일 수 있습니다. 예를 들어 값은 3개월을 두 행으로 나누어 달력을 표시합니다.
• prevText - 이전 달에 대한 링크로 표시되는 텍스트입니다. 사용되는 경우 현지화 파일에 정의되지만 이 값은 명시적으로 지정하여 재정의할 수 있습니다. ThemeRoller의 스타일 파일을 사용하는 경우 이 값은 아이콘으로 대체됩니다.
• shortYearCutoff - 기본값 +10. 이 옵션은 dateFormat이 두 자리 연도 표기법을 사용하고 세기를 결정하기 위한 보상기 역할을 하는 경우에만 사용됩니다. 값이 숫자로 전달되면 그대로 사용됩니다. 값이 문자열로 전달되면 숫자로 변환되어 현재 연도 값에 추가됩니다. 값이 결정되면 연도 값으로 사용되는 모든 데이터(이 값보다 작거나 같음)는 현재 세기의 연도로 간주됩니다. 큰 값은 이전 세기의 연도로 간주됩니다.
• showAnim - 달력을 열 때 애니메이션 유형을 결정합니다. 기본값은 show입니다(닫을 때 hide가 사용됩니다). 추가 파일 연결 없이 'slideDown' 및 'fadeIn' 효과를 사용할 수 있습니다. (닫을 때는 각각 'slideUp' 및 'fadeOut' 효과가 사용됩니다.) 추가로 연결된 경우 jQuery UI 효과를 사용할 수도 있습니다.
• showButtonPanel - 이 옵션을 true로 설정하면 패널에 두 개의 버튼(오늘 날짜로 이동 및 캘린더 닫기)이 표시됩니다.
• showCurrentAsPos - 여러 달을 동시에 표시할 때 이 옵션에 전달된 숫자에 따라 이번 달의 위치가 결정됩니다. 기본값은 0이며 현재 월이 왼쪽 상단에 표시됩니다.
• showMonthAfterYear - 기본값은 false이고 월 이름은 헤더에서 연도 앞에 옵니다. true로 설정하면 월 이름이 연도 뒤에 표시됩니다.
• showOn - 이 옵션의 기본값은 입력 필드를 클릭할 때 달력이 열리는 'focus'입니다. 다른 가능한 값은 '버튼'과 '모두'입니다. 입력 필드 옆에 버튼이 나타납니다. 첫 번째 경우에는 버튼을 클릭할 때 달력이 열리고, 두 번째 경우에는 버튼을 클릭할 때와 입력 필드에 포커스가 있을 때 모두 열립니다.
• showOptions - jQuery UI 효과 중 하나를 사용하는 경우 이 옵션을 사용하여 추가 설정을 전달할 수 있습니다. 예: showOptions: (방향: '위').
• showOtherMonths - 기본값은 false입니다. true인 경우 달력에서는 선택할 수 없는 이전 및/또는 다음 달의 날짜가 표시됩니다.
• stepMonths - 다음 및 이전 링크를 클릭할 때 달력을 이동할 개월 수를 결정합니다. 기본값은 1입니다.
• yearRange - 드롭다운 목록에 표시되는 연도 범위를 제어합니다(changeYear 옵션을 사용하는 경우).

• beforeShow - 여기서 달력을 열기 전에 호출될 함수를 정의할 수 있습니다. 이 함수는 위젯이 작동하는 텍스트 입력 필드를 특성화하는 개체를 인수로 사용합니다.
• beforeShowDay - 이 옵션에서는 선택한 날짜를 인수로 사용하는 사용자 정의 함수를 정의할 수 있습니다. 함수는 배열을 반환해야 하며, 여기서 인덱스가 true 또는 false인 요소는 이 날짜를 선택할 수 있는지 여부를 나타냅니다. index 요소에는 날짜를 표시하는 클래스의 이름이 포함됩니다. 색인이 있는 요소(선택 사항) - 날짜에 대한 도구 설명 텍스트입니다. 마우스를 위에 올리면 달력의 각 날짜에 대해 함수가 호출됩니다.
• onChangeMonthYear - 여기에서 달력의 월이나 연도가 변경될 때 호출될 함수를 정의할 수 있습니다. 이 함수는 세 가지 인수를 사용합니다. 처음 두 인수는 새 연도 및 월 값이고, 세 번째 인수는 날짜 선택기 개체입니다.
• onClose - 이 옵션은 날짜를 선택하지 않고 달력을 닫았을 때 호출되는 함수를 정의합니다.
• onSelect - 이 옵션은 달력에서 날짜를 선택할 때 호출되는 함수를 정의합니다.

• destroy - .datepicker('destroy') 는 Datepicker 위젯의 모든 기능을 완전히 제거합니다. 요소를 초기화 전 상태로 되돌립니다.
• 비활성화 — .datepicker('disable')은 일시적으로 모든 위젯 기능을 비활성화합니다. 활성화 메소드를 사용하여 해당 기능을 다시 활성화할 수 있습니다.
• 활성화 - .datepicker('enable')는 이전에 비활성화 메소드를 사용하여 비활성화된 경우 모든 위젯 기능의 사용을 허용합니다.
• option - .datepicker('option', optionName, ) 이 메서드를 사용하면 초기화 후 위젯 옵션의 값을 가져오거나 설정할 수 있습니다.
• 대화 상자 - .datepicker('dialog', dateText, , , )는 대화 상자 모드에서 Datepicker 위젯을 엽니다. dateText 인수는 달력을 열어야 하는 날짜를 전달합니다. 나머지 인수는 선택 사항입니다. onSelect 인수에는 달력에서 날짜를 선택할 때 호출되는 함수를 전달할 수 있고, settings 인수에는 새 위젯 설정이 포함된 객체를 전달할 수 있으며, pos 인수에는 대화 상자가 있는 좌표를 전달할 수 있습니다. 열릴 것입니다. 여기서 마우스 이벤트를 사용하여 좌표를 결정할 수 있습니다.
• isDisabled - .datepicker('isDisabled') 메소드는 비활성화 메소드가 위젯에 적용된 경우 true를 반환하고 그렇지 않으면 false를 반환합니다.
• hide - .datepicker('hide', )는 이전에 열린 달력을 숨깁니다.
• show - .datepicker('show') 는 달력을 엽니다.
• getDate - .datepicker('getDate') 메소드는 달력에서 선택한 날짜를 반환합니다.
• setDate - .datepicker('setDate', date) 메소드를 사용하면 달력에 날짜를 설정할 수 있습니다. 날짜 인수의 값은 문자열일 수 있습니다(예: 10/25/1917).

접촉 중

/dist 폴더의 스타일과 스크립트를 포함합니다.

달력은 .datepicker-here 클래스가 있는 요소에서 자동으로 초기화되며 옵션은 데이터 속성을 통해 전달될 수 있습니다.

여러 날짜를 선택하려면 매개변수(multipleDates: true)를 전달합니다. 선택한 날짜 수를 제한해야 하는 경우 필요한 수(multipleDates: 3)를 전달합니다.

텍스트 필드가 아닌 요소(예: ...)에서 플러그인을 초기화하거나 매개변수(인라인: true)를 전달합니다.

날짜 선택을 제한하려면 날짜 객체를 전달해야 하는 minDate 및 maxDate를 사용하세요.

$("#minMaxExample").datepicker(( // 오늘을 포함하여 오늘 이후의 날짜만 선택할 수 있습니다. minDate: new Date() ))

범위를 선택하려면 (range: true) 매개변수를 사용하세요. multipleDatesSeparator는 날짜 구분 기호로 사용됩니다.

동일한 날짜를 선택하려면 (toggleSelected: false) 를 설정해야 합니다.

특정 요일을 선택하는 것을 불가능하게 하려면 onRenderCell 메서드를 사용할 수 있습니다.

// 일요일과 토요일을 비활성화합니다. varenabledDays = ; $("#disabled-days").datepicker(( onRenderCell: function (date, cellType) ( if (cellType == "day") ( var day = date.getDay(), isDisabled = 비활성화Days.indexOf(day) ! = -1; 반환( 비활성화: isDisabled ) ) ) ))

Air Datepicker를 사용하면 셀 내용을 원하는 대로 변경할 수 있습니다. 이를 위해 onRenderCell 메소드를 사용할 수도 있습니다. 몇 가지 날짜에 도우미를 추가하고 해당 날짜가 선택되면 임의의 텍스트를 표시해 보겠습니다.

Var eventDates = , $picker = $("#custom-cells"), $content = $("#custom-cells-events"), 문장 = [ … ]; $picker.datepicker(( onRenderCell: function (date, cellType) ( var currentDate = date.getDate(); // 숫자가 `eventDates`에 포함된 경우 도우미 요소를 추가합니다. if (cellType == "day" && eventDates. indexOf( currentDate) != -1) ( return ( html: currentDate + "" ) ) ), onSelect: function onSelect(fd, date) ( var title = "", content = "" // 이벤트가 있는 날짜인 경우 선택한 다음 해당 if (date && eventDates.indexOf(date.getDate()) != -1) ( title = fd; content = 문장; ) $("strong", $content).html(title) $를 표시합니다. ("p", $content).html(content) ) )) // `eventDates`에서 날짜를 즉시 선택합니다. var currentDate = currentDate = new Date(); $picker.data("datepicker").selectDate(new Date(currentDate.getFullYear(), currentDate.getMonth(), 10))

애니메이션의 시작 부분이나 끝 부분에 작업을 추가하려면 onShow 및 onHide 옵션을 사용하세요.

$("#example-show-hide-callbacks").datepicker(( onShow: function(dp, animationCompleted)( if (!animationCompleted) ( log("표시 시작") ) else ( log("표시 완료") ) ), onHide: function(dp, animationCompleted)( if (!animationCompleted) ( log("숨기기 시작") ) else ( log("숨기기 완료") ) ) ))

시간을 선택하려면 옵션(timepicker: true)을 사용하세요. 그러면 시간과 시간 및 분을 설정할 수 있는 두 개의 슬라이더가 추가됩니다.

기본적으로 사용자 컴퓨터의 현재 시간이 설정되며 이 값은 startDate 매개변수를 사용하여 변경할 수 있습니다.

시간 선택 매개변수에 대한 자세한 내용은 에서 확인할 수 있습니다.

시간 형식은 현지화 개체 또는 timeFormat 매개변수에 지정됩니다. 기본값은 24시간 형식입니다. 12시간 형식을 선택하려면 timeFormat에 aa 또는 AA 문자를 추가해야 합니다. 그 후에는 선택한 기간에 따라 위젯에 "AM" 또는 "PM"이라는 표시가 표시됩니다.

시간 또는 분에 대해 가능한 최대/최소 값을 설정하려면 maxHours, minHours, maxMinutes, minMinutes 매개변수를 사용합니다. minDate 및 maxDate 매개변수에 시간을 지정할 수도 있습니다.

09:00부터 18:00까지, 토요일과 일요일은 10:00부터 16:00까지 사용자가 시간을 선택할 수 있는 달력을 만들어 보겠습니다.

// 시작 날짜 설정 var start = new Date(), prevDay, startHours = 9; // 09:00 start.setHours(9); start.setMinutes(0); // 오늘이 토요일 또는 일요일인 경우 - 10:00 if (.indexOf(start.getDay()) != -1) ( start.setHours(10); startHours = 10 ) $("#timepicker-actions-exmpl" ) .datepicker(( timepicker: true, startDate: start, minHours: startHours, maxHours: 18, onSelect: function(fd, d, picker) ( // 선택 항목이 선택 취소된 경우 아무것도 수행하지 않음 if (!d) return; var day = d.getDay(); // 날짜가 변경된 경우에만 달력 상태를 업데이트합니다. if (prevDay != unjust && prevDay == day) return; prevDay = day; // 선택한 요일이 토요일 또는 일요일인 경우, 그런 다음 // 주말 시간을 설정합니다. 그렇지 않으면 초기 값을 복원합니다. if (day == 6 || day == 0) ( picker.update(( minHours: 10, maxHours: 16 )) ) else ( 선택기 .update(( minHours: 9, maxHours: 18 )) ) ) ))

$.fn.datepicker.언어["my-lang"] 객체에 현지화를 추가할 수 있으며 달력을 호출할 때 언어 이름을 언어 매개변수에 전달할 수 있습니다.

$.fn.datepicker.언어["my-lang"] = (...) $(".my-datepicker").datepicker(( 언어: "my-lang" ))

현지화 객체를 언어에 직접 전달할 수도 있습니다.

$(".my-datepicker").datepicker(( 언어: ( 일: [...] ... ) ))

현지화에 일부 필드가 누락된 경우 기본 언어(러시아어)에서 가져옵니다.

문자열 입력

기본값 ""

달력에 대한 추가 수업입니다.

부울 유형

기본값은 거짓입니다

true이면 달력이 계속 표시됩니다.

문자열|객체를 입력하세요.

기본값 "ru"

달력 언어. 문자열이 전달되면 Datepicker.언어 개체에서 언어 검색이 수행되고, 개체가 전달되면 해당 개체에서 데이터를 가져옵니다.

현지화 개체에 일부 필드가 누락된 경우 기본 언어에서 가져옵니다.

날짜 유형

new Date()의 기본값

달력 초기화 시 표시될 날짜입니다.

유형 번호

기본값 ""

주가 시작되는 요일의 인덱스입니다. 가능한 값은 0부터 6까지이며, 0은 일요일이고 6은 토요일입니다. 기본적으로 현지화에서 가져오며, 여기에 값이 전달되면 우선순위가 더 높아집니다.

배열 유형

기본값

문자열 입력

기본값 ""

원하는 날짜 형식, d, m, yyyy, D, M 등의 조합 기본적으로 현지화에서 가져오며, 여기에 값을 전달하면 우선순위가 더 높아집니다.

• @ - 시간(밀리초)
• d - 날짜
• dd - 앞에 0이 붙은 날짜
• D - 오늘의 약식 이름
• DD - 오늘의 전체 이름
• m - 고기 번호
• mm - 앞에 0이 붙은 월 번호
• M - 월의 약식 이름
• MM - 해당 월의 전체 이름
• yy - 축약된 연도
• yyyy - 전체 연도
• yyyy1 - 현재 연도를 포함하는 10년의 첫 번째 연도
• yyyy2 - 현재 연도를 포함하는 10년의 마지막 연도

문자열|jQuery 입력

기본값 ""

altFieldDateFormat 형식으로 선택한 날짜를 값에 포함하는 대체 물 ​​필드입니다.

문자열 입력

기본값은 "@"입니다.

대체 필드의 날짜 형식입니다.

부울 유형

기본값은 true입니다.

true인 경우 선택한 날짜를 클릭하면 선택이 취소됩니다.

부울 유형

기본값은 true입니다.

true인 경우 키보드를 사용하여 달력을 탐색할 수 있습니다.

키보드 단축키:

• Ctrl + → | - 한 달 앞으로 이동
• Ctrl + ← | ↓ - 한 달 전으로 돌아가기
• 쉬프트 + → | - 1년 앞으로 나아가다
• 쉬프트 + ← | ↓ - 1년 전으로 돌아가기
• Alt + → | - 10년 앞으로 나아가다
• Alt + ← | ↓ - 10년 전으로 돌아가다
• Ctrl + Shift + - 다음 보기로 이동
• Esc - 달력을 닫습니다

문자열 입력

기본값은 "왼쪽 아래"입니다.

텍스트 필드를 기준으로 달력 위치를 지정합니다. 첫 번째 값은 기본 위치 지정 축을 지정하고, 두 번째 값은 이 축의 위치를 ​​지정합니다. 예를 들어 (position: "right top") - 클라이언트의 위치를 ​​텍스트 필드의 오른쪽 상단으로 설정합니다.

유형 번호

기본값 12

기본 위치 지정 축에서 오프셋됩니다.

문자열 입력

기본값은 "일"입니다.

달력의 초기 모습입니다. 가능한 값:

• days - 해당 월의 날짜를 표시합니다.
• 개월 - 1년의 달을 표시합니다.
• 년 - 10년의 연도를 표시합니다.

문자열 입력

기본값은 "일"입니다.

셀을 선택하면 다음 보기로 이동하지 않고 활성화되는 최소 달력 보기입니다. 가능한 값은 뷰 매개변수와 동일합니다.

부울 유형

기본값은 true입니다.

true인 경우 다른 달의 날짜가 표시됩니다.

부울 유형

기본값은 true입니다.

true인 경우 다른 달의 날짜를 선택할 수 있습니다.

부울 유형

기본값은 true입니다.

true인 경우 다른 달에서 날짜를 선택하면 이번 달로 전환이 수행됩니다.

부울 유형

기본값은 true입니다.

true인 경우 10년을 표시할 때 다른 10년의 연도가 표시됩니다.

부울 유형

기본값은 true입니다.

true인 경우 다른 수십 년 중에서 연도를 선택할 수 있습니다.

부울 유형

기본값은 true입니다.

true인 경우 다른 10년에서 연도를 선택하면 이 10년으로 전환이 이루어집니다.

날짜 유형

기본값 ""

선택을 위한 최소 날짜입니다. 그 이전의 모든 날짜는 활성화할 수 없습니다.

날짜 유형

기본값 ""

선택 가능한 최대 날짜입니다. 그 이후의 날짜는 모두 선택할 수 없습니다.

부울 유형

기본값은 true입니다.

true인 경우 가능한 최소값보다 작거나 가능한 최대값보다 큰 날짜가 발생하면 "앞으로" 및 "뒤로" 탐색 버튼이 비활성화됩니다.

유형 부울|숫자

기본값은 거짓입니다

true인 경우 날짜를 무제한으로 선택할 수 있습니다. 숫자를 전달하면 선택한 날짜 수가 이 숫자로 제한됩니다.

문자열 입력

기본값 ","

여러 날짜를 하나의 문자열로 결합할 때 사용되는 날짜 구분 기호입니다.

부울 유형

기본값은 거짓입니다

true인 경우 기간 선택 모드가 활성화됩니다. multipleDatesSeparator가 구분 기호로 사용됩니다.

유형 부울|날짜

기본값은 거짓입니다

true인 경우 오늘 버튼이 표시됩니다. 날짜 개체를 전달한 경우 버튼을 클릭하면 전환이 이루어지고 이후에 이 날짜가 선택됩니다.

// 오늘 날짜 선택 $(".datepicker").datepicker(( todayButton: new Date() ))

부울 유형

기본값은 거짓입니다

true인 경우 지우기 버튼이 표시됩니다.

문자열 입력

기본값은 "초점"입니다.

달력이 표시될 이벤트의 유형입니다.

부울 유형

기본값은 거짓입니다

true이면 날짜가 활성화되면 달력이 닫힙니다.

문자열 입력

기본값

"이전 달|연도|10년" 버튼의 내용입니다.

문자열 입력

기본값

버튼 내용은 "다음 달|연도|10년"입니다.

유형 개체

기본값

NavTitles = ( 일: "월, 이야", 월: "yyyy", 연도: "yyyy1 - yyyy2" );

달력 제목의 값은 현재 보기에 따라 다르며 dateFormat 과 동일한 표기법을 사용할 수 있습니다. 누락된 필드는 기본값에서 가져옵니다. html 태그를 사용할 수도 있습니다.

$("#my-datepicker").datepicker(( navTitles: ( days: "체크인 날짜 선택 MM, yyyy") ))

문자열 입력

기본값은 "monthsShort"입니다.

view = "months" 일 때 월 이름으로 사용해야 하는 현지화 객체의 필드는 무엇입니까?

부울 유형

기본값은 거짓입니다

true이면 시간을 선택하는 기능이 추가됩니다.

문자열 입력

기본값 " "

날짜와 시간을 구분합니다.

문자열 입력

기본값은 null입니다.

시간 형식. 기본적으로 현지화에서 가져옵니다. 여기에 값을 전달하면 우선순위가 높아집니다. 12시간 모드를 활성화하려면 timeFormat 매개변수에 "aa" 또는 "AA"를 추가합니다(예: timeFormat: "hh:ii AA"). 가능한 옵션:

• 시간 - 시간
• hh - 시간, 앞에 0이 붙음
• 나 - 분
• ii - 분, 앞에 0이 붙음
• aa - 기간 - "am" 또는 "pm"
• AA - 대문자로 표시된 날짜

유형 번호

기본값 0

최소 시간 값은 0~23입니다. 전달된 값보다 작은 시간은 선택할 수 없습니다.

유형 번호

기본값 23

최대 시간 값은 0~23입니다. 전송된 값보다 큰 시간은 선택할 수 없습니다.

유형 번호

기본값 0

최소 시간 값은 0~59입니다. 전달된 값보다 작은 분 값을 설정할 수 없습니다.

유형 번호

기본값 59

최대 분 값은 0~59입니다. 전달된 값보다 큰 분 값을 설정할 수 없습니다.

유형 번호

기본값 1

시간 선택 단계.

유형 번호

기본값 1

분 선택 단계.

기능 유형

기본값은 null입니다.

날짜 선택 시 콜백 함수입니다.

• 형식화된 날짜 끈- 형식화된 날짜.
• 날짜 날짜|배열- 선택한 날짜의 날짜 객체(multipleDates: true)인 경우 해당 객체의 배열이 전달됩니다.
• inst 물체- 플러그인 인스턴스.

기능 유형

기본값은 null입니다.

달력이 나타날 때 콜백 함수입니다.

• inst 물체- 달력 사본.
• 애니메이션완료 부울

기능 유형

기본값은 null입니다.

달력을 숨길 때 콜백 함수입니다.

• inst 물체- 달력 사본.
• 애니메이션완료 부울- 애니메이션 상태 표시기. false이면 애니메이션이 방금 시작된 것이고, true이면 이미 종료된 것입니다.

기능 유형

기본값은 null입니다.

월이 바뀔 때 콜백 함수입니다.

• 월 숫자- 전환이 이루어진 월 번호(0~12)입니다.
• 년도 숫자- 전환이 이루어진 연도.

기능 유형

기본값은 null입니다.

연도 변경 시 콜백 함수입니다.

• 년도 숫자- 전환이 이루어진 연도

기능 유형

기본값은 null입니다.

10년이 변경될 때 콜백 함수입니다.

• 10년 정렬- 10년이 시작되는 연도와 끝나는 연도로 구성된 배열입니다.

기능 유형

기본값은 null입니다.

캘린더 보기 변경 시 콜백 기능

• 보다 끈- 전환이 이루어진 유형(일, 월, 연도).

기능 유형

기본값은 null입니다.

달력 셀을 그릴 때의 콜백 함수입니다.

• 날짜 날짜- 현재 셀 날짜 객체
• 셀 유형 끈- 현재 셀의 유형(일, 월, 연도).

함수는 세 가지 필드로 구성될 수 있는 객체를 반환해야 합니다.

( html: "", // 사용자 정의 셀 콘텐츠 클래스: "", // 비활성화된 셀에 대한 추가 클래스: "" // true/false, true이면 셀을 선택할 수 없습니다)

플러그인 인스턴스에 대한 액세스는 data 속성을 통해 제공됩니다.

Var myDatepicker = $("#my-elem").datepicker().data("datepicker"); myDatepicker.show();

달력을 보여줍니다.

달력을 숨깁니다.

달력을 삭제합니다.

유형이 일인 경우 다음 달로, 월인 경우 다음 연도로, 년인 경우 다음 10년으로 이동합니다.

유형이 일인 경우 이전 달로, 월인 경우 이전 연도로, 년인 경우 이전 10년으로 이동합니다.

• 날짜 날짜|배열- JavaScript 형식의 날짜 또는 날짜 배열

전달된 날짜를 선택하거나 날짜 배열이 전달된 경우 여러 날짜를 선택합니다. (multipleDates: false)이고 이미 활성 날짜가 있는 경우 비활성화됩니다. (multipleDates: true)인 경우 다른 활성 날짜가 추가됩니다.

• 날짜 날짜- JavaScript Date() 형식의 날짜

전달된 날짜를 선택 취소합니다.

모든 활성 날짜에서 선택 항목을 제거합니다.

• 필드 문자열|객체- 값을 업데이트해야 하는 필드의 이름입니다.
• 필드 문자열|*- 새로운 매개변수 값

달력 옵션을 업데이트합니다. 메서드를 호출하면 자동으로 다시 그려집니다. 한 번에 여러 매개변수를 업데이트할 수 있으며, 이를 위해서는 필수 필드가 포함된 객체를 전달해야 합니다.

Var datepicker = $("#my-elem").datepicker().data("datepicker"); // 하나의 매개변수 업데이트 datepicker.update("minDate", new Date()) // 여러 매개변수 업데이트 datepicker.update(( position: "top right", maxDate: new Date(), todayButton: true ))

달력에 대한 새 보기를 설정합니다.

Datepicker.view = "개월";

새 표시 날짜를 설정하며 JavaScript Date()에 전달되어야 합니다.

수업 중 하나에서 우리는 jQuery UI 라이브러리를 다양한 방법으로 연결하는 방법을 배웠습니다. 오늘 수업의 주제는 날짜 선택기 위젯인 jQuery UI Datapicker입니다.

이 위젯이 필요한 이유는 무엇입니까? 사용자에게 날짜 입력 시 달력을 제공하기 위해 양식을 작성할 때 날짜를 어떤 형식으로 입력할지 고민할 필요가 없습니다. 그러면 리소스 관리자는 동일한 형식으로 데이터를 받습니다.

이 주소: https://jqueryui.com/datepicker/ datapicker 위젯에 대한 여러 옵션이 표시되며, 우리는 두 가지 주요 옵션만 살펴보겠습니다.

사용자가 입력 텍스트 필드를 클릭하면 날짜 선택이 포함된 달력과 월 및 연도 선택이 포함된 추가 메뉴가 나타납니다. 날짜가 하나인 옵션은 고객이 방문 날짜 등을 표시하는 사이트에 적합합니다.

HTML 코드는 단락으로 둘러싸인 식별자 "datapicker"가 있는 단일 입력 태그(p 태그)로 구성됩니다. 단락 대신 이 입력을 사이트의 모든 블록 요소에 배치할 수 있습니다.

날짜:

예제와 같이 jQuery 코드를 복사(소스 보기)하여 사이트에 붙여넣어야 합니다. DOM 트리를 로드한 후 텍스트 필드에서 ID #datapicker로 요소를 수신하고 .datepicker 메소드를 호출합니다. 이제 추가 설정을 설명하는 메소드에 객체(changeMonth: true,changeYear: true )를 전달해야 합니다. 이제 드롭다운 목록을 통해 월과 연도를 선택할 수 있는데, 이는 달력을 통해 유사한 선택을 하는 것보다 조금 더 편리합니다.

$(함수() (
$("#datepicker").datepicker((
변경월: 사실,
변경 연도: true
});
});

날짜 범위 선택 날짜 범위가 있는 Datapicker 위젯은 예약 시스템이 있는 사이트에 적합합니다. 사용자는 첫 번째 달력에 시작 날짜를 지정하고 두 번째 달력에 종료 날짜를 지정합니다. "from" 및 "to" 식별자가 있는 두 개의 입력 텍스트 필드와 해당 텍스트 필드에 연결된 두 개의 레이블을 만들어 보겠습니다.

에서

에게

식별자가 #from인 요소(첫 번째 텍스트 필드)를 가져오고 그 안에 있는 datapicker 메서드를 호출합니다.

$(함수() (
var dateFormat = "mm/dd/yy",
에서 = $("#에서")
.날짜 선택기((

기본 날짜에 일주일을 더한 날짜를 설정해 보겠습니다.

기본 날짜: "+1w",

드롭다운 목록을 사용하여 월을 변경하는 기능.

ChangeMonth: 사실,
개월 수: 3 ))

on 이벤트가 발생하면, 즉 사용자가 드롭다운 목록에서 항목을 선택한 다음 선택한 날짜가 변경되면 두 번째 날짜 선택기를 찾아 최소 날짜를 선택한 날짜와 동일하게 설정합니다.

On("변경", function() (
to.datepicker("option", "minDate", getDate(this));
}),
to = $("#to").datepicker

선택한 날짜를 변경할 때 첫 번째 날짜 선택기를 찾아 최대 날짜를 선택한 날짜와 동일하게 설정합니다.

On("변경", function() (
from.datepicker("option", "maxDate", getDate(this));
});

jQuery Datapicker 위젯의 다양한 매개변수를 사용하는 모든 옵션의 모든 코드 및 시각적 예시는 웹사이트에 있습니다. jqueryui.com.

기본적으로 달력은 영어로 표시되지만 변경할 수 있으며 jQuery UI 라이브러리는 다국어를 지원합니다.

Github에서 필요한 언어 파일을 다운로드하세요.

head 태그에 필수 언어 모듈을 포함합니다.

달력에 대한 텍스트 필드와 필요한 언어를 나열하는 ID가 "locale"인 드롭다운 목록을 만듭니다.

날짜:

영어
러시아어(러시아어)

DOM 트리를 로드한 후 datapicker 개체를 찾습니다. 모든 날짜 선택기의 설정을 변경합니다.

$(함수() (
$("#datepicker").datepicker($.datepicker.regional[ "ru" ]);

"datepicker"의 현지화 변경.

$("#locale").on("변경", function() (

드롭다운 목록에서 새 값을 선택할 때 현지화를 변경합니다.

$("#datepicker").datepicker("옵션",
$.datepicker.regional[ $(this).val() ]);