ui.bootstrap.datepickerPopup日期格式错误问题求助

我之前也踩过AngularJS UI Datepicker日期格式的坑，结合你说的情况——示例Plunker正常但自己项目出问题，咱们从这几个方向排查试试：

1. 日期格式配置不统一 #

AngularUI Datepicker Popup的格式是靠datepicker-popup属性指定的，也可以全局配置。这是最容易踩的坑：

• 先检查你的输入框指令有没有正确设置格式，比如示例里用的yyyy-MM-dd，你是不是漏写了这个属性，或者用了不兼容的格式？比如：

  <input type="text" uib-datepicker-popup="yyyy-MM-dd" ng-model="selectedDate" is-open="opened" />
  

• 如果想全局统一格式，要在模块注入ui.bootstrap后，通过$datepickerPopupProvider配置：

  angular.module('yourApp', ['ui.bootstrap'])
    .config(function($datepickerPopupProvider) {
      $datepickerPopupProvider.setOptions({
        datepickerPopup: 'yyyy-MM-dd'
      });
    });
  

2. AngularJS版本差异（1.6.1 vs 1.6.6） #

你示例用的是1.6.1，项目里是1.6.6，小版本升级可能带来locale或日期处理的细微变化：

• 检查是否引入了对应版本的angular-locale文件（如果需要特定地区格式的话），比如中文环境的angular-locale_zh-cn.js，要确保版本和AngularJS 1.6.6匹配。
• 可以打印一下默认的locale日期格式，看看是不是和预期一致：

  angular.module('yourApp').run(function($locale) {
    console.log($locale.DATETIME_FORMATS.shortDate); // 查看默认日期格式
  });
  

3. 依赖库版本不兼容 #

AngularUI Bootstrap的版本必须和AngularJS版本匹配，AngularJS 1.6.x对应的UI Bootstrap应该是2.x系列（比如2.5.0），版本不匹配很容易出格式解析问题：

• 确认你的UI Bootstrap脚本是对应版本的，比如：

  <script src="path/to/ui-bootstrap-tpls-2.5.0.min.js"></script>
  

4. 模型值类型错误 #

Datepicker要求ng-model绑定的是Date对象，如果绑定的是字符串，肯定会出格式问题：

• 检查你的selectedDate初始值是不是Date对象：

  $scope.selectedDate = new Date(); // 正确姿势
  // $scope.selectedDate = "2024-05-20"; // 错误，字符串会导致解析异常
  

• 如果是从后端获取的字符串日期，要先转换成Date对象：

  $scope.selectedDate = new Date(backendDateString);
  

5. 自定义代码干扰 #

如果项目里有自定义的日期过滤器、指令，可能会和Datepicker的解析逻辑冲突：

• 可以暂时移除这些自定义代码，测试Datepicker是否恢复正常，逐步排查冲突点。

内容的提问来源于stack exchange，提问作者Miguel-Ángel