クイック スタート: TimePicker の追加 (HTML)
[ この記事は、Windows ランタイム アプリを作成する Windows 8.x および Windows Phone 8.x 開発者を対象としています。Windows 10 向けの開発を行っている場合は、「最新のドキュメント」をご覧ください]
会議やアラームのスケジュール設定のように、アプリケーションのユーザーが時刻を選択する必要がある場合は、JavaScript 用 Windows ライブラリの TimePicker を使うことができます。TimePicker では、それぞれで時間、分、午前または午後を選択する 3 つのコントロールが表示されます。これらのコントロールはタッチ サポートで簡単に使うことができ、さまざまな方法でスタイル指定と構成を実行できます。(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>
ソリューションをビルドして実行すると、時間、分、午前または午後の 3 つのコントロールが表示され、現在の時刻が示されます。
ui-dark.css ファイルを使うと、TimePicker は次のように表示されます。.png "TimePicker 濃色スタイル")
ui-light.css ファイルを使うと、TimePicker は次のように表示されます。.png "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'});
JavaScript の Date オブジェクトで使うことができる、UTC 値を除くすべての書式設定を時刻文字列に指定できます。例をいくつか紹介します。
- 03:20 pm
- 15:20:00
3. 分の値の増分の指定
TimePicker の "分" コントロールに表示する分の値の表示方法は、minuteIncrement プロパティを設定して変更できます。たとえば、次のコードでは、"分" コントロールに 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);
}
これにより、時間ドロップダウンは、次のように青い境界線で表示されます。.png "TimePicker の時間の青い境界線")
時間枠 (午前/午後) ドロップダウンの境界線の色を次のように変更できます。
.win-timepicker-period
{
border: 3px solid rgb(28, 160, 218);;
}
これにより、時間枠ドロップダウンは、次のように青い境界線で表示されます。.png "TimePicker の時間枠の青い境界線")
CSS 属性セレクターのプレフィックス構文 (^=) を使って、3 つの 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 の垂直方向への表示
時間、分、午前/午後の各コントロールを水平方向ではなく垂直方向に表示するには、コントロールの 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。ユーザーはピッカーの上をホバーしていますが、クリックしてアクティブ化していません。ここでは、マウスは時間のドロップダウンをポイントしています。
.png "マウスでポイントしたときの DatePicker")
win-timepicker:active。ピッカーは、ユーザーがコントロールをクリックしてドロップダウンを開いてからオプションを選択するまでアクティブになります。
.png "アクティブな状態の TimePicker")
win-timepicker:focus。ピッカーは強調表示され、キーボード入力を受け付けます。
.png "強調表示されている TimePicker")
win-timepicker:disabled。ピッカーではユーザー操作が許可されていません。 この擬似クラスの場合、ピッカーの disabled プロパティは、true に設定する必要があります。
.png "無効になっている TimePicker")
要約
このトピックでは、TimePicker の作成方法について説明しました。