빠른 시작: TimePicker 추가(HTML)

  • 아티클

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

모임이나 미리 알림을 예약하는 등 사용자가 응용 프로그램에서 시간을 선택하도록 허용해야 하는 경우에는 JavaScript용 Windows 라이브러리에 포함된 TimePicker를 사용할 수 있습니다. TimePicker는 시 컨트롤, 분 컨트롤, 그리고 AM/PM 선택 컨트롤, 이렇게 세 개 컨트롤을 표시합니다. 이러한 컨트롤은 터치 지원과 함께 쉽게 사용할 수 있으며 여러 가지 방법으로 스타일을 지정하고 구성할 수 있습니다. (Windows만 해당)

목표: TimePicker를 추가하는 방법을 보여줍니다.

사전 요구 사항

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

완료 시간: 15 분.

지침

1. 단순형 TimePicker 만들기

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

다음은 선언을 통해 TimePicker를 만드는 방법입니다.

<!DOCTYPE html>
<html>
<head>
  <title>TimePicker 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>
    <body>
        <section>
            <h1> TimePicker Example</h1>
                <h3>Add a TimePicker Declaratively</h3>
                <div id="time" data-win-control="WinJS.UI.TimePicker"></div>
                <script type="text/javascript">
                    WinJS.UI.processAll(document.getElementById("time"));
                </script>
        </section>
    </body>
    
</html>

(코드 내부에서) 명령을 통해 TimePicker를 만들려면 다음을 수행합니다.

<!DOCTYPE html>
<html>
<head>
  <title>TimePicker 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>
   <body>
        <section>
            <h1> TimePicker Example</h1>
                <h3>Add a TimePicker Imperatively</h3>
                <div id="time" ></div>
                <script type="text/javascript">
                    var timeDiv = document.getElementById("time"); 
                    var timePicker = new WinJS.UI.TimePicker(timeDiv);
                </script>
        </section>
    </body>
</html>

솔루션을 빌드하고 실행하면 시간, 분 및 AM/PM으로 현재 시간을 표시하는 세 개 컨트롤이 표시됩니다.

다음은 ui-dark.css 파일을 사용할 때 TimePicker가 표시되는 방식입니다.TimePicker 어두운 스타일

다음은 ui-light.css 파일을 사용할 때 TimePicker가 표시되는 방식입니다.TimePicker 밝은 스타일

2. 기본 시간 변경

다음과 같은 방법으로 기본 시간을 설정할 수 있습니다.

선언을 통해

<div data-win-control="WinJS.UI.TimePicker" data-win-options="{current='11:00:00'}"></div>

명령을 통해

// "time" is the ID of the <div> element
var timeDiv = document.getElementById("time"); 
var timePicker = new WinJS.UI.TimePicker(timeDiv, {current:'11:00:00'});

UTC 값을 제외하고 JavaScript Date 개체에 허용되는 모든 방식으로 시간 문자열 형식을 지정할 수 있습니다. 예를 들면 다음과 같습니다.

  • 03:20 pm
  • 15:20:00

3. 분 증분 값 지정

minuteIncrement 속성을 설정하여 TimePicker의 분 컨트롤에 분이 표시되는 방식을 변경할 수 있습니다. 예를 들면 다음 코드에서는 분 컨트롤이 분을 5의 배수로 표시합니다.

<div data-win-control="WinJS.UI.TimePicker" data-win-options="{minuteIncrement:5}"></div>

4. 분과 시가 표시되는 방식 변경

분과 시의 패턴을 변경할 수 있습니다. 기본적으로 TimePicker는 en-us 로캘로 2자리 시간, 2자리 분, 그리고 AM/PM 지정자를 표시합니다. 이러한 표시 패턴은 다음 방법으로 변경할 수 있습니다.

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

var timePicker = WinJS.UI.TimePicker(timeDiv);

//does not display leading zeros
timePicker.minutePattern = "{minute.integer(1)}";

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


var timePicker = WinJS.UI.TimePicker(timeDiv);

//does not display leading zeros
timePicker.hourPattern = "{hour.integer(1)}";

12시간제 또는 24시간제를 지정하려면

var timePicker = WinJS.UI.TimePicker(timeDiv);

//displays a 24-hour clock
timePicker.clock = "24HourClock";

//displays a 12-hour clock, plus "AM" or "PM"
timePicker.clock = "12HourClock";

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

  • {minute.integer} | {minute.integer(n)}
  • {hour.integer} | {hour.integer(n)}

5. TimePicker 비활성화

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

var timePicker = new WinJS.UI.TimePicker(timeDiv);
timePicker.disabled = true;

6. onchange 이벤트에 응답

change 이벤트를 사용하여 응용 프로그램의 동작을 수정할 수 있습니다.

timePicker.onchange = hourChangeHandler; 

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

7. TimePicker의 모양 변경

일반적으로 CSS 스타일을 사용하여 TimePicker의 모양을 변경할 수 있으며

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

다음 CSS 클래스 중 하나를 사용하여 TimePicker 드롭다운을 지정할 수 있습니다.

  • win-timepicker
  • win-timepicker-hour
  • win-timepicker-minute
  • win-timepicker-ampm

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

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

이렇게 하면 시간 드롭다운에 파란색 테두리가 표시됩니다.TimePicker 시간 파란색 테두리

기간(오전/오후) 드롭다운의 테두리 색을 변경할 수 있습니다.

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

이렇게 하면 기간 드롭다운에 파란색 테두리가 표시됩니다.TimePicker 기간에 파란색 테두리 포함

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

[class^="win-timepicker"] { color:red; }

8. 컨트롤 표시/숨기기

display 특성을 none으로 설정하여 특정 컨트롤을 표시할지 여부를 지정할 수 있습니다.

.win-timepicker-minute { display:none; }

TimePicker의 한 개 인스턴스에서만 컨트롤을 숨기려면 관련 <div> 요소의 ID를 참조해야 합니다. 예를 들어 "time" ID를 사용하여 <div> 요소에 표시된 TimePicker에 대해서만 분을 숨기려면 다음을 수행합니다.

#time *.win-timepicker-minute { display: none; }

9. TimePicker 컨트롤을 세로로 표시

시, 분 및 AM/PM 컨트롤을 가로가 아닌 세로로 표시하려면 이 컨트롤에서 CSS 특성 display를 설정해야 합니다. 또한 DIV 자체에서도 display를 block으로 설정해야 합니다.


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

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

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

10. 의사 클래스를 사용하여 TimePicker 스타일 지정

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

  • win-timepicker:hover.사용자는 선택기 위에 커서를 놓지만 클릭하여 활성화하지는 않습니다. 다음은 시간 드롭다운을 마우스로 가리키는 경우입니다. 마우스 가리키기가 지원되는 DatePicker

  • win-timepicker:active. 사용자가 드롭다운을 여는 컨트롤을 누르고, 옵션을 선택하기 전에 선택기가 활성 상태가 됩니다.활성 상태의 DatePicker

  • win-timepicker:focus. 선택기는 강조 표시되므로 키보드 입력이 가능해집니다.DatePicker가 강조 표시됨

  • win-timepicker:disabled. 선택기는 사용자 상호 작용을 수락할 수 없습니다. 이 의사 클래스의 경우 선택기의 disabled 속성을 true로 설정해야 합니다.DatePicker가 사용할 수 없게 설정됨

요약

여기서는 TimePicker를 만드는 방법에 대해 알아보았습니다.