JqueryUI-날짜 선택기

jQueryUI의 Datepickers를 사용하면 사용자가 날짜를 쉽고 시각적으로 입력 할 수 있습니다. 날짜 형식과 언어를 사용자 정의하고, 선택 가능한 날짜 범위를 제한하고, 버튼 및 기타 탐색 옵션을 쉽게 추가 할 수 있습니다.

jQueryUI는 datepicker()datepicker를 만들고 새 CSS 클래스를 추가하여 페이지에서 HTML 요소의 모양을 변경하는 메서드입니다. 래핑 된 집합의 <input>, <div> 및 <span> 요소를 datepicker 컨트롤로 변환합니다.

기본적으로 <input> 요소의 경우 관련 텍스트 필드가 포커스를 받으면 datepicker 달력이 작은 오버레이로 열립니다. 인라인 달력의 경우 날짜 선택기를 <div> 또는 <span> 요소에 연결하기 만하면됩니다.

통사론

그만큼 datepicker() 방법은 두 가지 형태로 사용될 수 있습니다-

  • $ (selector, context) .datepicker (options) 메서드

  • $ (selector, context) .datepicker ( "action", [params]) 메서드

$ (선택기, 컨텍스트) .datepicker (옵션) 메서드

datepicker (옵션) 옵션

통사론

$(selector, context).datepicker(options);

Javascript 객체를 사용하여 한 번에 하나 이상의 옵션을 제공 할 수 있습니다. 제공 할 옵션이 두 개 이상인 경우 다음과 같이 쉼표를 사용하여 구분합니다.

$(selector, context).datepicker({option1: value1, option2: value2..... });

다음 표는 이 방법과 함께 사용할 수있는 다양한 옵션 을 나열합니다.

Sr. 아니. 옵션 및 설명
1 altField

이 옵션은 모든 날짜 선택으로 업데이트되는 필드에 대한 jQuery 선택기를 지정합니다. altFormat의 옵션은이 값의 형식을 설정하는 데 사용할 수 있습니다. 이것은 사용자에게보다 사용자 친화적 인 형식을 표시하면서 서버에 제출할 숨겨진 입력 요소로 날짜 값을 설정하는 데 매우 유용합니다. 기본적으로 값은"".

Option - altField

이 옵션은 모든 날짜 선택으로 업데이트되는 필드에 대한 jQuery 선택기를 지정합니다. altFormat의 옵션은이 값의 형식을 설정하는 데 사용할 수 있습니다. 이것은 사용자에게보다 사용자 친화적 인 형식을 표시하면서 서버에 제출할 숨겨진 입력 요소로 날짜 값을 설정하는 데 매우 유용합니다. 기본적으로 값은"".

Syntax

$(".selector").datepicker(
   { altField: "#actualDate" }
);
2 altFormat

이 옵션은 altField 옵션이 지정 될 때 사용됩니다 . 대체 요소에 쓸 값의 형식을 제공합니다. 기본적으로 값은"".

Option - altFormat

이 옵션은 altField 옵션이 지정 될 때 사용됩니다 . 대체 요소에 쓸 값의 형식을 제공합니다. 기본적으로 값은"".

Syntax

$(".selector").datepicker(
   { altFormat: "yy-mm-dd" }
);
appendText

이 옵션은 사용자에게 지침을 표시하기 위해 <input> 요소 뒤에 배치되는 문자열 값입니다. 기본적으로 값은"".

Option - appendText

이 옵션은 사용자에게 지침을 표시하기 위해 <input> 요소 뒤에 배치되는 문자열 값입니다. 기본적으로 값은"".

Syntax

$(".selector").datepicker(
   { appendText: "(yyyy-mm-dd)" }
);
4 autoSize

이 옵션을 true 로 설정하면 dateFormat 옵션으로 설정된 datepicker의 날짜 형식을 수용하도록 <input> 요소의 크기가 조정됩니다. 기본적으로 값은false.

Option - autoSize

이 옵션을 true 로 설정하면 dateFormat 옵션으로 설정된 datepicker의 날짜 형식을 수용하도록 <input> 요소의 크기가 조정됩니다. 기본적으로 값은false.

Syntax

$(".selector").datepicker(
   { autoSize: true }
);
5 beforeShow

이 옵션은 <input> 요소와 datepicker 인스턴스가 매개 변수로 전달되어 datepicker가 표시되기 직전에 호출되는 콜백 함수입니다. 이 함수는 datepicker를 수정하는 데 사용되는 옵션 해시를 반환 할 수 있습니다. 기본적으로 값은"".

Option - beforeShow

이 옵션은 <input> 요소와 datepicker 인스턴스가 매개 변수로 전달되어 datepicker가 표시되기 직전에 호출되는 콜백 함수입니다. 이 함수는 datepicker를 수정하는 데 사용되는 옵션 해시를 반환 할 수 있습니다. 기본적으로 값은"".

6 beforeShowDay

이 옵션은 날짜를 매개 변수로 사용하는 콜백 함수로, 날짜가 표시되기 직전에 datepicker에서 매일 호출되며 유일한 매개 변수로 전달 된 날짜를 사용합니다. 이것은 요일 요소의 일부 기본 동작을 재정의하는 데 사용할 수 있습니다. 이 함수는 요소를 3 개 가진 배열을 반환해야합니다.null.

Option - beforeShowDay

이 옵션은 날짜를 매개 변수로 사용하는 콜백 함수로, 날짜가 표시되기 직전에 datepicker에서 매일 호출되며 유일한 매개 변수로 전달 된 날짜를 사용합니다. 이것은 요일 요소의 일부 기본 동작을 재정의하는 데 사용할 수 있습니다. 이 함수는 다음과 같이 3 요소 배열을 반환해야합니다.

  • [0] — 날짜를 선택 가능하게하려면 true , 그렇지 않으면 false 입니다.

  • [1]-적용 할 CSS 클래스 이름의 공백으로 구분 된 문자열 또는 적용하지 않으려면 빈 문자열

  • [2]-요일 요소에 툴팁을 적용하기위한 선택적 문자열

기본적으로 값은 null.

7 buttonImage

이 옵션은 showOn 옵션을 단추 중 하나 또는 둘 모두 로 설정하여 활성화 된 단추에 표시 할 이미지의 경로를 지정합니다 . 경우 - 버튼이 또한 제공되고, 버튼 텍스트가된다 대체 버튼의 속성. 기본적으로 값은"".

Option - buttonImage

이 옵션은 showOn 옵션을 단추 중 하나 또는 둘 모두 로 설정하여 활성화 된 단추에 표시 할 이미지의 경로를 지정합니다 . 경우 - 버튼이 또한 제공되고, 버튼 텍스트가된다 대체 버튼의 속성. 기본적으로 값은"".

Syntax

$(".selector").datepicker(
   { buttonImage: "/images/datepicker.gif" }
);
8 buttonImageOnly

true로 설정된 경우이 옵션 은 buttonImage에 지정된 이미지가 버튼이 아닌 독립형으로 표시되도록 지정합니다. 이미지를 표시하려면 showOn 옵션을 단추 중 하나 또는 둘 모두로 설정해야합니다. 기본적으로 값은false.

Option - buttonImageOnly

true로 설정된 경우이 옵션 은 buttonImage에 지정된 이미지가 버튼이 아닌 독립형으로 표시되도록 지정합니다. 이미지를 표시하려면 showOn 옵션을 단추 중 하나 또는 둘 모두로 설정해야합니다. 기본적으로 값은false.

Syntax

$(".selector").datepicker(
   { buttonImageOnly: true }
);
9 buttonText

이 옵션은 showOn 옵션을 버튼 중 하나 또는 둘 모두 로 설정하여 활성화 된 버튼의 캡션을 지정합니다 . 기본적으로 값은"...".

Option - buttonText

이 옵션은 showOn 옵션을 버튼 중 하나 또는 둘 모두 로 설정하여 활성화 된 버튼의 캡션을 지정합니다 . 기본적으로 값은"...".

Syntax

$(".selector").datepicker(
   { buttonText: "Choose" }
);
10 계산 주

이 옵션은 lone 매개 변수로 전달 된 날짜의 주 번호를 계산하고 반환하는 사용자 지정 함수입니다. 기본 구현은 $ .datepicker.iso8601Week () 유틸리티 함수에서 제공하는 것입니다.

Option - calculateWeek

이 옵션은 lone 매개 변수로 전달 된 날짜의 주 번호를 계산하고 반환하는 사용자 지정 함수입니다. 기본 구현은 $ .datepicker.iso8601Week () 유틸리티 함수에서 제공하는 것입니다.

Syntax

$(".selector").datepicker(
   { calculateWeek: myWeekCalc }
);
11 changeMonth

이 옵션을 true로 설정 하면 월 드롭 다운이 표시되어 사용자가 화살표 버튼을 사용하지 않고 월을 직접 변경할 수 있습니다. 기본적으로 값은false.

Option - changeMonth

이 옵션을 true로 설정 하면 월 드롭 다운이 표시되어 사용자가 화살표 버튼을 사용하지 않고 월을 직접 변경할 수 있습니다. 기본적으로 값은false.

Syntax

$(".selector").datepicker(
   { changeMonth: true }
);
12 changeYear

이 옵션을 true로 설정 하면 연도 드롭 다운이 표시되어 사용자가 화살표 버튼을 사용하지 않고 연도를 직접 변경할 수 있습니다. 옵션 yearRange 를 사용하여 선택할 수있는 연도를 제어 할 수 있습니다. 기본적으로 값은false.

Option - changeYear

이 옵션을 true로 설정 하면 연도 드롭 다운이 표시되어 사용자가 화살표 버튼을 사용하지 않고 연도를 직접 변경할 수 있습니다. 옵션 yearRange 를 사용하여 선택할 수있는 연도를 제어 할 수 있습니다. 기본적으로 값은false.

Syntax

$(".selector").datepicker(
   { changeYear: true }
);
13 closeText

이 옵션은 닫기 버튼의 기본 캡션 인 완료를 대체 할 텍스트를 지정합니다. 버튼 패널이 showButtonPanel 옵션을 통해 표시 될 때 사용됩니다 . 기본적으로 값은"Done".

Option - closeText

이 옵션은 닫기 버튼의 기본 캡션 인 완료를 대체 할 텍스트를 지정합니다. 버튼 패널이 showButtonPanel 옵션을 통해 표시 될 때 사용됩니다 . 기본적으로 값은"Done".

Syntax

$(".selector").datepicker(
   { closeText: "Close" }
);
14 constrainInput

이 옵션을 true (기본값)로 설정하면 <input> 요소에 대한 텍스트 입력이 현재 dateformat 옵션 에서 허용하는 문자로 제한됩니다 . 기본적으로 값은true.

Option - constrainInput

이 옵션을 true (기본값)로 설정하면 <input> 요소에 대한 텍스트 입력이 현재 dateformat 옵션 에서 허용하는 문자로 제한됩니다 . 기본적으로 값은true.

Syntax

$(".selector").datepicker(
   { constrainInput: false }
);
15 currentText

