手順 1：ビューの設定

この手順では、さまざまな日付と時刻書式を例示する４つの入力ボックスを追加します。以下を実行します。

ソリューションエクスプローラで、Views | Shared フォルダを展開し、_Layout.cshtml をダブルクリックして、ファイルを開きます。

以下のマークアップをページの <body> タグ内に追加します。このマークアップは４つの異なる入力テキストボックスとラベルをページに追加します。各入力ボックスは異なる日付パターンを表示します。

ソースビュー	コードのコピー
<div class="page"> <div id="header"> <div id="title"> <h2>概要</h2> <div class="main demo"> <!-- デモマークアップの開始 --> <ul class="ui-helper-reset"> <li> <label> dateFormat='T' (長い日付パターン)</label> <input type="text" id="textbox1" /> </li> <li> <label> dateFormat='d' (短い日付パターン)</label> <input type="text" id="textbox2" /> </li> <li> <label> dateFormat='g' (一般的な時刻パターン(短い時刻)) </label> <input type="text" id="textbox3" /> </li> <li> <label> dateFormat='U' (世界時のソート可能な日付／時刻パターン)</label> <input type="text" id="textbox4" /> </li> </ul> <!-- デモマークアップの終了 --> </div> </div> </div>

ソースビュー

コードのコピー

 <div class="page">
        <div id="header">
<div id="title">
                <h2>概要</h2>
<div class="main demo">
<!-- デモマークアップの開始 -->
<ul class="ui-helper-reset">
<li>
           <label>
                dateFormat='T' (長い日付パターン)</label>
<input type="text" id="textbox1" />
</li>
<li>
           <label>
                dateFormat='d' (短い日付パターン)</label>
<input type="text" id="textbox2" />
</li>
<li>
           <label>
                dateFormat='g' (一般的な時刻パターン(短い時刻))
</label>
<input type="text" id="textbox3" />
</li>
<li>
           <label>
                dateFormat='U' (世界時のソート可能な日付／時刻パターン)</label>
<input type="text" id="textbox4" />
</li>
</ul>
<!-- デモマークアップの終了 -->
      </div>
      </div>
      </div>

次のマークアップを <body> の上に追加します。このマークアップは、長い日付書式を表示するため最後のテキストボックスの幅を拡張します。

ソースビュー	コードのコピー
<style type="text/css"> #textbox4 { width: 300px; }