jQuery를 UI 예 - 날짜 선택 (날짜 선택기)
팝업 상자 또는 인라인 달력에서 날짜를 선택합니다.
날짜 선택기 구성 요소에 대한 자세한 내용은 API 문서를 참조 날짜 선택 멤버합니다 (날짜 선택기 위젯을) .
기본 기능
날짜 선택 (날짜 선택기)를 입력 필드에 표준 양식에 바인딩됩니다. 입력에 초점을 이동 (클릭하거나 탭 키를 사용) 작은 오버레이 대화 형 달력을 엽니 다. , 날짜를 선택 (입력 상자가 포커스를 잃을) 페이지에서 아무 곳이나 클릭하거나 닫으려면 Esc 키를 누릅니다. 당신이 날짜를 선택하면, 피드백은 입력의 값으로 표시됩니다.
<! DOCTYPE html로>
<HTML LANG = "EN">
<헤드>
<메타 문자 집합 = "UTF-8">
<제목> jQuery를 UI의 날짜 선택 (날짜 선택기) - 기본 기능 </ 제목>
<링크 REL = "스타일 시트"HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<스크립트 SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<스크립트 SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<링크 REL = "스타일 시트"HREF = "http://jqueryui.com/resources/demos/style.css">
<스크립트>
$ (함수 () {
$ ( "#datepicker") .datepicker ();
});
</ 스크립트>
</ 헤드>
<바디>
<P> 날짜 : <입력 유형 = "텍스트"ID = "날짜 선택기"> </ P>
</ BODY>
</ HTML>
생기
때 열려있는 다른 애니메이션을 사용하거나 날짜 선택기를 닫습니다. 드롭 다운 상자에서 영화를 선택하고 그 효과를 볼 수있는 상자를 클릭합니다. 당신은 세 가지 표준 애니메이션, 특수 효과 중 하나를 사용하거나 UI 중 하나를 사용할 수 있습니다.
<! DOCTYPE html로>
<HTML LANG = "EN">
<헤드>
<메타 문자 집합 = "UTF-8">
<제목> jQuery를 UI의 날짜 선택 (날짜 선택기) - 애니메이션 </ 제목>
<링크 REL = "스타일 시트"HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<스크립트 SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<스크립트 SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<링크 REL = "스타일 시트"HREF = "http://jqueryui.com/resources/demos/style.css">
<스크립트>
$ (함수 () {
$ ( "#datepicker") .datepicker ();
$ ( "#anim") .change (함수 () {
$ ( "#datepicker") .datepicker ( "옵션", "showAnim", $ (이) .val ());
});
});
</ 스크립트>
</ 헤드>
<바디>
<P> 날짜 : <입력 유형 = "텍스트"ID = "날짜 선택기"크기 = "30"> </ P>
<P> 애니메이션 :로 <br>
<선택 한 id = "ANIM">
<옵션 값 = "쇼"> 쇼 (기본값) </ 옵션>
<옵션 값 = "slideDown"> 슬라이드 </ 옵션>
<옵션 값 = "fadeIn"> 페이드 </ 옵션>
<옵션 값 = "블라인드"> 블라인드 (UI 블라인드 효과) </ 옵션>
<옵션 값 = "바운스"> 바운스 (UI 리바운드 효과) </ 옵션>
<옵션 값 = "클립"> 클립 (UI 편집 효과) </ 옵션>
드롭 (UI가 효과를 착륙) <옵션 값은 = "드롭"> </ 옵션>
<옵션 값 = "배"> (UI 접혀 효과)를 접어 </ 옵션>
<옵션 값 = "슬라이드"> 슬라이드 (UI가 효과를 슬라이딩) </ 옵션>
<옵션 값 = ""> 없음 </ 옵션>
</ 선택>
</ P>
</ BODY>
</ HTML>
일의 다른 개월
날짜 선택기는이 날짜는 선택 사항으로 설정 될 수 있으며, 추가로 달의 날짜를 표시 할 수 있습니다.
<! DOCTYPE html로>
<HTML LANG = "EN">
<헤드>
<메타 문자 집합 = "UTF-8">
<제목> jQuery를 UI의 날짜 선택 (날짜 선택기) - 일의 다른 개월 만에 </ 제목>
<링크 REL = "스타일 시트"HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<스크립트 SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<스크립트 SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<링크 REL = "스타일 시트"HREF = "http://jqueryui.com/resources/demos/style.css">
<스크립트>
$ (함수 () {
$ ( "#datepicker") .datepicker ({
showOtherMonths : 사실,
selectOtherMonths : 사실
});
});
</ 스크립트>
</ 헤드>
<바디>
<P> 날짜 : <입력 유형 = "텍스트"ID = "날짜 선택기"> </ P>
</ BODY>
</ HTML>
디스플레이 버튼 바
부울으로 showButtonPanel 달력을 해제하는 오늘의 날짜 표시에 "오늘"버튼의 선택을위한 "완료"버튼 옵션을 표시합니다. 기본적으로 버튼 바 표시 각 버튼을 사용하지만, 때 버튼은 다른 옵션을 해제 할 수 있습니다. 버튼의 텍스트를 사용자 정의 할 수 있습니다.
<! DOCTYPE html로>
<HTML LANG = "EN">
<헤드>
<메타 문자 집합 = "UTF-8">
<제목> jQuery를 UI의 날짜 선택 (날짜 선택기) - 표시 단추 바 </ 제목>
<링크 REL = "스타일 시트"HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<스크립트 SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<스크립트 SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<링크 REL = "스타일 시트"HREF = "http://jqueryui.com/resources/demos/style.css">
<스크립트>
$ (함수 () {
$ ( "#datepicker") .datepicker ({
showButtonPanel : 사실
});
});
</ 스크립트>
</ 헤드>
<바디>
<P> 날짜 : <입력 유형 = "텍스트"ID = "날짜 선택기"> </ P>
</ BODY>
</ HTML>
디스플레이 인라인
날짜 선택기 오히려 커버 층보다 페이지 표시에 중첩된다. 간단하게 대신 입력을 호출하는 일 수있다 사업부의 .datepicker ()를 호출합니다.
<! DOCTYPE html로>
<HTML LANG = "EN">
<헤드>
<메타 문자 집합 = "UTF-8">
<제목> jQuery를 UI의 날짜 선택 (날짜 선택기) - 인라인 표시 </ 제목>
<링크 REL = "스타일 시트"HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<스크립트 SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<스크립트 SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<링크 REL = "스타일 시트"HREF = "http://jqueryui.com/resources/demos/style.css">
<스크립트>
$ (함수 () {
$ ( "#datepicker") .datepicker ();
});
</ 스크립트>
</ 헤드>
<바디>
날짜 : <DIV ID = "날짜 선택기"> </ DIV>
</ BODY>
</ HTML>
월 및 연도 메뉴를 표시
드롭 다운 상자가 아니라 월 / 년 제목의 정적 디스플레이보다, 탐색에 시간의 넓은 범위에 걸쳐 쉽고, 월 및 연도를 표시합니다. 부울 값 추가 changeMonth 및 changeYear 옵션을 선택합니다.
<! DOCTYPE html로>
<HTML LANG = "EN">
<헤드>
<메타 문자 집합 = "UTF-8">
<제목> jQuery를 UI의 날짜 선택 (날짜 선택기) - 디스플레이 월 & A, 연도 메뉴 </ 제목>
<링크 REL = "스타일 시트"HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<스크립트 SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<스크립트 SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<링크 REL = "스타일 시트"HREF = "http://jqueryui.com/resources/demos/style.css">
<스크립트>
$ (함수 () {
$ ( "#datepicker") .datepicker ({
changeMonth : 사실,
changeYear : 사실
});
});
</ 스크립트>
</ 헤드>
<바디>
<P> 날짜 : <입력 유형 = "텍스트"ID = "날짜 선택기"> </ P>
</ BODY>
</ HTML>
여러 달 표시
설정 numberOfMonths 선택하면 날짜 선택기 여러 달에 표시되는 정수 2 또는 2보다 큰 정수이다.
<! DOCTYPE html로>
<HTML LANG = "EN">
<헤드>
<메타 문자 집합 = "UTF-8">
<제목> jQuery를 UI의 날짜 선택 (날짜 선택기가) - 표시 여러 달 </ 제목>
<링크 REL = "스타일 시트"HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<스크립트 SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<스크립트 SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<링크 REL = "스타일 시트"HREF = "http://jqueryui.com/resources/demos/style.css">
<스크립트>
$ (함수 () {
$ ( "#datepicker") .datepicker ({
NUMBEROFMONTHS : 3,
showButtonPanel : 사실
});
});
</ 스크립트>
</ 헤드>
<바디>
<P> 날짜 : <입력 유형 = "텍스트"ID = "날짜 선택기"> </ P>
</ BODY>
</ HTML>
날짜 형식
날짜 피드백을 표시하는 다양한 방법. 드롭 다운 상자에서 날짜 형식을 선택한 다음 클릭하고 입력 상자에 날짜를 선택, 선택된 디스플레이의 날짜 형식을 볼 수 있습니다.
<! DOCTYPE html로>
<HTML LANG = "EN">
<헤드>
<메타 문자 집합 = "UTF-8">
<제목> jQuery를 UI의 날짜 선택 (날짜 선택기) - 날짜 형식 </ 제목>
<링크 REL = "스타일 시트"HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<스크립트 SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<스크립트 SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<링크 REL = "스타일 시트"HREF = "http://jqueryui.com/resources/demos/style.css">
<스크립트>
$ (함수 () {
$ ( "#datepicker") .datepicker ();
$ ( "#format") .change (함수 () {
$ ( "#datepicker") .datepicker ( "옵션", "dateFormat는"$ (이) .val ());
});
});
</ 스크립트>
</ 헤드>
<바디>
<P> 날짜 : <입력 유형 = "텍스트"ID = "날짜 선택기"크기 = "30"> </ P>
<P> 형식 옵션 :로 <br>
<선택 한 id = "형식">
<옵션 값 = "mm / 일 / 년"> 기본 - mm / 일 / 년 </ 옵션>
<옵션 = "YY-MM-DD"값> ISO 8601 - YY-MM-DD </ 옵션>
<옵션 값 = "D M, Y"> 짧은 - D의 M, Y </ 옵션>
<옵션 값 = "D MM, Y"> 중간 - D MM, y를 </ 옵션>
<옵션 값 = "DD, D MM, 전년 동기 대비"> 전체 - DD, D MM, 전년 동기 대비 </ 옵션>
<옵션 값 = "& APOS; 하루 & APOS; D & APOS;의 & APOS; MM & APOS; 년 & APOS에서, 전년 동기 대비"> 텍스트로 - MM '의'하루 'D'올해의 '전년 </ 옵션>
</ 선택>
</ P>
</ BODY>
</ HTML>
트리거 아이콘
날짜 선택기를 표시하려면 입력 상자 옆에있는 아이콘을 클릭합니다. (기본 동작) 초점에서 날짜 선택기가 열립니다 설정, 또는 열려면 아이콘을 클릭 또는 오픈 / 아이콘을 클릭 할 때 포커스를받을 수 있습니다.
<! DOCTYPE html로>
<HTML LANG = "EN">
<헤드>
<메타 문자 집합 = "UTF-8">
<제목> jQuery를 UI의 날짜 선택 (날짜 선택기) - 트리거 아이콘 </ 제목>
<링크 REL = "스타일 시트"HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<스크립트 SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<스크립트 SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<링크 REL = "스타일 시트"HREF = "http://jqueryui.com/resources/demos/style.css">
<스크립트>
$ (함수 () {
$ ( "#datepicker") .datepicker ({
showOn "버튼을"
buttonImage : "이미지 / calendar.gif"
buttonImageOnly : 사실
});
});
</ 스크립트>
</ 헤드>
<바디>
<P> 날짜 : <입력 유형 = "텍스트"ID = "날짜 선택기"> </ P>
</ BODY>
</ HTML>
현지화 일정
현지화 날짜 선택기 캘린더 언어와 형식 (기본 영어 / 서양 형식입니다). 날짜 선택기가 내장 포함 아랍어와 히브리어와 같은 오른쪽에서 왼쪽으로 읽는 언어에 대한 지원.
<! DOCTYPE html로>
<HTML LANG = "EN">
<헤드>
<메타 문자 집합 = "UTF-8">
<제목> jQuery를 UI의 날짜 선택 (날짜 선택기) - 현지화 달력 </ 제목>
<링크 REL = "스타일 시트"HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<스크립트 SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<스크립트 SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<스크립트 SRC = "http://jqueryui.com/resources/demos/datepicker/jquery.ui.datepicker-ar.js"> </ script>
<스크립트 SRC = "http://jqueryui.com/resources/demos/datepicker/jquery.ui.datepicker-fr.js"> </ script>
<스크립트 SRC = "http://jqueryui.com/resources/demos/datepicker/jquery.ui.datepicker-he.js"> </ script>
<스크립트 SRC = "http://jqueryui.com/resources/demos/datepicker/jquery.ui.datepicker-zh-TW.js"> </ script>
<링크 REL = "스타일 시트"HREF = "http://jqueryui.com/resources/demos/style.css">
<스크립트>
$ (함수 () {
$ ( "#datepicker") .datepicker ($ .datepicker.regional [ "프랑"]);
$ ( "#locale") .change (함수 () {
$ ( "#datepicker") .datepicker ( "옵션"
$ .datepicker.regional [$ (이) .val ()]);
});
});
</ 스크립트>
</ 헤드>
<바디>
<P> 날짜 : <입력 유형 = "텍스트"ID = "날짜 선택기"> & NBSP;
<선택 한 id = "로케일">
<옵션 값 = "AR"> 아랍어 (& # 8235; (& # 1575; & # 1604; & # 1593; & # 1585; & # 1576; & # 1610; & # 1577; </ 옵션>
<옵션 값 = "에서 zh-TW"> 중국어 번체 (& # 32321; & # 39636; & # 20013; & # 25991;) </ 옵션>
<옵션 값 = ""> 영어 </ 옵션>
<= "선택"을 선택 옵션 값 = "FR"> 프랑스어 (프랜 & ccedil; AIS) </ 옵션>
<옵션 값 = "그는"> 히브리어 (& # 8235; (& # 1506; & # 1489; & # 1512; & # 1497; & # 1514; </ 옵션>
</ 선택> </ P>
</ BODY>
</ HTML>
다른 입력 상자를 채 웁니다
사용 altField 및 altFormat 옵션마다 선택 날짜는 날짜가 다른 입력 창에 특정 형식으로 작성됩니다. 컴퓨터 친화 추가 처리의 일자에 의해이 기능은, 사용자가 사용하기 쉬운 날짜 표시됩니다.
<! DOCTYPE html로>
<HTML LANG = "EN">
<헤드>
<메타 문자 집합 = "UTF-8">
<제목> jQuery를 UI의 날짜 선택 (날짜 선택기) - 다른 입력 상자를 채우는 </ 제목>
<링크 REL = "스타일 시트"HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<스크립트 SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<스크립트 SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<링크 REL = "스타일 시트"HREF = "http://jqueryui.com/resources/demos/style.css">
<스크립트>
$ (함수 () {
$ ( "#datepicker") .datepicker ({
altField "#alternate"
altFormat : "DD, D MM, 전년 동기 대비"
});
});
</ 스크립트>
</ 헤드>
<바디>
<P> 날짜 : <입력 유형 = "텍스트"ID = "날짜 선택기"> & NBSP; <입력 유형 = "텍스트"ID = "대체"크기 = "30"> </ P>
</ BODY>
</ HTML>
날짜 범위를 제한
으로 minDate 및 maxDate 옵션은 선택 가능한 날짜 범위를 제한합니다. 실제 날짜의 시작과 끝 날짜를 설정합니다 (새 날짜 (2009 년 1-1, 26)), 또는 오늘날의 오프셋 값 (-20)의 캐릭터, 또는주기 단위 ( '+ 1M + 10D로 '). 문자열로 설정하면, 올해 인 'Y'를 사용하여 한 달 동안 'M'을 사용하여 'W'대표 주를 사용하여, 일의 'D'를 사용합니다.
<! DOCTYPE html로>
<HTML LANG = "EN">
<헤드>
<메타 문자 집합 = "UTF-8">
<제목> jQuery를 UI의 날짜 선택 (날짜 선택기) - 날짜 범위를 제한 </ 제목>
<링크 REL = "스타일 시트"HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<스크립트 SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<스크립트 SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<링크 REL = "스타일 시트"HREF = "http://jqueryui.com/resources/demos/style.css">
<스크립트>
$ (함수 () {
$ ( "#datepicker") .datepicker ({MinDate : -20, maxDate : "+ 1M + 10D"});
});
</ 스크립트>
</ 헤드>
<바디>
<P> 날짜 : <입력 유형 = "텍스트"ID = "날짜 선택기"> </ P>
</ BODY>
</ HTML>
날짜 범위를 선택
검색 할 날짜 범위를 선택합니다.
<! DOCTYPE html로>
<HTML LANG = "EN">
<헤드>
<메타 문자 집합 = "UTF-8">
<제목> jQuery를 UI의 날짜 선택 (날짜 선택기) - 날짜 범위를 선택 </ 제목>
<링크 REL = "스타일 시트"HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<스크립트 SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<스크립트 SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<링크 REL = "스타일 시트"HREF = "http://jqueryui.com/resources/demos/style.css">
<스크립트>
$ (함수 () {
$ ( "#from") .datepicker ({
defaultDate : "+ 1w"
changeMonth : 사실,
NUMBEROFMONTHS : 3,
으로 onClose : 기능 (되어 selectedDate) {
$ ( "#됐다") .datepicker ( "옵션", "minDate"되어 selectedDate);
}
});
$ ( "#됐다") .datepicker ({
defaultDate : "+ 1w"
changeMonth : 사실,
NUMBEROFMONTHS : 3,
으로 onClose : 기능 (되어 selectedDate) {
$ ( "#from") .datepicker ( "옵션", "maxDate"되어 selectedDate);
}
});
});
</ 스크립트>
</ 헤드>
<바디>
에서 < "에서"= 대한 라벨> </ 라벨>
<입력 유형 이름 "에서"= "텍스트"ID = "에서">
에 < "를"= 대한 라벨> </ 라벨>
<입력 유형 = "텍스트"ID = "를"이름 = "를">
</ BODY>
</ HTML>
올해 쇼의 주
날짜 선택기는 올해 처음 몇 주를 표시 할 수 있습니다. 기본값은 ISO 8601의 정의에 따라 계산됩니다 주 월요일의 첫 번째 목요일을 포함 해의 최초의 주에 시작. 이것은 1 년에 일주일에 일의 또 다른 커플이 될 수 있음을 의미합니다.
<! DOCTYPE html로>
<HTML LANG = "EN">
<헤드>
<메타 문자 집합 = "UTF-8">
<제목> jQuery를 UI의 날짜 선택 (날짜 선택기) - 올해의 처음 몇 주를 표시 </ 제목>
<링크 REL = "스타일 시트"HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<스크립트 SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<스크립트 SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<링크 REL = "스타일 시트"HREF = "http://jqueryui.com/resources/demos/style.css">
<스크립트>
$ (함수 () {
$ ( "#datepicker") .datepicker ({
showWeek : 사실,
firstDay : 1
});
});
</ 스크립트>
</ 헤드>
<바디>
<P> 날짜 : <입력 유형 = "텍스트"ID = "날짜 선택기"> </ P>
</ BODY>
</ HTML>