이 옵션은 현재 단추에 대한 오늘의 기본 캡션을 대체 할 텍스트를 지정합니다. 버튼 패널이 showButtonPanel 옵션을 통해 표시되는 경우 사용됩니다 . 기본적으로 값은Today.

Option - currentText

이 옵션은 현재 단추에 대한 오늘의 기본 캡션을 대체 할 텍스트를 지정합니다. 버튼 패널이 showButtonPanel 옵션을 통해 표시되는 경우 사용됩니다 . 기본적으로 값은Today.

Syntax

$(".selector").datepicker(
   { currentText: "Now" }
);
16 날짜 형식

이 옵션은 사용할 날짜 형식을 지정합니다. 기본적으로 값은mm/dd/yy.

Option - dateFormat

이 옵션은 사용할 날짜 형식을 지정합니다. 기본적으로 값은mm/dd/yy.

Syntax

$(".selector").datepicker(
   { dateFormat: "yy-mm-dd" }
);
17 dayNames

이 옵션은 일요일을 나타내는 0 번째 요소와 함께 전체 요일 이름을 제공하는 7 개 요소 배열입니다. 컨트롤을 지역화하는 데 사용할 수 있습니다. 기본적으로 값은[ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ].

Option - dayNames

이 옵션은 일요일을 나타내는 0 번째 요소와 함께 전체 요일 이름을 제공하는 7 개 요소 배열입니다. 컨트롤을 지역화하는 데 사용할 수 있습니다. 기본적으로 값은[ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ].

Syntax

$(".selector").datepicker(
   { dayNames: [ "Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag" ] }
);
18 dayNamesMin

이 옵션은 열 머리글로 사용되는 일요일을 나타내는 0 번째 요소와 함께 최소 요일 이름을 제공하는 7 개 요소 배열입니다. 컨트롤을 지역화하는 데 사용할 수 있습니다. 기본적으로 값은[ "Su", "Mo", "Tu", "We", "Th", "Fr", "Sa" ].

Option - dayNamesMin

이 옵션은 열 머리글로 사용되는 일요일을 나타내는 0 번째 요소와 함께 최소 요일 이름을 제공하는 7 개 요소 배열입니다. 컨트롤을 지역화하는 데 사용할 수 있습니다. 기본적으로 값은[ "Su", "Mo", "Tu", "We", "Th", "Fr", "Sa" ].

Syntax

$(".selector").datepicker(
   { dayNamesMin: [ "So", "Mo", "Di", "Mi", "Do", "Fr", "Sa" ] }
);
19 dayNamesShort

이 옵션은 일요일을 나타내는 0 번째 요소와 함께 짧은 요일 이름을 제공하는 7 개 요소 배열을 지정합니다. 컨트롤을 지역화하는 데 사용할 수 있습니다. 기본적으로 값은[ "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" ].

Option - dayNamesShort

이 옵션은 일요일을 나타내는 0 번째 요소와 함께 짧은 요일 이름을 제공하는 7 개 요소 배열을 지정합니다. 컨트롤을 지역화하는 데 사용할 수 있습니다. 기본적으로 값은[ "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" ].

Syntax

$(".selector").datepicker(
   { dayNamesShort: [ "Son", "Mon", "Die", "Mit", "Don", "Fre", "Sam" ] }
);
20 defaultDate

이 옵션은 <input> 요소에 값이없는 경우 오늘의 기본값을 재정 의하여 컨트롤의 초기 날짜를 설정합니다. 이는 Date 인스턴스, 오늘부터의 일 또는 절대 또는 상대 날짜를 지정하는 문자열 일 수 있습니다. 기본적으로 값은null.

Option - defaultDate

이 옵션은 <input> 요소에 값이없는 경우 오늘의 기본값을 재정 의하여 컨트롤의 초기 날짜를 설정합니다. 이는 Date 인스턴스, 오늘부터의 일 또는 절대 또는 상대 날짜를 지정하는 문자열 일 수 있습니다. 기본적으로 값은null.

Syntax

$(".selector").datepicker(
   { defaultDate: +7 }
);
21 지속

이 옵션은 날짜 선택기를 표시하는 애니메이션 속도를 지정합니다. 느림, 보통, 빠름 중 하나 이거나 애니메이션이 확장되는 시간 (밀리 초) 일 수 있습니다. 기본적으로 값은normal.

Option - duration

이 옵션은 날짜 선택기를 표시하는 애니메이션 속도를 지정합니다. 느림, 보통, 빠름 중 하나 이거나 애니메이션이 확장되는 시간 (밀리 초) 일 수 있습니다. 기본적으로 값은normal.

Syntax

$(".selector").datepicker(
   { duration: "slow" }
);
22 첫날

이 옵션은 한주의 첫 번째 날로 간주되는 요일을 지정하고 가장 왼쪽 열로 표시됩니다. 기본적으로 값은0.

Option - firstDay

이 옵션은 한주의 첫 번째 날로 간주되는 요일을 지정하고 가장 왼쪽 열로 표시됩니다. 기본적으로 값은0.

Syntax

$(".selector").datepicker(
   { firstDay: 1 }
);
23 gotoCurrent

이 옵션을 true로 설정하면 오늘 링크가 선택한 날짜로 설정되어 기본값 인 오늘을 재정의합니다. 기본적으로 값은false.

Option - gotoCurrent

이 옵션을 true로 설정하면 오늘 링크가 선택한 날짜로 설정되어 기본값 인 오늘을 재정의합니다. 기본적으로 값은false.

Syntax

$(".selector").datepicker(
   { gotoCurrent: true }
);
24 hideIfNoPrevNext

