这个Timepicker指令在Firefox中寻找什么?

时间:2015-01-28 14:03:38

标签: angularjs google-chrome firefox angularjs-directive timepicker

我试图在angular.js webapp中使用timepicker指令。它在Chrome中没有任何问题,但在Firefox中我收到以下错误:

"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."

这个指令在Firefox中寻找什么,它不在Chrome中?

编辑: 在我的html中执行以下操作后仍然会出现相同的错误:

<timepicker ng-model="mytime" ng-change="changed()" hour-step="hstep" minute-step="mstep" show-meridian="ismeridian"></timepicker>
<pre class="alert alert-info">Time is: {{mytime | date:'shortTime' }}</pre>

这在我的控制器中:

$scope.mytime = new Date();

$scope.hstep = 1;
$scope.mstep = 15;

$scope.ismeridian = true;
$scope.toggleMode = function() {
    $scope.ismeridian = ! $scope.ismeridian;
};

$scope.update = function() {
    var d = new Date();
    d.setHours( 14 );
    d.setMinutes( 0 );
    $scope.mytime = d;
};

$scope.changed = function () {
    $log.log('Time changed to: ' + $scope.mytime);
};

但我仍然遇到同样的错误。我也在Firefox 35中。 Chrome使用此代码可以完美运行。

1 个答案:

答案 0 :(得分:1)

您可以指定您正在使用的timepicker指令,以及一些显示您如何使用它的代码吗?如果这是angular-ui中的那个,你是否将ng-model设置为一个新的Date()对象?

我已经在Chrome(最新),Firefox 35.0.1和IE 10.0中对此进行了测试,并且它在所有这些方面都为我工作。

http://plnkr.co/edit/O4UUzfHLlyRkEL9SFX8m?p=preview

HTML:

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <link data-require="bootstrap-css@3.1.*" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.0.x" src="https://code.angularjs.org/1.2.28/angular.js" data-semver="1.2.28"></script>
    <script data-require="ui-bootstrap@*" data-semver="0.12.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.min.js"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <timepicker ng-model="mytime" ng-change="changed()" hour-step="hstep" minute-step="mstep" show-meridian="ismeridian"></timepicker>
    <pre class="alert alert-info">Time is: {{mytime | date:'shortTime' }}</pre>
  </body>

</html>

的javascript:

var app = angular.module('plunker', ['ui.bootstrap']);

app.controller('MainCtrl', function($scope, $log) {
  $scope.mytime = new Date();

  $scope.hstep = 1;
  $scope.mstep = 15;

  $scope.ismeridian = true;
  $scope.toggleMode = function() {
      $scope.ismeridian = ! $scope.ismeridian;
  };

  $scope.update = function() {
      var d = new Date();
      d.setHours( 14 );
      d.setMinutes( 0 );
      $scope.mytime = d;
  };

  $scope.changed = function () {
      $log.log('Time changed to: ' + $scope.mytime);
  };

});