jQuery를 UI의 API - 날짜 선택 부재 (날짜 선택기 위젯)

이전 : jQuery를 UI의 API - Button 구성 요소 (버튼 위젯)

다음 :의 jQuery UI의 API - 대화 상자 구성 요소 (대화 상자 위젯)

범주

용법

설명 : 팝업 상자 또는 인라인 달력에서 날짜를 선택합니다.

새 버전 : 1.0

jQuery를 UI의 날짜 선택 (날짜 선택기는) 플러그인을 구성하는 페이지로 높이를 추가 할 날짜를 선택합니다. 당신은 날짜 형식 및 언어를 사용자 선택 가능한 날짜 범위를 제한, 버튼 및 기타 탐색 옵션을 추가 할 수 있습니다.

기본적으로 할 때 작은 오버레이 오픈 날짜 선택에 관련된 텍스트 필드 중점을두고 있습니다. 인라인 캘린더를 들어, 단순히 날짜가 사업부 또는 범위에 부착 선택합니다.

키보드 상호 작용

날짜 선택기가 열려있는 경우, 다음과 같은 키보드 명령을 사용할 수 있습니다 :

PAGE UP : 이전 달로 이동합니다.
페이지 DOWN : 다음 달로 이동합니다.
CTRL + PAGE는 UP : 전년 이동합니다.
CTRL + PAGE는 DOWN : 다음 해로 이동합니다.
CTRL + 홈 : 현재 월 이동합니다. 날짜 선택이 닫혀 있으면 열립니다.
CTRL + LEFT : 하루에 이동.
CTRL + RIGHT : 다음날로 이동합니다.
CTRL + UP : 지난 주에 이동.
CTRL + DOWN : 다음 주로 이동합니다.
입력 : 포커스 날짜를 선택합니다.
CTRL +의 END 닫기 날짜 선택하고, 날짜를 취소합니다.
ESCAPE 닫기 날짜 선택을, 선택의 여지가 없습니다.

주요 특징

$ .datepicker.setDefaults (설정)

모든 날짜 선택에 대한 기본 설정을 변경합니다.

사용 option() 개별 인스턴스에 대한 설정을 변경하는 방법을.

코드 예제 :

모든 날짜 선택을 설정하거나 아이콘을 클릭하면 때 초점을 엽니 다.

$ .datepicker.setDefaults ({
  showOn : "모두",
  buttonImageOnly : 사실,
  buttonImage "calendar.gif"
  buttonText : "달력"
});

설정 모든 날짜 선택 프랑스어 텍스트를 가지고있다.

$ .datepicker.setDefaults ($ .datepicker.regional [ "프랑"]);

$ .datepicker.formatDate (형식, 날짜, 설정)

지정된 형식의 문자열 값에 날짜를 포맷.

형식은 다음과 조합 될 수있다 :

D - 달의 날 (앞에 0이없는)
DD - 해당 월의 일 (2 자리)
오 - (0이 붙지 않는) 년의 일
OO - 올해의 날 (세 자리)
짧은 이름 일 - D
긴 이름 일 - DD
m - (0이 붙지 않는) 올해의 처음 몇 달
mm - 올해의 처음 몇 개월 (2 자리)
달의 짧은 이름 - M
달 긴 이름 - MM
Y - 년 (2 자리)
전년 동기 대비 - 년 (네 자리 숫자)
@ - 유닉스 타임 스탬프 (1970년 1월 1일 이후 밀리 초)
! - 윈도우 시계 (01/01/0001 이후 100ns의)
'...'- 텍스트
''- 작은 따옴표를
기타 - 텍스트

일부도 있습니다 $.datepicker 미리 정의 된 표준 날짜 형식은 :

ATOM - 'YY-MM-DD'(그리고 RFC 3339 / ISO 8601와 동일)
COOKIE - 'D, DD의 M 전년 동기 대비'
ISO_8601 - 'YY-MM-DD'
RFC_822 - 'D, D의 M y를'(RFC 822 참조)
RFC_850 - 'DD, DD-내'(RFC 850 참조)
RFC_1036 - 'D, D의 M y를'(RFC 1036 참조)
RFC_1123 - 'D, D의 M 전년 동기 대비는'(1123 RFC 참조)
RFC_2822 - 'D, D의 M 전년 동기 대비는'(2822 RFC 참조)
RSS - 'D, D의 M y를'합니다 (RFC 822와 동일)
틱 - '!'
TIMESTAMP - '@'
W3C - 'YY-MM-DD'(ISO 8601과 같은)

코드 예제 :

ISO 형식으로 날짜를 표시합니다. "2007년 1월 26일를."생산

$ .datepicker.formatDate ( "YY-MM-DD"새로운 날짜 (2007, 1-1, 26));

프랑스어 날짜 표시 형식을 확장한다. "SAMEDI, 일 목 14, 2007"를 생성합니다.

$ .datepicker.formatDate ( "DD, MM d를, 전년 동기 대비"새로운 날짜 (2007, 7-1, 14), {
  dayNamesShort : $ .datepicker.regional [ "FR"] .dayNamesShort,
  dayNames라는 : $ .datepicker.regional [ "FR"] .dayNames,
  monthNamesShort : $ .datepicker.regional [ "FR"] .monthNamesShort,
  의 MonthNames : $ .datepicker.regional [ "FR"] .monthNames
});

