クイックスタート: DatePicker の追加 (HTML)

[アーティクル]
03/04/2016

[ この記事は、Windows ランタイムアプリを作成する Windows 8.x および Windows Phone 8.x 開発者を対象としています。Windows 10 向けの開発を行っている場合は、「最新のドキュメント」をご覧ください]

予定のスケジュール設定、クレジットカードの有効期限の設定など、アプリケーションのユーザーが日付を設定する必要がある場合は、JavaScript 用 Windows ライブラリの DatePicker を使うことができます。DatePicker を使うと、月、日、年に対応する 3 つのコントロールが表示されます。これらのコントロールはタッチサポートで簡単に使うことができ、さまざまな方法でスタイル指定と構成を実行できます。(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>

ソリューションをビルドして実行すると、既定で現在の日付が示されるコントロールと、月、日、年の 3 つのドロップダウンが表示されます。

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 オブジェクトで使うことができる、すべての書式設定を日付文字列に指定できます。例をいくつか紹介します。

'February 20, 2011'
'02/20/2011'
'Sunday, February 20, 2011'

重要このリリースでは、任意のカレンダーを使うことができます。

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 の既定では、en-us ロケールで、月の完全な名前、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 を指定する必要があります。たとえば、"date" という ID を持つ <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> 要素のスタイルを指定すると、そのインスタンスに対して異なるスタイルを使うことができます。たとえば、DatePicker が、"start-date" という ID の <div> 内に 1 つあり、"end-date" という ID の <div> 内にもう 1 つある場合、次のように、開始日 (start-date) と終了日 (end-date) の 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 の作成方法について説明しました。

クイック スタート: DatePicker の追加 (HTML)