빠른 시작: DatePicker 추가(HTML)

아티클
03/04/2016

[ 이 문서는 Windows 런타임 앱을 작성하는 Windows 8.x 및 Windows Phone 8.x 개발자를 대상으로 합니다. Windows 10용으로 개발하는 경우에는 최신 설명서를 참조하세요.]

사용자가 응용 프로그램에서 날짜를 설정할 수 있도록 해야 하는 경우(예: 약속을 잡거나 신용 카드 만료 날짜를 설정하기 위해) JavaScript용 Windows 라이브러리의 DatePicker 컨트롤을 사용할 수 있습니다. DatePicker는 연, 월, 일의 세 가지 컨트롤을 표시합니다. 이러한 컨트롤은 터치 지원과 함께 쉽게 사용할 수 있으며 여러 가지 방법으로 스타일을 지정하고 구성할 수 있습니다. (Windows만 해당)

목표: DatePicker 사용 방법

사전 요구 사항

이 항목에서는 JavaScript로 작성한 기본 Windows 런타임 앱을 만들 수 있다고 가정합니다. 첫 번째 앱을 만드는 방법에 대한 자세한 내용은 JavaScript를 사용하여 첫 Windows 런타임 앱 만들기를 참조하세요.

지침

1. 간단한 DatePicker 만들기

대부분의 WinJS 컨트롤과 마찬가지로 DatePicker를 선언적으로(<div> 요소의 data-win-control 특성으로) 또는 명령적으로(JavaScript 코드 블록에서) 만들 수 있습니다. 컨트롤을 표시하려면 WinJS.UI.processAll을 호출해야 합니다. JavaScript를 사용하는 Windows 스토어 앱에 Visual Studio 프로젝트 템플릿을 사용하는 경우 activated 이벤트 처리기에서 자동으로 이 작업이 수행됩니다.

다음은 DatePicker를 선언적으로 만드는 방법입니다.

<!DOCTYPE html>
<html>
<head>
  <title>DatePicker Control Example</title>  
  <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet">
  <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
  <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>
</head>
 <body>
     <section>
         <h1> DatePicker Example</h1>
             <h3>Add a DatePicker Declaratively</h3>
             <div id="date" data-win-control="WinJS.UI.DatePicker"></div>
             <script type="text/javascript">
                 WinJS.UI.processAll();
             </script>
     </section>
 </body>
 
</html>

다음은 코드에서 DatePicker를 만드는 방법입니다.

<!DOCTYPE html>
<html>
<head>
<head>
  <title>DatePicker Control Example</title>  
  <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet">
  <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
  <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>
  </head>
    <body>      
        <section>
            <h1> DatePicker Example</h1>
                <h3>Add a DatePicker Imperatively</h3>
            <div id="date"></div>
            <script type="text/javascript">
               var dateDiv = document.getElementById("date");
               var datePicker = new WinJS.UI.DatePicker(dateDiv);
            </script>
        </section>
    </body>
</html>

솔루션을 빌드하여 실행하면 기본적으로 현재 상태를 표시하는 드롭다운이 연, 월, 일의 세 가지 컨트롤과 함께 나타납니다.

ui-dark.css 파일을 사용할 경우 DatePicker는 다음과 같습니다. DatePicker 어두운 스타일

ui-light.css 파일을 사용할 경우 DatePicker는 다음과 같습니다. DatePicker 밝은 스타일

2. 기본 날짜 변경

다른 기본 날짜를 선언적으로 설정할 수 있습니다.

<div data-win-control="WinJS.UI.DatePicker" data-win-options="{current:'2/20/2011'}"></div>

기본 날짜 역시 코드로 설정할 수 있습니다.

// "date" is the id of the <div> element
var dateDiv = document.getElementById("date") 
var datePicker = new WinJS.UI.DatePicker(dateDiv, {current: '2/20/2011'});

JavaScript Date 개체에 허용되는 모든 방식으로 날짜 문자열 형식을 지정할 수 있습니다. 예를 들면 다음과 같습니다.

