ui.bootstrap.timepicker not binding with angularjs ng-model

Question

I Am Using ui.bootstrap.timepicker for creating and updating data via user Interaction.

The Timepicker is working well for creating data but it's not binding to the ng-model.

Here is a sample JSON array of the data passed to the Timepicker:

{
   "sort":1,
   "name":"Store Timings",
   "_id":"55b78a8658d3060e004fe9f2",
   "delivery":[
      {
         "open":"10:30",
         "close":"20:00",
         "leadTime":"45",
         "interval":"15",
         "message":"Accepting delivery orders",
         "_id":"55b78a8658d3060e004fe9f3",
         "isOpen":true
      }
   ],
   "pickup":[
      {
         "open":"09:30",
         "close":"20:30",
         "leadTime":"30",
         "interval":"15",
         "message":"Accepting takeot orders",
         "_id":"55b78a8658d3060e004fe9f4",
         "isOpen":true
      }
   ],
   "store":[
      {
         "open":"9:30 AM",
         "close":"10:30 PM",
         "message":"We are Open!",
         "_id":"55b78a8658d3060e004fe9f5",
         "isOpen":true
      }
   ],
   "isOnlineOrderOpen":true
}

As per the Above code I tried to render ng-value in to the Timepicker

Here is the HTML code:

<timepicker ng-model="sunday.store[0].open" hour-step="1" minute-step="15" show-meridian="true" ></timepicker>

<timepicker ng-model="sunday.store[0].close" hour-step="1" minute-step="15" show-meridian="true" ></timepicker>

This is showing that the Timepicker as Blank (I was expecting the values):-

MrHaze · Accepted Answer · 2015-07-29 07:15:49Z

3

The Timepicker is expecting you to pass in a Date object, not a string.

From the Timepicker documentation

ng-model: The Date object that provides the time state.

I'm using MomentJS to format my date from a string to a Date object.

See the MomentJS parse documentation

You can transform your times back to a string if required using the same library.

answered Jul 29, 2015 at 7:15

MrHaze

4,1063 gold badges29 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

ui.bootstrap.timepicker not binding with angularjs ng-model

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related