ui-bootstrap timepicker 和 ng-model 值转换器答案

【问题标题】：ui-bootstrap timepicker and ng-model value converterui-bootstrap timepicker 和 ng-model 值转换器
【发布时间】：2014-12-23 09:14:33
【问题描述】：

我的服务器端 json 使用“HH:mm:ss”来存储时间数据。我正在使用 UI-Bootsrap TimePicker 让用户输入时间。

我正在使用 ngModelController 的 $parsers 和 $formatters 从服务器端 json 映射到前端 timepickerUI。从 UI 到 Data 的转换按预期工作，但是我在将 Data 转换回 UI 时遇到了困难。

错误信息如下： 'Timepicker 指令：“ng-model”值必须是 Date 对象、自 01.01.1970 以来的毫秒数或表示 RFC2822 或 ISO 8601 日期的字符串。'

这是 HTML 标记

<timepicker ng-model="HotelProperties.CheckOutTime" time-span-converter hour-step="hstep" minute-step="mstep" show-meridian="false"></timepicker>

这是指令

.directive("timeSpanConverter", ['$filter',function($filter) {
        return {
            restrict: 'A',
            require: 'ngModel',
            link: function(scope, element, attr, ngModelCtrl) {
                function fromJson(value) {

                    if (!value) return new Date();

                    var parts = value.split(':');
                    var hh = Number(parts[0]);
                    var mm = Number(parts[1]);

                    var date = new Date();
                    date.setHours(hh);
                    date.setMinutes(mm);

                    return date;
                }

                function fromUser(value) {
                    var time = $filter('date')(value, "HH:mm:00");
                    return time;
                }

                ngModelCtrl.$parsers.push(fromUser);
                ngModelCtrl.$formatters.push(fromJson);
            }

        }
    }])

【问题讨论】：

你的小时：分钟是字符串，所以它会引发这样的错误，我只是想出了如何摆脱它。简单地继续安装 Moment js 并格式化如下 $scope.timing= moment('09:30 AM','hh:mm A').format();它解决了您的问题

标签： javascript json angularjs angular-ui-bootstrap

【解决方案1】：

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

快速帮助：-

你的小时：分钟是字符串，所以它会引发这样的错误，我只是想出了如何摆脱它。简单的继续安装 Moment js 格式如下 $scope.timing= moment('09:30 AM','hh:mm A').format();

小长解释：- 来自时间选择器documentation 您可能需要在 Angular UI 中使用 Timepicker (ui.bootstrap.timepicker)。

ng-model：提供时间状态的 Date 对象。

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

见MomentJS parse documentation

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

【讨论】：