How to set Time-picker in MVC 4

Question

I need to create a view that includes a field with time only. Can anyone help me on how to create Timepicker in MVC 4 razor.

This is my code:

Model

public TimeSpan TIME_OUT { get; set; }

View

<div class="form-group">
     @Html.LabelFor(model => model.TIME_OUT, "End Time", htmlAttributes: new { @class = "col-xs-4 col-sm-offset-1 col-sm-4" })
     <div class='input-group date col-xs-8 col-sm-6' id='timeout'>
          @Html.TextBoxFor(model => model.TIME_OUT, new { @class = "form-control" })
          <span class="input-group-addon">
              <span class="glyphicon glyphicon-time">
              </span>
          </span>
     </div>
</div>

JavaScript:

$(function () {
    $('#timeout').datetimepicker({
        format: 'LT'
    });
 });

This is the result of my code:

But when I click the time icon, it doesn't show the result I want

This is what I want to do in my timepicker

Answer 1

You can use bootstrap time picker, and set it by this Jquery

$("#YourId").timepicker("setTime", '');

Refer this Bootstrap Timpicker examples,

https://eonasdan.github.io/bootstrap-datetimepicker/

responsive-bootstrap-3-timepicker

http://tarruda.github.io/bootstrap-datetimepicker/