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

Question

my server side json uses "HH:mm:ss" to store time data. i'm using UI-Bootsrap TimePicker to let the user input the time.

I'm using the ngModelController's $parsers and $formatters to map from server side json to frontend timepickerUI. The conversion from UI to Data is working as expected, however i'm having difficulties converting the Data back to UI.

The error message is as follows: 'Timepicker directive: "ng-model" value must be a Date object, a number of milliseconds since 01.01.1970 or a string representing an RFC2822 or ISO 8601 date.'

this is the HTML markup

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

this is the directive

.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

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

Quick help:-

Your hours :minutes are String so it raise such an error i just figured how to get rid of it . Simple Go ahead and Install Moment js and format like the Following $scope.timing= moment('09:30 AM','hh:mm A').format();

Little Prolonged Explanation :- From the Timepicker documentation You may Need to Use Timepicker (ui.bootstrap.timepicker) from Angular UI.

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.