ui.bootstrap.timepicker 未与 angularjs ng-model 绑定

Question

我正在使用 ui.bootstrap.timepicker 通过用户交互创建和更新数据。

Timepicker 可以很好地创建数据，但它没有绑定到 ng-model。

这是传递给 Timepicker 的数据示例 JSON 数组：

{
   "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
}

根据上面的代码，我尝试将 ng-value 渲染到 Timepicker

这里是 HTML 代码：

<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>

这表明 Timepicker 为空白（我期待这些值）：-

Answer 1

Timepicker 期望您传入 Date 对象，而不是字符串。

来自时间选择器documentation

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

我正在使用 MomentJS 将我的日期从字符串格式化为日期对象。

见MomentJS parse documentation

如果需要，您可以使用相同的库将时间转换回字符串。

ui.bootstrap.timepicker 未与 angularjs ng-model 绑定

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

javascript

angularjs

angular-ui-bootstrap