이 옵션을 true 로 설정하면 minDatemaxDate 옵션 의 설정에 따라 적용되지 않는 경우 다음 및 이전 링크를 숨 깁니다 (단순히 비활성화하는 것이 아님) . 기본적으로 값은false.

Option - hideIfNoPrevNext

이 옵션을 true 로 설정하면 minDatemaxDate 옵션 의 설정에 따라 적용되지 않는 경우 다음 및 이전 링크를 숨 깁니다 (단순히 비활성화하는 것이 아님) . 기본적으로 값은false.

Syntax

$(".selector").datepicker(
   { hideIfNoPrevNext: true }
);
25 isRTL

이 옵션을 true로 설정 하면 지역화를 오른쪽에서 왼쪽으로 쓰는 언어로 지정합니다. 기본적으로 값은false.

Option - isRTL

이 옵션을 true로 설정 하면 지역화를 오른쪽에서 왼쪽으로 쓰는 언어로 지정합니다. 기본적으로 값은false.

Syntax

$(".selector").datepicker(
   { isRTL: true }
);
26 maxDate

이 옵션은 컨트롤에 대해 선택할 수있는 최대 날짜를 설정합니다. 이는 Date 인스턴스, 오늘부터의 일 수 또는 절대 또는 상대 날짜를 지정하는 문자열 일 수 있습니다. 기본적으로 값은null.

Option - maxDate

이 옵션은 컨트롤에 대해 선택할 수있는 최대 날짜를 설정합니다. 이는 Date 인스턴스, 오늘부터의 일 수 또는 절대 또는 상대 날짜를 지정하는 문자열 일 수 있습니다. 기본적으로 값은null.

Syntax

$(".selector").datepicker(
   { maxDate: "+1m +1w" }
);
27 minDate

이 옵션은 컨트롤에 대해 선택 가능한 최소 날짜를 설정합니다. 이는 Date 인스턴스, 오늘부터의 일 또는 절대 또는 상대 날짜를 지정하는 문자열 일 수 있습니다. 기본적으로 값은null.

Option - minDate

이 옵션은 컨트롤에 대해 선택 가능한 최소 날짜를 설정합니다. 이는 Date 인스턴스, 오늘부터의 일 또는 절대 또는 상대 날짜를 지정하는 문자열 일 수 있습니다. 기본적으로 값은null.

Syntax

$(".selector").datepicker(
   { minDate: new Date(2007, 1 - 1, 1) }
);
28 monthNames

이 옵션은 1 월을 나타내는 0 번째 요소와 함께 전체 월 이름을 제공하는 12 개 요소 배열입니다. 컨트롤을 지역화하는 데 사용할 수 있습니다. 기본적으로 값은[ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ].

Option - monthNames

이 옵션은 1 월을 나타내는 0 번째 요소와 함께 전체 월 이름을 제공하는 12 개 요소 배열입니다. 컨트롤을 지역화하는 데 사용할 수 있습니다. 기본적으로 값은[ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ].

Syntax

$(".selector").datepicker(
   { monthNames: [ "janvier", "février", "mars", "avril", "mai", "juin", "juillet", "août", "septembre", "octobre", "novembre", "décembre" ]  }
);
29 monthNamesShort

이 옵션은 1 월을 나타내는 0 번째 요소와 함께 짧은 월 이름을 제공하는 12 개 요소 배열을 지정합니다. 컨트롤을 지역화하는 데 사용할 수 있습니다. 기본적으로 값은[ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ].

Option - monthNamesShort

이 옵션은 1 월을 나타내는 0 번째 요소와 함께 짧은 월 이름을 제공하는 12 개 요소 배열을 지정합니다. 컨트롤을 지역화하는 데 사용할 수 있습니다. 기본적으로 값은[ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ].

Syntax

$(".selector").datepicker(
   { monthNamesShort: [ "jan", "fév", "mar", "avr", "mai", "Jui", "Jul", "aoû", "sep", "Oot", "nov", "déc" ] }
);
30 navigationAsDateFormat

이 옵션을 true로 설정하면 nextText, prevTextcurrentText에 대한 탐색 링크 가 표시되기 전에 $ .datepicker.formatDate () 함수를 통해 전달 됩니다. 이를 통해 관련 값으로 대체되는 옵션에 날짜 형식을 제공 할 수 있습니다. 기본적으로 값은false.

Option - navigationAsDateFormat

이 옵션을 true로 설정하면 nextText, prevTextcurrentText에 대한 탐색 링크 가 표시되기 전에 $ .datepicker.formatDate () 함수를 통해 전달 됩니다. 이를 통해 관련 값으로 대체되는 옵션에 날짜 형식을 제공 할 수 있습니다. 기본적으로 값은false.

Syntax

$(".selector").datepicker(
   { navigationAsDateFormat: true }
);
31 nextText

이 옵션은 다음 달 탐색 링크의 다음 기본 캡션을 대체 할 텍스트를 지정합니다. ThemeRoller는이 텍스트를 아이콘으로 바꿉니다. 기본적으로 값은Next.

Option - nextText

이 옵션은 다음 달 탐색 링크의 다음 기본 캡션을 대체 할 텍스트를 지정합니다. ThemeRoller는이 텍스트를 아이콘으로 바꿉니다. 기본적으로 값은Next.

Syntax

$(".selector").datepicker(
   {  nextText: "Later" }
);
32 numberOfMonths

This option specifies the number of months to show in the datepicker. By default its value is 1.

Option - numberOfMonths

This option specifies the number of months to show in the datepicker. By default its value is 1. Multiple types supported −

  • Number − The number of months to display in a single row.

  • Array − An array defining the number of rows and columns to display.

Syntax

$(".selector").datepicker(
   { numberOfMonths: [ 2, 3 ] }
);
33 onChangeMonthYear