'2011년 2월 20일'
'02/20/2011'
'2011년 2월 20일 일요일'

중요 이번 릴리스에서는 임의 달력을 사용할 수 있습니다.

3. 다른 최소 및 최대 날짜 지정

기본적으로 사용자가 선택할 수 있는 연도의 범위는 올해에서 100을 뺀 해부터 올해에서 100을 더한 해까지입니다. 가장 빠른 해를 1900년으로 변경하고 마지막 해를 2300년으로 변경하는 방법은 다음과 같습니다.

선언적으로

<div data-win-control="WinJS.UI.DatePicker" data-win-options="{minYear: 1900, maxYear: 2300}"></div>

코드로

var datePicker = new WinJS.UI.DatePicker(dateDiv);
datePicker.minYear= 1900;
datePicker.maxYear = 2300;

4. 일, 월 또는 연도 패턴 변경

일, 월 또는 연도의 패턴을 변경할 수 있습니다. 기본적으로 DatePicker는 월의 전체 이름, 2자리 일 및 4자리 연도를 영어 로캘로 표시합니다. 이러한 표시 패턴은 다음 방법으로 변경할 수 있습니다.

월이 표시되는 방법을 변경하려면


var datePicker = new WinJS.UI.DatePicker(dateDiv);

//change the month to an integer
datePicker.monthPattern = "{month.integer}"; 

//change the month to an abbreviation
datePicker.monthPattern = "{month.abbreviated}";

일이 표시되는 방법을 변경하려면


var datePicker = new WinJS.UI.DatePicker(dateDiv);

//display the day without leading zeros
datePicker.datePattern = "{day.integer(1)}";

//display the day of the week along with the date
datePicker.datePattern = 
    "{day.integer(2)} ({dayofweek.abbreviated})";

연도가 표시되는 방법을 변경하려면


var datePicker = new WinJS.UI.DatePicker(dateDiv);

//diplay the year with only two digits
 datePicker.yearPattern = "{year.abbreviated}";

다음 목록은 DatePicker에서 사용할 수 있는 패턴 값을 제공합니다.

{day.integer} | day.integer(n)}
{dayofweek.full} | {dayofweek.abbreviated} | {dayofweek.abbreviated(n)}
{dayofweek.solo.full} | {dayofweek.solo.abbreviated} | {dayofweek.solo.abbreviated(n)}
{month.full} | {month.abbreviated} | {month.abbreviated(n)}
{month.solo.full} | {month.solo.abbreviated} | {month.solo.abbreviated(n)}
{month.integer} | {month.integer(n)}
{year.full} | {year.full(n)} | {year.abbreviated} | {year.abbreviated(n)}
{era.abbreviated} | {era.abbreviated(n)}

5. 달력 변경

DatePicker에서 사용하는 달력을 변경할 수 있습니다.

다음 값 중 하나로 달력을 변경합니다.
- "GregorianCalendar"
- "HijriCalendar"
- "HebrewCalendar"
- "JapaneseCalendar"
- "KoreanCalendar"
- "ThaiCalendar"
- "TaiwanCalendar"
- "UmAlQuraCalendar"
- "JulianCalendar"
```
datePicker.calendar = "ThaiCalendar";
```

6. DatePicker 비활성화

DatePicker의 disabled 속성을 true로 설정하여 비활성화할 수 있습니다. 그러면 컨트롤이 흐리게 표시되어 사용자가 사용할 수 없게 됩니다.

datePicker.disabled = true;

7. 변경 이벤트에 응답

응용 프로그램에서 change 이벤트를 처리하여 동작을 수정할 수 있습니다. 이 이벤트는 날짜가 프로그래밍 방식으로 변경될 때가 아니라 사용자가 날짜를 변경할 때 발생합니다.


datePicker.onchange = dateChangeHandler;

function dateChangeHandler(event) {
    // Insert code here.
    }

8. DatePicker의 모양 변경

일반적으로 CSS 스타일을 사용하여 DatePicker의 모양을 변경할 수 있습니다. border-color 및 background-color 스타일을 사용하여 DatePicker를 강조할 수 있습니다.