$ .datepicker.parseDate (형식, 값, 설정)

지정된 날짜 형식에서 문자열 값을 추출합니다.

형식은 다음과 조합 될 수있다 :

D - 달의 날 (앞에 0이없는)
DD - 해당 월의 일 (2 자리)
오 - (0이 붙지 않는) 년의 일
OO - 올해의 날 (세 자리)
D - 일주일의 짧은 이름
DD는 - 주 긴 몇 가지 이름
m - (0이 붙지 않는) 올해의 처음 몇 달
mm - 올해의 처음 몇 개월 (2 자리)
달의 짧은 이름 - M
달 긴 이름 - MM
Y - 년 (2 자리)
전년 동기 대비 - 년 (네 자리 숫자)
@ - 유닉스 타임 스탬프 (1970년 1월 1일 이후 밀리 초)
! - 윈도우 시계 (01/01/0001 이후 100ns의)
'...'- 텍스트
''- 작은 따옴표를
기타 - 텍스트

일부 예외가 발생 될 수있다 :

'잘못된 인수'- 형식이 null의 경우, 또는이 예외가 발생합니다.
'위치 윈에서 번호를 누락'- 형식이 예외가 발생 찾을 수 없습니다 값을 표시합니다.
'위치 윈 알 수없는 이름'- 형식이 예외가 발생 몇 주 또는 월 이름 이름을 찾을 수없는 경우.
'위치 윈에서 예기치 않은 문자'- 찾을 수없는 텍스트 형식의 값이 예외가 발생하는 경우입니다.
'잘못된 일'-이 예외가 발생하면 날짜가 유효하지 않습니다 같은 '31 / 02/2007 '.

코드 예제 :

ISO 형식으로 날짜를 추출합니다.

$ .datepicker.parseDate ( "YY-MM-DD", "2007년 1월 26일");

(가) 프랑스 연장되는 날짜 형식을 추출.

$ .datepicker.parseDate ( "DD, MM d를, 전년 동기 대비", "SAMEDI, 일 목 14, 2007", {
  shortYearCuroff : 20
  dayNamesShort : $ .datepicker.regional [ "FR"] .dayNamesShort,
  dayNames라는 : $ .datepicker.regional [ "FR"] .dayNames,
  monthNamesShort : $ .datepicker.regional [ "FR"] .monthNamesShort,
  의 MonthNames : $ .datepicker.regional [ "FR"] .monthNames
});

$ .datepicker.iso8601Week (일)

1-53 : 올해의 처음 몇 주 동안 주어진 날짜를 결정.

이 기능은 일주의 ISO 8601 정의를 사용 하나 주 월요일에 시작, 각 해의 최초의 주 월 4 일이 포함되어 있습니다. 이는 전년가 해의 최초의 주 3 일을 포함 할 수있다, 올해는 전년의 마지막 주에 삼일까지 포함 할 수 있다는 것을 의미한다.

이 기능은 calculateWeek 기본 구현.

코드 예제 :

올해의 처음 몇 주 동안의 날짜를 찾을 수 있습니다.

$ .datepicker.iso8601Week (새로운 날짜 (2007, 1-1, 26));

$ .datepicker.noWeekends

주말의 선택을 방지하는 등의 기능 beforeShowDay 설정.

우리는 할 수 있습니다 beforeShowDay 옵션 제공 noWeekends() 함수는 모두가를 제공하기 위해 노력하고 계산하는 데 사용되는 true / false 날짜를 선택할 수 있는지 나타내는 데 사용되는 값의 배열을.

코드 예제 :

주말은 선택하자, DatePicker에서 설정합니다.

$ ( "#datepicker") .datepicker ({
  beforeShowDay : $ .datepicker.noWeekends
});

한도

날짜 선택 도구는 현지화 된 콘텐츠를 지원하는 다른 언어와 날짜 형식에 부응하기 위해 제공. 상기 파일명 뒤에 첨부에 포함 된 각 로컬 라이즈 언어 코드, 예를 들면, 프랑스 인 jquery.ui.datepicker-fr.js . 필수 현지화 파일 주 기간 선택기 코드의 배면에 포함되어야한다. 각각의 현지화 된 파일은 모든 인스턴스가 자동으로 기본 설정으로이 설정을 적용 가능한 현지화 세트의 자신의 세트에 추가 할 수 있습니다.

$.datepicker.regional 속성은 사전과 언어 코드에 지역화의 배열을 보유하고, 사전 기본입니다 "" 영어로 표현했다. 각 항목에는 다음과 같은 속성을 가진 객체입니다 closeText , prevText , nextText , currentText , monthNames , monthNamesShort , dayNames , dayNamesShort , dayNamesMin , weekHeader , dateFormat , firstDay , isRTL , showMonthAfterYear 및 yearSuffix .

아래 기본 현지화 코드를 복원 할 수 있습니다 :

$.datepicker.setDefaults( $.datepicker.regional[ "" ] );

