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

so the problem is that this format still shows the date aspect, and not just time? — Grizzly, Jun 24 '16 at 13:17
I have tested your code and it does work for me, so what *exactly* is your issue? — Grizzly, Jun 24 '16 at 13:26
Can you elaborate as to exactly which `datetimepicker` add-on you're using. — freedomn-m, Jun 24 '16 at 13:39
@freedomn-m - **bootstrap-datepicker.js, bootstrap-datetimepicker.css** these are the js and css i've used in my application. — KimJean, Jun 25 '16 at 02:48
@BviLLe_Kid - I've use datatype TimeSpan in my model, In my view. I want to display a timepicker. I will edit my question, just to show you what I want to do. — KimJean, Jun 25 '16 at 02:51
@freedomn-m - I used **bootstrap v3.3.6 and bootstrap.v3.Datetimepicker v 4.15.35.1** — KimJean, Jun 25 '16 at 03:06
@KimJean a TimeSpan is a difference in time (eg 1hour) not a time of day. Have a look at the output HTML to see `input type='x'` where x should be 'text' (from the bootstrap help page and your should-be example). Try changing the type to different things (start with just string). — freedomn-m, Jun 25 '16 at 10:52

score 2 · Answer 1 · edited May 23 '17 at 11:44

2

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/

edited May 23 '17 at 11:44

Community

1
1

answered Jun 24 '16 at 12:42

Smit Patel

2,992
1
26
44

Or OP could use any of 1000 other *better* time pickers... but the question does not mention wanting to add the excessive overhead that the incompatible bootstrap adds to jquery-ui in *mvc 4*. – freedomn-m Jun 24 '16 at 13:38
OP is mention the Bootstrap-timepicker in the Tag was removed by me for the more better answers – Smit Patel Jun 24 '16 at 13:40
Strange - why did you remove the tag? Either way, it should be in the question text, not rely on tags. – freedomn-m Jun 24 '16 at 13:42
`Bootstrap-timepicker` is not well-known tag to be appear in the list, as i think so, was i wrong somewhere? – Smit Patel Jun 24 '16 at 13:45
Given the plethora of other tags in the pre-edit, it was most likely chosen because it had 'timepicker' rather than be relevant to the question. Your edit was approved, so others agreed with the edit (as I would have FYI), so nothing wrong - need to wait for OP to answer my question as to exactly which datetimepicker they are using. – freedomn-m Jun 24 '16 at 14:16

How to set Time-picker in MVC 4

1 Answers1