angularjs - 带有unix时间戳的ui引导日期选择器

Question

我正在尝试使用绑定(bind)到 unix 时间戳数据的 ui-bootstrap datepicker。

为此，我想使用 this directive它将 unix 时间戳从 ng-model 转换为 javascript 日期。

here is the code (plunker)

<div ng-model="date" date-format>
    <datepicker min="minDate" show-weeks="false"></datepicker>
</div>

和指令

  .directive('dateFormat', function() {
        return {
              require: 'ngModel',
              link: function(scope, element, attr, ngModelCtrl) {
                    ngModelCtrl.$formatters.unshift(function(timestamp) {
                          if (timestamp) return new Date( timestamp * 1000 );
                          else return "";
                    });
                    ngModelCtrl.$parsers.push(function(date) {
                          if (date instanceof Date) return Math.floor( date.getTime() / 1000 ); 
                          else return "";
                    });
              }
        };
  })

可以选择日期。 unix 时间戳是正确的，但随后日历切换到 1970 年……

有没有解决方案来完成这项工作并使用 ui bootstrap 的 datepicker 和 unix 时间戳数据？

Answer 1

有点晚了，但我也遇到了这个问题——我不想只为 datepicker/timepicker 在我的模型中保留额外的值(value)。关注 this great tutorial on ngModelController克里斯托弗·纳多

这适用于 AngularJS 1.2.16:

.directive('timestampFormat', function() {
    // Directive that converts timestamp back and forth from
    // seconds to Date object
    return {
        scope: true, // isolated scope
        require: 'ngModel',
        link: function(scope, element, attr, ngModelCtrl) {

            ngModelCtrl.$formatters.push(function (modelValue) {
                // returns $viewValue
                return {
                    timestamp: (modelValue ? new Date(modelValue*1000) : "")
                };
            });

            scope.$watch('timestamp', function () {
                ngModelCtrl.$setViewValue({ timestamp: scope.timestamp });
            });

            ngModelCtrl.$parsers.push(function (viewValue) {
                // returns $modelValue
                if (viewValue.timestamp instanceof Date) return Math.floor( viewValue.timestamp.getTime() / 1000 );
                else return "";
            });

            ngModelCtrl.$render = function () {
                // renders timestamp to the view.
                if (!ngModelCtrl.$viewValue) ngModelCtrl.$viewValue = { timestamp: ""};
                scope.timestamp = ngModelCtrl.$viewValue.timestamp;
            };
        }
    };
});

现在在 View 中，您可以作为 timestamp 访问它多变的。

<div ng-model="yourModelValue" timestamp-format> 
  {{timestamp}}
  <timepicker ng-model="timestamp" ...>