당신은 코드에 따라 특정 위치에 날짜 선택을 재정의 할 수 있습니다 :

$( selector ).datepicker( $.datepicker.regional[ "fr" ] );

테마

사용 날짜 선택 부재 (날짜 선택기 위젯) jQuery를 UI CSS 프레임 워크를 그 스타일의 모양과 느낌을 정의 할 수 있습니다. 당신이 지정된 스타일 날짜 선택기를 사용해야하는 경우, 다음과 같은 CSS 클래스 이름을 사용할 수 있습니다 :

ui-datepicker 날짜 선택 외부 용기 :. 날짜 선택 인라인 경우, 요소가 추가로 제공됩니다 ui-datepicker-inline , 클래스입니다. 경우] isRTL 옵션이 요소 것입니다 추가로와 ui-datepicker-rtl , 클래스입니다.
- ui-datepicker-header : 날짜 선택 헤드 컨테이너입니다.
  - ui-datepicker-prev : 컨트롤은 이전 달 선택하는 데 사용됩니다.
  - ui-datepicker-next : 제어는 다음 달 선택하는 데 사용됩니다.
  - ui-datepicker-title : 날짜 선택 제목 컨테이너의 월 및 연도를 포함한다.
    - ui-datepicker-month 텍스트 표시 달, 당신이 설정 한 경우 : changeMonth 옵션을 <select> 요소를.
    - ui-datepicker-year : 디스플레이의 텍스트, 사용자가 설정 한 경우 changeYear 옵션을 <select> 요소를.
- ui-datepicker-calendar : 달력 형태를 포함한다.
  - ui-datepicker-week-end : 주말 세포를. : 주말을 포함하는 세포.
  - ui-datepicker-other-month 현재 월 일 셀의 개수를 한 달에 위치하지만,하지 :.
  - ui-datepicker-unselectable : 사용자가 셀을 선택할 수 없습니다.
  - ui-datepicker-current-day : 선택한 날짜 셀.
  - ui-datepicker-today : 오늘 날짜 셀.
- ui-datepicker-buttonpane : 설정하면 showButtonPanel 버튼 패널 (buttonpane) 옵션을 사용합니다.
  - ui-datepicker-current : 오늘 날짜의 버튼을 선택합니다.

경우 numberOfMonths 옵션은 여러 달을 표시하려면, 몇 가지 추가 클래스를 사용합니다 :

ui-datepicker-multi : 용기의 바깥 쪽 층의 달 날짜 선택 부분. 이 요소는 추가로 달의 수에 따라 표시되는 ui-datepicker-multi-2 , ui-datepicker-multi-3 또는 ui-datepicker-multi-4 , 클래스 이름.
- ui-datepicker-group : 하나의 선택에서 그룹화. 추가로 패킷에서의 위치를 기반으로이 요소 ui-datepicker-group-first , ui-datepicker-group-middle 또는 ui-datepicker-group-last , 클래스 이름.

의존

UI 코어 (UI 코어)
효과 코어 (코어 효과) (옵션 및 showAnim 옵션과 함께 사용)

추가 정보

부분은 그렇지 않으면 작동하지 않습니다, 일부 기능 CSS가 필요합니다. 맞춤 테마를 작성하는 경우, 시작점으로 지정된 위젯 CSS 파일을 사용한다.
요소의 값이 변경 네이티브 실행되지 않는 경우에 있도록 프로그래밍 요소의 요소 값을 조작 change 이벤트.
그것은 지원하지 않습니다 <input type="date"> 는 로컬 UI 선택기와 충돌이 발생할 수 있기 때문에,에 날짜 선택을 만듭니다.

예

간단한 jQuery를 UI의 날짜 선택 (날짜 선택기).

<! DOCTYPE html로>
<HTML LANG = "EN">
<헤드>
  <메타 문자 집합 = "UTF-8">
  <제목> 날짜 선택 부재 (날짜 선택기 위젯) 데모 </ 제목>
  <링크 REL = "스타일 시트"HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <스크립트 SRC = "// code.jquery.com/jquery-1.10.2.js"> </ script>
  <스크립트 SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
</ 헤드>
<바디>
 
<사업부 아이디 = "날짜 선택기"> </ DIV>
 
<스크립트>
$ ( "#datepicker") .datepicker ();
</ 스크립트>
 
</ BODY>
</ HTML>

이전 : jQuery를 UI의 API - Button 구성 요소 (버튼 위젯)

다음 :의 jQuery UI의 API - 대화 상자 구성 요소 (대화 상자 위젯)

jQuery UI 코스

jQuery UI 테마

jQuery UI 구성 요소 라이브러리

jQuery UI 참조 설명서

jQuery UI 예

jQuery를 UI의 API - 날짜 선택 부재 (날짜 선택기 위젯)

범주

용법

키보드 상호 작용

주요 특징

$ .datepicker.setDefaults (설정)

$ .datepicker.formatDate (형식, 날짜, 설정)

$ .datepicker.parseDate (형식, 값, 설정)

$ .datepicker.iso8601Week (일)

$ .datepicker.noWeekends

한도

테마

의존

추가 정보

예