Question

我在项目中使用Bootstrap 4。我试图让Angularjs与moment.js合作，但我没有这样做。

我使用以下HTML代码：

<input type="date" name="somename" ng-model="theDate" max="3000-12-31" min="1000-01-01" class="form-control">

在我创建的mainControler.js中，我有以下内容：

$scope.theDateToBeDisplayed = moment($scope.theDate).format('DD/MM/YYYY');

然后当我尝试使用以下代码显示它时：

<span ng-bind-html="theDateToBeDisplayed"></span>

它始终返回今天的日期，而不是我在日期选择器中选择的日期。

mainControler.js：

app.controller('MainController', function($scope) {

  $scope.theDateToBeDisplayed = moment($scope.theDate).format('DD/MM/YYYY');

});

HTML：

<div ng-app="myApp" ng-controller="MainController">
  <div>
    <input type="date" name="somename" ng-model="theDate" max="3000-12-31" min="1000-01-01" class="form-control">
  </div>
  <div>
    <span ng-bind-html="theDateToBeDisplayed "></span>
  </div>
</div>

我做错了什么？

提前感谢您提出任何建议。

Answer 1

您可以拨打function并在variable中的日期发生变化时更改date-picker

我补充说，

ng-change="changeDate()"在 HTML 中，在日期更改时调用changeDate功能。
该功能会将日期分配到theDateToBeDisplayed并显示在UI

var app = angular.module('miniapp', []).controller('myCtrl', function($scope) {
    	$scope.changeDate = function(){
      	$scope.theDateToBeDisplayed = moment($scope.theDate).format('DD/MM/YYYY');
      }   
});

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

    <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.js"></script>
    <script src="script.js"></script>
  </head>

  <body>
    <div ng-app="miniapp">
    <div ng-controller="myCtrl">
        <div>
            Select a date from Date picker:
            <input type="date" name="somename" ng-model="theDate" max="3000-12-31" min="1000-01-01" class="form-control" ng-change="changeDate()">
            <br>
            <br>
          <span>{{theDateToBeDisplayed}}</span>
        </div>
    </div>    
</div>
  </body>

</html>

Here is a working DEMO

Answer 2

不确定何时初始化作用域上的theDateToBeDisplayed变量，但我的猜测是它只设置一次，基于空$scope.theDate，这会导致时刻恢复到今天的日期。当日期更改时，此值不会自动重新计算。

可能的解决方案（我个人更喜欢2）：

当您更改$scope.theDate时，请确保您有一位观察者再次设置$scope.theDateToBeDisplayed。
创建一个调用moment(value).format(...)的过滤器（例如dateFormat）并使用：
```
<span>{{theDate | dateFormat }}</span>
```

Angularjs和moments.js - angularjs没有显示正确的日期

2 个答案: