滞在期間を入力する（日付ピッカー）
宿泊料金を計算するには、いつからいつまで利用するのかを設定する必要があります。そのため、滞在期間先を選択するための日付ピッカーを配置します。この日付ピッカーはWindowsストアアプリで用意されたコントロールであるDatePickerコントロールを使用します。Windowsストアアプリの画面をHTMLで開発するときは、HTML5で利用できるものに加えて、Windowsストアアプリ専用のコントロールも使用できるようになっています。
このWindowsストアアプリ専用のコントロールを使うには、どのようなコードを書けばよいでしょうか。実は、次のような簡単なコードを書くだけで、便利なコントロールを利用できます。
Windowsストアアプリ専用のコントロールを利用するときは、まず<div>要素を定義します。そして<div>要素の中にdata-win-control属性を指定します。data-win-control属性の値には、利用したいコントロールの値を設定します。日付ピッカーを使う場合は、data-win-control属性の値を"WinJS.UI.DatePicker"にします。
Step3:滞在日数を選んでください： <div id="start_date" data-win-control="WinJS.UI.DatePicker"></div> から <div id="end_date" data-win-control="WinJS.UI.DatePicker"></div> まで <hr>
これは、JavaScript用Windowsライブラリ（WinJS）で用意された、画面部品群（UI）に含まれるDatePickerという部品を使うよ！という命令になります。WinJSにはこのほかにもさまざまな部品や機能が用意されており、開発者はこれらを自由に使うことができます。
このプログラムを、default.htmlのmain-right要素の中に記述して、アプリケーションを実行すると、次のような日付ピッカーが表示されます。
日付ピッカーは、年／月／日がコンボボックスになっていて、値を選択できるようになっています。
人数を入力する（スライダー）
ユーザが、ホテルに滞在する人数を選択するためのスライダーを配置します。スライダーはバーを動かすことで値を変化できるコントロールで、音声のボリュームを設定する場合などによく使われます。スライダーを利用するには、<input>要素のtype属性を”range”に設定します。スライダーで選択できる最大値はmax属性、最小値はmin属性を指定します。また、step属性で値の増加分を指定し、value属性でスライダーの値を設定できます。ここでは、人数を1人から5人に設定できるスライダーを表示し、値を2人に設定します。なお、一般的なアプリでは、人数はリストボックスなどを使う場合が多いですが、コントロールの動作を説明するためにサンプルアプリではスライダーを使っています。
Step4:滞在人数を選んでください：<br> <input id="member" type="range" min="1" max="5" step ="1" value="2" />
このプログラムを、default.htmlのmain-right要素の中に記述して、アプリケーションを実行すると、次のようなスライダーが表示されます。
