AngularJS与Moment.js集成问题：日期显示不正确

我来帮你梳理下问题所在，以及对应的解决办法：

核心问题分析 #

你的代码里有几个容易踩的坑：

1. <input type="date">的ng-model绑定的是原生Date对象，如果$scope.theDate初始值不是合法的Date类型，或者未初始化，Moment处理时可能会直接报错
2. 你直接赋值$scope.theDateToBeDisplayed，但没有监听theDate的变化——当用户修改输入框的日期时，这个格式化后的变量不会自动更新
3. 使用ng-bind-html完全没必要，因为格式化后的日期是纯文本，用普通的插值{{}}或者ng-bind就足够了

具体解决方案 #

1. 控制器代码优化

在mainControler.js里，我们需要初始化日期、处理空值，并且监听日期变化自动更新格式化结果：

angular.module('yourAppName').controller('mainController', function($scope) {
  // 初始化日期为当前日期（也可以设为你需要的默认值）
  $scope.theDate = new Date();

  // 封装格式化函数，处理空值避免报错
  $scope.formatDate = function(date) {
    if (!date) return '';
    return moment(date).format('DD/MM/YYYY');
  };

  // 或者用$watch监听日期变化，实时更新格式化后的值
  $scope.$watch('theDate', function(newDate) {
    if (newDate) {
      $scope.theDateToBeDisplayed = moment(newDate).format('DD/MM/YYYY');
    } else {
      $scope.theDateToBeDisplayed = '';
    }
  });
});

2. HTML显示优化

如果用格式化函数，HTML可以这样写：

<input type="date" name="somename" ng-model="theDate" max="3000-12-31" min="1000-01-01" class="form-control">
<!-- 直接用插值表达式 -->
<span>{{ formatDate(theDate) }}</span>

如果用$watch的方式，就用你原来的结构但替换ng-bind-html：

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

3. 额外注意事项

• 确保已经正确引入Moment.js脚本，放在AngularJS脚本之前加载
• 如果遇到时区问题，可以在格式化时指定时区（需要引入moment-timezone.js），比如moment(date).tz('Asia/Shanghai').format('DD/MM/YYYY')
• 测试时可以先在控制器里打印$scope.theDate，确认它是一个合法的Date对象，再验证Moment的格式化结果

这样调整后，AngularJS和Moment.js就能正常协同工作了！

内容的提问来源于stack exchange，提问作者Serge Inácio