title: How to set Time-picker in MVC 4
body: <p>I need to create a view that includes a field with time only. Can anyone help me on how to create <code>Timepicker</code> in MVC 4 razor. </p>
  
  <p>This is my code:</p>
  
  <p><strong>Model</strong></p>
  
  <pre><code>public TimeSpan TIME_OUT { get; set; }
  </code></pre>
  
  <p><strong>View</strong></p>
  
  <pre><code>&lt;div class="form-group"&gt;
       @Html.LabelFor(model =&gt; model.TIME_OUT, "End Time", htmlAttributes: new { @class = "col-xs-4 col-sm-offset-1 col-sm-4" })
       &lt;div class='input-group date col-xs-8 col-sm-6' id='timeout'&gt;
            @Html.TextBoxFor(model =&gt; model.TIME_OUT, new { @class = "form-control" })
            &lt;span class="input-group-addon"&gt;
                &lt;span class="glyphicon glyphicon-time"&gt;
                &lt;/span&gt;
            &lt;/span&gt;
       &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>JavaScript:</strong></p>
  
  <pre><code>$(function () {
      $('#timeout').datetimepicker({
          format: 'LT'
      });
   });
  </code></pre>
  
  <p>This is the result of my code:</p>
  
  <p><a href="https://i.stack.imgur.com/f9efN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/f9efN.png" alt="Timepicker"></a></p>
  
  <p>But when I click the time icon, it doesn't show the result I want</p>
  
  <p>This is what I want to do in my timepicker</p>
  
  <p><a href="https://i.stack.imgur.com/7Gmo0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7Gmo0.png" alt="bootstrap timepicker"></a></p>