This option is a callback that’s invoked when the datepicker moves to a new month or year, with the selected year, month (1-based), and datepicker instance passed as parameters, and the function context is set to the input field element. By default its value is null.

Option - onChangeMonthYear

This option is a callback that’s invoked when the datepicker moves to a new month or year, with the selected year, month (1-based), and datepicker instance passed as parameters, and the function context is set to the input field element. By default its value is null.

34 onClose

This option is a callback invoked whenever a datepicker is closed, passed the selected date as text (the empty string if there is no selection), and the datepicker instance, and the function context is set to the input field element. By default its value is null.

Option - onClose

This option is a callback invoked whenever a datepicker is closed, passed the selected date as text (the empty string if there is no selection), and the datepicker instance, and the function context is set to the input field element. By default its value is null.

35 onSelect

This option is a callback invoked whenever a date is selected, passed the selected date as text (the empty string if there is no selection), and the datepicker instance, and the function context is set to the input field element. By default its value is null.

Option - onSelect

This option is a callback invoked whenever a date is selected, passed the selected date as text (the empty string if there is no selection), and the datepicker instance, and the function context is set to the input field element. By default its value is null.

36 prevText

This option specifies the text to replace the default caption of Prev for the previous month navigation link. (Note that the ThemeRoller replaces this text with an icon). By default its value is PrevdefaultDatedayNamesMin.

Option - prevText

This option specifies the text to replace the default caption of Prev for the previous month navigation link. (Note that the ThemeRoller replaces this text with an icon). By default its value is Prev.

Syntax

$(".selector").datepicker(
   { prevText: "Earlier" }
);
37 selectOtherMonths

This option if set to true, days shown before or after the displayed month(s) are selectable. Such days aren’t displayed unless the showOtherMonths option is true. By default its value is false.

Option - selectOtherMonths

This option if set to true, days shown before or after the displayed month(s) are selectable. Such days aren’t displayed unless the showOtherMonths option is true. By default its value is false.

Syntax

$(".selector").datepicker(
   { selectOtherMonths: true }
);
38 shortYearCutoff

This option if its a number, specifies a value between 0 and 99 years before which any 2-digit year values will be considered to belong to the previous century. If this option is a string, the value undergoes a numeric conversion and is added to the current year. The default is +10 which represents 10 years from the current year.

Option - shortYearCutoff

This option if its a number, specifies a value between 0 and 99 years before which any 2-digit year values will be considered to belong to the previous century. If this option is a string, the value undergoes a numeric conversion and is added to the current year. The default is +10 which represents 10 years from the current year.

Syntax

$(".selector").datepicker(
   { shortYearCutoff: 50 }
);
39 showAnim

This option specifies sets the name of the animation to be used to show and hide the datepicker. If specified, must be one of show (the default), fadeIn, slideDown, or any of the jQuery UI show/hide animations. By default its value is show.

Option - showAnim

This option specifies sets the name of the animation to be used to show and hide the datepicker. If specified, must be one of show (the default), fadeIn, slideDown, or any of the jQuery UI show/hide animations. By default its value is show.

Syntax

$(".selector").datepicker(
   { showAnim: "fold" }
);
40 showButtonPanel

This option if set to true, a button panel at the bottom of the datepicker is displayed, containing current and close buttons. The caption of these buttons can be provided via the currentText and closeText options. By default its value is false.

Option - showButtonPanel

This option if set to true, a button panel at the bottom of the datepicker is displayed, containing current and close buttons. The caption of these buttons can be provided via the currentText and closeText options. By default its value is false.

Syntax

$(".selector").datepicker(
   { showButtonPanel: true }
);
41 showCurrentAtPos

This option specifies the 0-based index, starting at the upper left, of where the month containing the current date should be placed within a multi-month display. By default its value is 0.

Option - showCurrentAtPos

This option specifies the 0-based index, starting at the upper left, of where the month containing the current date should be placed within a multi-month display. By default its value is 0.

Syntax

$(".selector").datepicker(
   { showCurrentAtPos: 3 }
);
42 showMonthAfterYear

This option specifies if set to true, the positions of the month and year are reversed in the header of the datepicker. By default its value is false.

Option - showMonthAfterYear

This option specifies if set to true, the positions of the month and year are reversed in the header of the datepicker. By default its value is false.

Syntax

$(".selector").datepicker(
   { showMonthAfterYear: true }
);
43 showOn

This option specifies when the datepicker should appear. The possible values are focus, button or both. By default its value is focus.

Option - showOn

This option specifies when the datepicker should appear. The possible values are focus, button or both. By default its value is focus.

focus (default) causes the datepicker to display when the <input> element gains focus.

button causes a button to be created after the <input> element (but before any appended text) that triggers the datepicker when clicked.

both causes the trigger button to be created, and for focus events to also trigger the datepicker.

Syntax

$(".selector").datepicker(
   { showOn: "both" }
);
44 showOptions

This option provides a hash to be passed to the animation when a jQuery UI animation is specified for the showAnim option. By default its value is {}.

Option - showOptions

This option provides a hash to be passed to the animation when a jQuery UI animation is specified for the showAnim option. By default its value is {}.

Syntax

$(".selector").datepicker(
   { showOptions: { direction: "up" } }
);
45 showOtherMonths

This option if set to true, dates before or after the first and last days of the current month are displayed. These dates aren't selectable unless the selectOtherMonths option is also set to true. By default its value is false.

Option - showOtherMonths

This option if set to true, dates before or after the first and last days of the current month are displayed. These dates aren't selectable unless the selectOtherMonths option is also set to true. By default its value is false.

