使用 angular-ui timepicker 作为输入表单

Question

我正在根据示例 here 使用 angular-ui 时间选择器。这是我的 HTML:

<timepicker data-ng-model="hour" data-ng-change="changed()" data-hour-step="1" data-minute-step="5" data-show-meridian="ismeridian"></timepicker>

在 js 文件中，我试图通过

获取值

var start_hour = {
            hour:new Date($scope.hour).getHours(),
            min:new Date($scope.hour).getMinutes()
        };

但是只有我在JS中设置了一个新的日期才有效，而我无法在页面中输入时间。我想要的是使用时间选择器作为输入，以允许基于日期和时间的过滤器。我为此在谷歌上搜索了很多，但我找不到任何东西

仅供参考，这是我完整的 HTML 和日期选择器，我在其中获取日期（这工作正常）：

<div class="col-md-2">
        <label for="InitialDate">Date:</label>
        <div id="InitialDate" class="input-group">
            <input type="text" name="Initial" data-datepicker-popup="yyyy/MM/dd" data-ng-model="date"
                   data-is-open="datepickers.date" data-datepicker-options="dateOptions" data-date-disabled="disabled(date, mode)" data-ng-required="true"/>
            <span class="input-group-btn">
                <button type="button" class="btn btn-default" data-ng-click="open($event)"><i class="fa fa-calendar"></i></button>
            </span>
        </div>
        <timepicker data-ng-model="hour" data-ng-change="changed()" data-hour-step="1" data-minute-step="5" data-show-meridian="ismeridian"></timepicker>
    </div>

Answer 1

您可以使用$scope.$watch：scope documentation

$scope.$watch('hour', function(newValue) {
   $scope.start_hour = {
        hour:new Date(newValue).getHours(),
        min:new Date(newValue).getMinutes()
    };  
});

每当小时值发生变化时，angular 将调用该函数并更新您的 start_hour 变量。

Answer 2

本例中的错误是由changed()函数中的错误引起的。

在控制器中使用此功能，一切正常：

$scope.changed = function () {
      $scope.start_hour = {
        hour: $scope.hour.getHours(),
        min: $scope.hour.getMinutes()
        };  
    };

使用 angular-ui timepicker 作为输入表单

Use angular-ui timepicker as input form

angularjs

input

angular-ui-bootstrap

timepicker