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 (옵션) 메서드

통사론

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

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

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

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

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

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

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

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

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

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

$(".selector").datepicker(
   { buttonText: "Choose" }
);

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

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

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

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

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

$(".selector").datepicker(
   { currentText: "Now" }
);

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

$(".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를 지원하는 표준 브라우저에서 열면 다음 출력도 표시되어야합니다. 이제 결과를 가지고 놀 수 있습니다.

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

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

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

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

통사론

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

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

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

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

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

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

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

$(".selector").datepicker( "option", "disabled");

var options = $( ".selector" ).datepicker( "option" );

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

$(".selector").datepicker("option", { disabled: true });

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

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

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

$(".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 이벤트 메서드가 없습니다!