Syntax

$(".selector").datepicker(
   { showOtherMonths: true }
);
46 showWeek

This option if set to true, the week number is displayed in a column to the left of the month display. The calculateWeek option can be used to alter the manner in which this value is determined. By default its value is false.

Option - showWeek

This option if set to true, the week number is displayed in a column to the left of the month display. The calculateWeek option can be used to alter the manner in which this value is determined. By default its value is false.

Syntax

$(".selector").datepicker(
   { showWeek: true }
);
47 stepMonths

This option specifies specifies how many months to move when one of the month navigation controls is clicked. By default its value is 1.

Option - stepMonths

This option specifies specifies how many months to move when one of the month navigation controls is clicked. By default its value is 1.

Syntax

$(".selector").datepicker(
   { stepMonths: 3 }
);
48 weekHeader

This option specifies the text to display for the week number column, overriding the default value of Wk, when showWeek is true. By default its value is Wk.

Option - weekHeader

This option specifies the text to display for the week number column, overriding the default value of Wk, when showWeek is true. By default its value is Wk.

Syntax

$(".selector").datepicker(
   { weekHeader: "W" }
);
49 yearRange

This option specifies limits on which years are displayed in the dropdown in the form from:to when changeYear is true. The values can be absolute or relative (for example: 2005:+2, for 2005 through 2 years from now). The prefix c can be used to make relative values offset from the selected year rather than the current year (example: c-2:c+3). By default its value is c-10:c+10.

Option - yearRange

This option specifies limits on which years are displayed in the dropdown in the form from:to when changeYear is true. The values can be absolute or relative (for example: 2005:+2, for 2005 through 2 years from now). The prefix c can be used to make relative values offset from the selected year rather than the current year (example: c-2:c+3). By default its value is c-10:c+10.

Syntax

$(".selector").datepicker(
   { yearRange: "2002:2012" }
);
50 yearSuffix

This option displays additional text after the year in the datepicker header. By default its value is "".

Option - yearSuffix

This option displays additional text after the year in the datepicker header. By default its value is "".

Syntax

$(".selector").datepicker(
   { yearSuffix: "CE" }
);

The following section will show you a few working examples of datepicker functionality.

Default functionality

