javascript - Moment js 时间选择器

Question

我们正在尝试使用 momentjs，因为它的时区功能非常棒。我们还使用 bootstrap ui 的时间选择器，它期望日期时间作为 ng-model。现在，尝试将时刻转换为日期时间会丢失时区并切换回本地时区。我正在考虑构建我们自己的自定义时间选择器，但首先我想检查一下之前是否有人遇到过这个问题。提前致谢!

(function () {
'use strict';
moment.tz.setDefault("America/Phoenix");
angular.module('timepickerPop', ['ui.bootstrap'])
.factory('timepickerState', function () {
    var pickers = [];
    return {
        addPicker: function (picker) {
            pickers.push(picker);
        },
        closeAll: function () {
            for (var i = 0; i < pickers.length; i++) {
                pickers[i].close();
            }
        }
    };
})
.filter('momentFilter', function () {
    return function (input) {
        if (input == undefined) return "";
        return input.format("hh:mm A");
    };
})
.directive("timeFormat", ['$filter', function ($filter) {
    return {
        restrict: 'A',
        require: 'ngModel',
        scope: {
            showMeridian: '=',
        },
        link: function (scope, element, attrs, ngModel) {

            var parseTime = function (viewValue) {

                //Not a concern at the moment
            };

            ngModel.$parsers.push(parseTime);

            var showTime = function (data) {
                parseTime(data);
                return $filter('momentFilter')(data);
            };

            ngModel.$formatters.push(showTime);

            scope.$watch('showMeridian', function (value) {
                var myTime = ngModel.$modelValue;
                if (myTime) {
                    element.val(showTime(myTime));
                }

            });
        }
    };
}])

.directive('timepickerPop', ['$document', 'timepickerState', function ($document, timepickerState) {
    return {
        restrict: 'E',
        transclude: false,
        scope: {
            inputTime: "=",
            showMeridian: "=",
            disabled: "="
        },
        controller: ['$scope', '$element', function ($scope, $element) {
            $scope.isOpen = false;

            $scope.disabledInt = angular.isUndefined($scope.disabled) ? false : $scope.disabled;

            $scope.toggle = function () {
                if ($scope.isOpen) {
                    $scope.close();
                } else {
                    $scope.open();
                }
            };
        }],
        link: function (scope, element, attrs) {
            var picker = {
                open: function () {
                    timepickerState.closeAll();
                    scope.isOpen = true;
                },
                close: function () {
                    scope.isOpen = false;
                }

            }
            timepickerState.addPicker(picker);

            scope.open = picker.open;
            scope.close = picker.close;

            scope.$watch("disabled", function (value) {
                scope.disabledInt = angular.isUndefined(scope.disabled) ? false : scope.disabled;
            });

            scope.$watch("inputTime", function (value) {
                if (!scope.inputTime) {
                    element.addClass('has-error');
                } else {
                    element.removeClass('has-error');
                }

            });

            element.bind('click', function (event) {
                event.preventDefault();
                event.stopPropagation();
            });

            $document.bind('click', function (event) {
                scope.$apply(function () {
                    scope.isOpen = false;
                });
            });
        },
        template: "<input type='text' class='form-control' ng-model='inputTime' ng-disabled='disabledInt' time-format show-meridian='showMeridian' ng-focus='open()' />"
            + "  <div class='input-group-btn' ng-class='{open:isOpen}'> "
            + "    <button type='button' ng-disabled='disabledInt' class='btn btn-default ' ng-class=\"{'btn-primary':isOpen}\" data-toggle='dropdown' ng-click='toggle()'> "
            + "        <i class='glyphicon glyphicon-time'></i></button> "
            + "          <div class='dropdown-menu pull-right'> "
            + "            <timepicker ng-model='inputTime' show-meridian='showMeridian'></timepicker> "
            + "           </div> " + "  </div>"
    };
}]);

}());

Answer 1

我过去所做的(受 bootstrap ui 日期选择器的启发)是在具有解析器/格式化程序组合的同一元素上使用另一个指令。

它的作用是基本上将 Bootstrap timpicker 的日期从 moment 对象转换为 Date 对象，然后从 Date 返回到实际模型的 moment。

这是日期选择器的实现:

.directive('uiDateMoment', [function () {
    var directive = {
        require: 'ngModel',
        link: function (scope, element, attrs, modelCtrl) {
            modelCtrl.$formatters.length = 0;
            modelCtrl.$formatters.push(function (value) {
                if (moment.isMoment(value)) {
                    var zoneDiffInMinutes = value.zone();
                    var date = value.toDate();
                    var tzDate = new Date(date.getTime() + (date.getTimezoneOffset() * 60000) - (zoneDiffInMinutes * 60000));
                    return tzDate;
                }
                return null;
            });
            modelCtrl.$parsers.push(function (value) {
                if (value) {
                    var isoDate = moment(value).format('YYYY-MM-DD');
                    return moment(isoDate + ' ' + (timeZoneOffset)).zone(timeZoneOffset);
                }
                return null;
            });
        }
    };
    return directive;
}]);

在我的例子中，timeZoneOffset 是一个全局变量——这并不理想，但您可以将其移动到服务或其他东西。

它的用法如下:

<input type="text" ng-model="TargetDate" ui-date="UIDateSettings" ui-date-moment="mm/dd/yy" />

您当然也可以将其适应时间选择器。