wijinputdate Step 1 of 3: Setting up the View

In this step you'll add four input boxes demonstrating different date and time formats. Complete the following:

In the Solution Explorer, expand the Views | Shared folder and double-click _Layout.cshtml to open the file.

Add the following markup within the <body> tags of the page. This markup will add four different input textboxes and labels to the page. Each input textbox will show a different date pattern.

    <div class="page">
        <div id="header">
            <div id="title">
                <h2>Overview</h2>
<div class="main demo">
<!-- Begin demo markup -->
<ul class="ui-helper-reset">
      <li>
            <label>
                  dateFormat='T' (Long date pattern)</label>
            <input type="text" id="textbox1" />
      </li>
      <li>
            <label>
                  dateFormat='d' (Short date pattern)</label>
            <input type="text" id="textbox2" />
      </li>
      <li>
            <label>
                  dateFormat='g' (General Date & Short Time)
            </label>
            <input type="text" id="textbox3" />
      </li>
      <li>
            <label>
                  dateFormat='U' (Universal Date & Long Time)</label>
            <input type="text" id="textbox4" />
      </li>
</ul>
<!-- End demo markup -->
</div>
</div>
</div>

Add the following markup above the <body>. This markup will expand the width of the last textbox since it will display the long date format.
```
<style type="text/css">
           
            #textbox4
            {
                  width: 300px;
            }
      </style>
```