Question

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

我正在使用ngModelController的$ parsers和$ formatters从服务器端json映射到前端timepickerUI。从UI到Data的转换正如预期的那样工作，但是我很难将数据转换回UI。

错误消息如下： 'Timepicker指令：“ng-model”值必须是Date对象，自1970年1月1日起的毫秒数或表示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);
            }

        }
    }])

Answer 1

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

快速帮助： -

你的小时：分钟是字符串所以它只是引发了这样的错误   想办法摆脱它。简单来吧并安装Moment js   和格式如下$ scope.timing =时刻（＆＃39; 09：30 AM＆＃39;，＆＃39; hh：mm   甲＆＃39;）格式（）;

小长久的解释： - 来自Timepicker documentation 您可能需要使用Angular UI中的Timepicker（ui.bootstrap.timepicker）。

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

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

请参阅MomentJS parse documentation

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

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

1 个答案: