Using Bootstrap.TimerPicker with MVC not picking the right time

Question

I tried to use this component but it is not showing the right time, when I remove the javascript "timepicker" it shows a normal input with the right datetime, but after using the component it shows wrong times. Why?

It seems to be picking up the date part 20/05. Should I use another format? Such as TimeSpan instead of DateTime?

MVC View

@Html.TextBoxFor(m => m.StartTime, new {@class = "form-control timepicker"})

Javacript

 $('.timepicker').timepicker({autoclose: true,minuteStep: 15,showSeconds: false,showMeridian: false});

Screen

View

As you can see below the times are different, those values are the Model of the View.

http://jdewit.github.io/bootstrap-timepicker/

Answer 1

I found a solution:

The Jquery Plugin Bootstrap.Timepicker must be used using the data type TimeSpan.

After changing the datatype from DateTime to TimeSpan it worked perfectly.

public TimeSpan StartTime { get; set; }
public TimeSpan? EndTime { get; set; }

Note: When you use a DateTime format it takes the first part of the date, in my example 20/05 was converted to 20:05.