<style id="text/css">
    [class="win-datepicker"] {background-color:LightBlue; }
</style>

다음 CSS 클래스를 사용하여 DatePicker 컨트롤의 특정 부분을 지정할 수 있습니다.

win-datepicker
win-datepicker-date
win-datepicker-month
win-datepicker-year

예를 들어 날짜 드롭다운의 테두리 색을 변경할 수 있습니다.


 .win-datepicker-date
{
    border: 3px solid rgb(28, 160, 218);
}

이렇게 하면 날짜 드롭다운에 파란색 테두리가 나타납니다(ui-light.css 파일 사용). 스타일이 지정된 DatePicker

이름이 지정된 문자열로 시작하는 모든 특성을 찾는 CSS 특성 선택기 접두사 구문(^=)을 사용하여 3개의 DatePicker 드롭다운을 모두 선택할 수 있습니다.

[class^="win-datepicker"] {border:red; }

9. 컨트롤 표시 및 숨기기

특정 드롭다운의 display 특성을 none으로 설정하여 일 및/또는 연도를 표시할지 여부를 지정할 수 있습니다.

.win-datepicker-year { display:none; }

DatePicker의 단 하나의 인스턴스에 대한 드롭다운을 숨기려면 <div> 요소의 ID를 지정해야 합니다. 예를 들어 ID가 "date"인 <div> 요소에서 표시된 DatePicker에 대해서만 날짜를 숨기는 방법은 다음과 같습니다.

#date *.win-datepicker-date { display: none; }

10. DatePicker 드롭다운을 세로로 표시

월, 일, 연도 컨트롤을 가로가 아닌 세로로 표시하려면 이 드롭다운에서 CSS 특성 display를 설정할 수 있습니다. 또한 DIV 자체에서도 display를 block으로 설정해야 합니다.


#date {display:block;}
#date *[class^="win-datepicker"]{ display:block; }

화면의 너비가 지정된 제한값보다 작을 때만 표시하는 등 드롭다운을 조건에 따라 세로로 표시할 수도 있습니다. 다음 CSS 미디어 쿼리는 320픽셀 이하의 모든 너비에 대해 컨트롤이 세로로 표시되도록 지정합니다.

@media all and (max-width:320px) {
#date {display:block;}
*[class^="win-datepicker"] { display: block; }
}

11. 각 DatePicker 인스턴스에 서로 다른 스타일 사용

특정 DatePicker 인스턴스에 대해 해당 인스턴스와 연관된 <div> 요소를 지정하여 다른 스타일을 사용할 수 있습니다. 예를 들어 ID가 "start-date"인 **<div>**에 DatePicker가 하나 있고 ID가 "end-date"인 **<div>**에 또 다른 DatePicker가 있다면 DatePicker의 시작 날짜와 종료 날짜에 다음과 같이 서로 다른 글꼴 색을 설정할 수 있습니다.

#start-date [class^="win-datepicker"] { color:red; }
#end-date [class^="win-datepicker"] { color:blue; }

12. 의사 클래스를 사용하여 DatePicker 스타일 지정

DatePicker는 DatePicker가 특정 상태일 때 특정 스타일을 표시하기 위한 선택기로 사용할 수 있는 다음 의사 클래스를 지원합니다.

win-datepicker:hover.사용자는 선택기 위에 커서를 놓지만 클릭하여 활성화하지는 않습니다. 다음은 월 드롭다운을 마우스로 가리키는 경우입니다.
win-datepicker:active. 사용자가 드롭다운을 여는 컨트롤을 누르고, 옵션을 선택하기 전에 선택기가 활성 상태가 됩니다.
win-datepicker:focus. 선택기는 강조 표시되므로 키보드 입력이 가능해집니다.
win-datepicker:disabled. 선택기는 사용자 상호 작용을 수락할 수 없습니다. 이 의사 클래스의 경우 선택기의 disabled 속성을 true로 설정해야 합니다.

요약

이 항목에서는 DatePicker를 만드는 방법을 배웠습니다.

다음을 통해 공유