The following example demonstrates a simple example of datepicker functionality passing no parameters to the datepicker() method.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Datepicker functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

      <!-- Javascript -->
      <script>
         $(function() { $( "#datepicker-1" ).datepicker();
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <p>Enter Date: <input type = "text" id = "datepicker-1"></p>
   </body>
</html>

Let us save the above code in an HTML file datepickerexample.htm and open it in a standard browser which supports javascript, you must also see the following output. Now, you can play with the result −

Inline Datepicker

The following example demonstrates a simple example of inline datepicker functionality.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Datepicker functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- Javascript -->
      <script>
         $(function() { $( "#datepicker-2" ).datepicker();
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      Enter Date: <div id = "datepicker-2"></div>
   </body>
</html>

Let us save the above code in an HTML file datepickerexample.htm and open it in a standard browser which supports javascript, you must also see the following output. Now, you can play with the result −

In the above example we use <div> element to get the inline date picker.

Use of appendText, dateFormat, altField and altFormat

The following example shows the usage of three important options (a) appendText (b) dateFormat (c) altField and (d) altFormat in the datepicker function of JqueryUI.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Datepicker functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- Javascript -->
      <script>
         $(function() { $( "#datepicker-3" ).datepicker({
               appendText:"(yy-mm-dd)",
               dateFormat:"yy-mm-dd",
               altField: "#datepicker-4",
               altFormat: "DD, d MM, yy"
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <p>Enter Date: <input type = "text" id = "datepicker-3"></p>
      <p>Alternate Date: <input type = "text" id = "datepicker-4"></p>
   </body>
</html>

Let us save the above code in an HTML file datepickerexample.htm and open it in a standard browser which supports javascript, you must also see the following output. Now, you can play with the result −

In the above example, you can see that the date formate for first input is set as yy-mm-dd. If you select some date from datepicker the same date is reflected in the second input field whose date format is set as "DD, d MM, yy".

Use of beforeShowDay

The following example shows the usage of option beforeShowDay in the datepicker function of JqueryUI.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Datepicker functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

      <!-- Javascript -->
      <script>
         $(function() { $( "#datepicker-5" ).datepicker({
               beforeShowDay : function (date) {
                  var dayOfWeek = date.getDay ();
                  // 0 : Sunday, 1 : Monday, ...
                  if (dayOfWeek == 0 || dayOfWeek == 6) return [false];
                  else return [true];
               }
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <p>Enter Date: <input type = "text" id = "datepicker-5"></p>
   </body>
</html>

Let us save the above code in an HTML file datepickerexample.htm and open it in a standard browser which supports javascript, you must also see the following output. Now, you can play with the result −

In the above example sunday and saturday are disabled.

Use of showOn, buttonImage, and buttonImageOnly

The following example shows the usage of three important options (a) showOn (b) buttonImage and (c) buttonImageOnly in the datepicker function of JqueryUI.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Datepicker functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
   
      <!-- Javascript -->
      <script>
         $(function() { $( "#datepicker-6" ).datepicker({
               showOn:"button",
               buttonImage: "/jqueryui/images/calendar-icon.png",
               buttonImageOnly: true
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <p>Enter Date: <input type = "text" id = "datepicker-6"></p>
   </body>
</html>

Let us save the above code in an HTML file datepickerexample.htm and open it in a standard browser which supports javascript, you must also see the following output. Now, you can play with the result −

In the above example an icon is displayed which needs to b clicked to open the datepicker.

Use of defaultDate, dayNamesMin, and duration

The following example shows the usage of three important options (a) dayNamesMin (b) dayNamesMin and (c) duration in the datepicker function of JqueryUI.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Datepicker functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- Javascript -->
      <script>
         $(function() { $( "#datepicker-7" ).datepicker({
               defaultDate:+9,
               dayNamesMin: [ "So", "Mo", "Di", "Mi", "Do", "Fr", "Sa" ],
               duration: "slow"
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <p>Enter Date: <input type = "text" id = "datepicker-7"></p>
   </body>
</html>

Let us save the above code in an HTML file datepickerexample.htm and open it in a standard browser which supports javascript, you must also see the following output. Now, you can play with the result −

In the above example the names of the days are changed using dayNamesMin. You can also see a default date is set.

Use of prevText, nextText, showOtherMonths and selectOtherMonths

The following example shows the usage of three important options (a) prevText (b) nextText (c) showOtherMonths and (d) selectOtherMonths in the datepicker function of JqueryUI.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Datepicker functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <!-- Javascript -->
      
      <script>
         $(function() { $( "#datepicker-8" ).datepicker({
               prevText:"click for previous months",
               nextText:"click for next months",
               showOtherMonths:true,
               selectOtherMonths: false
            });
            $( "#datepicker-9" ).datepicker({
               prevText:"click for previous months",
               nextText:"click for next months",
               showOtherMonths:true,
               selectOtherMonths: true
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <p>Enter Start Date: <input type = "text" id = "datepicker-8"></p>
      <p>Enter End Date: <input type = "text" id = "datepicker-9"></p>
   </body>
</html>

Let us save the above code in an HTML file datepickerexample.htm and open it in a standard browser which supports javascript, you must also see the following output. Now, you can play with the result −

In the above example the prev and nect links have captions. If you click on the element, the datepicker opens. Now in the first datepicker, the other months dates are disable as selectOtherMonths is setfalse. In the second date picker for second input type, the selectOtherMonths is set totrue.

Use of changeMonth, changeYear, and numberOfMonths

The following example shows the usage of three important options (a) changeMonth (b) changeYear and (c) numberOfMonths in the datepicker function of JqueryUI.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Datepicker functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#datepicker-10" ).datepicker({
               changeMonth:true,
               changeYear:true,
               numberOfMonths:[2,2]
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <p>Enter Date: <input type = "text" id = "datepicker-10"></p>
   </body>
</html>

위 코드를 HTML 파일에 저장하겠습니다. datepickerexample.htmjavascript를 지원하는 표준 브라우저에서 열면 다음 출력도 표시되어야합니다. 이제 결과를 가지고 놀 수 있습니다.

위의 예에서 월 및 연도 필드에 대한 드롭 다운 메뉴를 볼 수 있습니다. 그리고 우리는 [2,2]의 배열 구조에서 4 개월을 처리합니다.

showWeek, yearSuffix 및 showAnim 사용

다음 예는 세 가지 중요한 옵션의 사용법을 보여줍니다. (a) showWeek (b) yearSuffix(c) showAnim JqueryUI의 datepicker 함수에서.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Datepicker functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#datepicker-11" ).datepicker({
               showWeek:true,
               yearSuffix:"-CE",
               showAnim: "slide"
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <p>Enter Date: <input type = "text" id = "datepicker-11"></p>
   </body>
</html>

위 코드를 HTML 파일에 저장하겠습니다. datepickerexample.htmjavascript를 지원하는 표준 브라우저에서 열면 다음 출력도 표시되어야합니다. 이제 결과를 가지고 놀 수 있습니다.

위의 예에서 showWeektrue 로 설정 되어 있으므로 datepicker의 왼쪽에 주 번호가 표시되는 것을 볼 수 있습니다 . 연도에는 "-CE"접미사가 있습니다.

$ (selector, context) .datepicker ( "action", [params]) 메서드

날짜 선택기 (액션, PARAMS) 방법은 새로운 날짜를 선택 등과 같은 달력에서 동작을 수행 할 수있다. 그만큼action 첫 번째 인수의 문자열로 지정되고 선택적으로 하나 이상의 params 주어진 행동에 따라 제공 될 수 있습니다.

기본적으로 여기서 액션은 아무것도 아니지만 문자열 형태로 사용할 수있는 jQuery 메서드입니다.

통사론

$(selector, context).datepicker ("action", [params]);

다음 표는이 방법에 대한 작업을 나열합니다.

Sr. 아니. 액션 및 설명
1 멸하다()

이 작업은 datepicker 기능을 완전히 제거합니다. 이렇게하면 요소가 초기화 이전 상태로 돌아갑니다. 이 메서드는 인수를 허용하지 않습니다.

Action - destroy()

이 작업은 datepicker 기능을 완전히 제거합니다. 이렇게하면 요소가 초기화 이전 상태로 돌아갑니다. 이 메서드는 인수를 허용하지 않습니다.

Syntax

$(".selector").datepicker("destroy");
2 대화 상자 (날짜 [, onSelect] [, 설정] [, 위치])

이 작업은 jQuery UI 대화 상자에 datepicker를 표시합니다.

Action - dialog( date [, onSelect ] [, settings ] [, pos ] )

이 작업은 jQuery UI 대화 상자에 datepicker를 표시합니다. 어디-

  • date 는 초기 날짜입니다.

  • onSelect 는 날짜 선택시 콜백 함수입니다. 이 함수는 날짜 텍스트와 날짜 선택기 인스턴스를 매개 변수로받습니다.

  • 설정 은 날짜 선택기의 새로운 설정입니다.

  • pos 는 [x, y] 또는 좌표를 포함하는 MouseEvent와 같은 대화 상자의 상단 / 왼쪽 위치입니다. 지정하지 않으면 대화 상자가 화면 중앙에 배치됩니다.

Syntax

$(".selector").datepicker( "dialog", "10/12/2012" );
getDate ()

이 작업은 선택한 날짜에 해당하는 날짜를 반환합니다. 이 메서드는 인수를 허용하지 않습니다.

Action - getDate()

이 작업은 선택한 날짜에 해당하는 날짜를 반환합니다. 이 메서드는 인수를 허용하지 않습니다.

Syntax

$(".selector").datepicker("getDate");
4 숨는 장소()

이 작업은 이전에 연 날짜 선택기를 닫습니다. 이 메서드는 인수를 허용하지 않습니다.

Action - hide()

이 작업은 이전에 연 날짜 선택기를 닫습니다. 이 메서드는 인수를 허용하지 않습니다.

Syntax

$(".selector").datepicker("hide");
5 isDisabled ()

이 작업은 날짜 선택기 기능이 비활성화되었는지 확인합니다. 이 메서드는 인수를 허용하지 않습니다.

Action - isDisabled()

이 작업은 날짜 선택기 기능이 비활성화되었는지 확인합니다. 이 메서드는 인수를 허용하지 않습니다.

Syntax

$(".selector").datepicker("isDisabled");
6 옵션 (optionName)

이 조치는 현재 지정된 optionName 과 연관된 값을 검색합니다 .

Action - option( optionName )

이 조치는 현재 지정된 optionName 과 연관된 값을 검색합니다 .

Syntax

$(".selector").datepicker( "option", "disabled");
7 선택권()

이 작업은 현재 datepicker 옵션 해시를 나타내는 키 / 값 쌍을 포함하는 객체를 가져옵니다. 이 메서드는 인수를 허용하지 않습니다.

Action - option()

이 작업은 현재 datepicker 옵션 해시를 나타내는 키 / 값 쌍을 포함하는 객체를 가져옵니다. 이 메서드는 인수를 허용하지 않습니다.

Syntax

var options = $( ".selector" ).datepicker( "option" );
8 옵션 (optionName, value)

이 작업은 지정된 optionName과 연결된 datepicker 옵션의 값을 설정합니다.

Action - option( optionName, value )

이 작업은 지정된 optionName과 연결된 datepicker 옵션의 값을 설정합니다.

Syntax

$(".selector").datepicker( "option", "disabled", true );
9 옵션 (옵션)

이 작업은 datepicker에 대한 하나 이상의 옵션을 설정합니다.

Action - option( options )

이 작업은 datepicker에 대한 하나 이상의 옵션을 설정합니다.

Syntax

$(".selector").datepicker("option", { disabled: true });
10 새롭게 하다()

이 작업은 일부 외부 수정을 수행 한 후 날짜 선택기를 다시 그립니다. 이 메서드는 인수를 허용하지 않습니다.

Action - refresh()

이 작업은 일부 외부 수정을 수행 한 후 날짜 선택기를 다시 그립니다. 이 메서드는 인수를 허용하지 않습니다.

Syntax

$(".selector").datepicker("refresh");
11 setDate (날짜)

이 작업은 지정된 날짜를 datepicker의 현재 날짜로 설정합니다.

Action - setDate()

이 작업은 지정된 날짜를 datepicker의 현재 날짜로 설정합니다.

Syntax

$(".selector").datepicker("setDate", "10/12/2012");
12 보여 주다()

이 작업은 날짜 선택기를 엽니 다. datepicker가 입력에 연결된 경우 datepicker를 표시하려면 입력이 표시되어야합니다. 이 메서드는 인수를 허용하지 않습니다.

Action - show()

이 작업은 날짜 선택기를 엽니 다. datepicker가 입력에 연결된 경우 datepicker를 표시하려면 입력이 표시되어야합니다. 이 메서드는 인수를 허용하지 않습니다.

Syntax

$(".selector").datepicker("show");
13 위젯 ()

이 작업은 datepicker를 포함하는 jQuery 객체를 반환합니다.

Action - widget()

이 작업은 datepicker를 포함하는 jQuery 객체를 반환합니다.

Syntax

$(".selector").datepicker("widget");

다음 예는 위 표에 나열된 일부 작업의 사용을 보여줍니다.

setDate () 액션 사용

이제 위 표의 작업을 사용한 예를 살펴 보겠습니다. 다음 예제는 setDate 조치의 사용을 보여줍니다 .

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Datepicker functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- Javascript -->
      <script>
         $(function() { $( "#datepicker-12" ).datepicker();
            $( "#datepicker-12" ).datepicker("setDate", "10w+1");
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <p>Enter Date: <input type = "text" id = "datepicker-12"></p>
   </body>
</html>

위 코드를 HTML 파일에 저장하겠습니다. datepickerexample.htm 자바 스크립트를 지원하는 표준 브라우저에서 열면 다음 출력이 표시되어야합니다.

show () 액션 사용

다음 예제는 action show 의 사용을 보여줍니다 .

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Datepicker functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#datepicker-13" ).datepicker(); $( "#datepicker-13" ).datepicker("show");
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <p>Enter Date: <input type = "text" id = "datepicker-13"></p>
   </body>
</html>

위 코드를 HTML 파일에 저장하겠습니다. datepickerexample.htm 자바 스크립트를 지원하는 표준 브라우저에서 열면 다음 출력이 표시되어야합니다.

datepicker 요소에 대한 이벤트 관리

현재로서는 datepicker 이벤트 메서드가 없습니다!