angular-ui-bootstrapbootstrap-datetimepickerangular-strap

bootstrap-timepicker not displaying model values on load


I have the following element:

<div class="input-group bootstrap-timepicker">
    <input type="text"
           class="form-control timepicker"
           name="start-time"
           ng-model="timeSegment[0]"/>
    <span data-toggle="timepicker" class="input-group-addon add-on btn btn-default">
       <i class="icon icon-time"></i>
    </span>
</div>

It is contained in an ng-repeat that repeats this element multiple times. The above code snippet works perfectly, and correctly displays the correct model values when it is loaded, but uses a text box to enter time instead of timepickers. My model value 'timeSegment[0]' is a string in the format 'hh:mm a', for example '04:00 AM'.

However, as soon as I added the bs-timepicker attribute to the above elements (to allow time to be entered using timepickers instead of textbox):

<div class="input-group bootstrap-timepicker">
        <input type="text"
               class="form-control timepicker"
               name="start-time"
               ng-model="timeSegment[0]"
               bs-timepicker/>
        <span data-toggle="timepicker" class="input-group-addon add-on btn btn-default">
           <i class="icon icon-time"></i>
        </span>
    </div>

they showed a default time instead of the values from my model. It was picking up my model correctly, since it correctly iterated the right number of elements and showed the timepicker for them, just not the right value in the timepicker.

Whats also strange is that although the timepickers show a default time, as soon as I change one of them, the value is correctly updated in my model.

I thought it may be because time is my model is a string, and not a date, but even adding attributes described here http://mgcrea.github.io/angular-strap/#/timepickers, such as the following, made no difference. I also tried making my model a Date object, but again, no difference.

data-modelTimeFormat="hh:mm A"
data-timeType="string"

Solution

  • I ended up using a different timepicker, which works as expected:

    https://angular-ui.github.io/bootstrap/