Javascript 当值最初在范围中设置时，Datepicker弹出格式不起作用

我在Plunker（）上使用此自定义指令使用Angular UI引导日期选择器弹出窗口：

//模块
var userModule=angular.module（“userModule”，['ui.bootstrap']）；
//控制器
controller（“sampleController”，['$scope'，function$scope）{
$scope.minDate=新日期（）；
}]);
//指令码
userModule.directive（'datePicker'，[function（dateFilter））{
返回{
限制：'E'，
要求：'ngModel'，
范围：{
ngModel:“=”，
ngReadonly:“=？”，
minDate:“=？”，
maxDate:“=？”，
所需数据：“=？”，
日期选项：'=？'
},
模板：'
'+
'' +
'' +
'' +
'' +
'' +
“
”，
控制器：功能（$scope）{
//检查是否已定义。如果未定义-设置默认值
$scope.dateOptions=$scope.dateOptions ||{
年份：“yy”，
开始日期：1，
展示周：假
};
$scope.openPopup=函数（$event）{
如果（$event！==未定义）{
$event.stopPropagation（）；
}
$scope.opened=true；
};
$scope.format='dd-MMMM-yyyy'；
},
链接：函数（$scope、element、attrs、controller）{
//从输入指令中删除默认格式设置程序以防止冲突
控制器.$formatters.shift（）；
}
};
}]);

从日历弹出窗口中选择日期时，该操作正常，且日期格式正确。但是，如果我在控制器中设置ng模型的日期，则该日期的格式不是“dd-MMMM-yyyy”，而是以日期字符串的形式返回，如Sat Oct 01 2016 01:00:00 GMT+0100（GMT夏令时）。但是在Plunker中，我可以在控制器中设置日期，并且格式很好。 以下是我的日期选择器HTML：

<date-picker ng-model="startDate.value" datepicker-options="dateOptions" min-date="minDate" ng-readonly="true"></date-picker>

在我的控制器中

startDate.value=newdate（）

我不确定问题出在哪里。下图显示了我得到的信息

我在本地尝试了您的代码，它似乎工作得很好，没有任何问题。
我尝试了各种方法来更改日期，但一切都正常。
plnkr中的示例与您发布的示例之间似乎有点不同，特别是您引用日期的方式（您声明使用的是startDate.value=new date（）；，但在plnkr中我看到了ng model=“dtpValue1”。这让我觉得您还缺少其他东西，我建议在一个可在本地测试的.zip文件中制作一个完整的示例。此外，由于有可能没有人能够再次复制它，因此列出您拥有的所有chrome扩展名和操作系统将非常有用，最重要的是，您可以我们应该试着在其他机器上复制并报告结果

一般来说，我所测试的每台机器都能按预期工作，我看不出它不能工作的原因

如果我能够重现这个问题，我可以设置断点并准确地找出发生了什么，但目前这是不可能的，我们应该关注如何重现这个问题

提供的信息似乎不足以解决此问题。
这是因为引导UI datepicker实际上与字符串一起工作，并且您试图将javascript日期对象分配给UI引导在angular controller上工作的变量。它们是不同类型的数据，因此会导致错误。如果您尝试控制类型o对于变量，在从datepicker弹出窗口中选择日期之后。您将看到它是一个字符串。因此..如果您想从控制器中设置日期，只需将其设置为字符串，而不是javascript对象。
最终找到了解决方案。我从Angular UI Bootstrap中更改为uib datepicker指令，现在它可以正确格式化日期在控制器中设置日期后！以下是我的指令中的HTML模板供参考：

template: '<p class="input-group">' +
            '<input type="text" style="cursor:pointer" class="form-control" uib-datepicker-popup="{{format}}"' +
                'ng-model="ngModel" is-open="opened"' +
                    'min-date="minDate" max-date="maxDate"' +
                        'datepicker-options="dateOptions"date-disabled="disabled(date, mode)"' +
                         'ng-required="dtpRequired" close-text="Close" ng-readonly="ngReadonly" ng-click="openPopup()" />' +
                 '<span class="input-group-btn">' +
                    '<button type="button" class="btn btn-default" ng-click="openPopup($event)">' +
                        '<i class="fa fa-calendar"></i></button>' +
                '</span>' +
            '</p>'

模板：'
'+
'' +
'' +
'' +
'' +
'' +
“
”
我编写此指令是为了将
string
表单服务器转换为uib datepicker popup所需的有效javascript格式：

app.directive('datepickerLocaleDate', ["$rootScope", "$filter", function ($rootScope, $filter) {
   return {
      restrict: 'A',
      require: 'ngModel',
      link: function (scope, element, attrs, ngModel) {

         if (ngModel) {

           // convert string to valid javascript fprmat 
            setTimeout(() => {
               ngModel.$setViewValue(new Date(ngModel['$viewValue']));
            }, 3000);


            ngModel.$parsers.push(function (value) {
              return new Date(value);
            });

            ngModel.$formatters.push(function (value) {
              return value ? $filter('date')(value, 'yyyy/MM/dd') : null;
            });

         }
      }
   };
}]);

如您所说，无法在Plunker中复制此内容-在
sampleController
中，设置
$scope.dtpValue1=new Date（）；
并且格式正确（“2016年8月1日”）.您是否在本地尝试了完全相同的代码并出现此问题？是的，在我的项目中使用相同的代码会给我带来这个问题，这非常奇怪。您是否使用相同版本的库和浏览器？是的，相同的引导版本和角度版本并使用Chrome我在本地尝试过（不是在Plunker上）并且仍然得到正确的格式。你使用的是哪一版本的Chrome？是的，但是bootstrap UI datepicker不应该处理JS日期对象的格式吗？相信我，这是一个非常头痛的问题。我尝试了很多方法，但都做不到。它无法处理日期对象。
app.directive('datepickerLocaleDate', ["$rootScope", "$filter", function ($rootScope, $filter) {
   return {
      restrict: 'A',
      require: 'ngModel',
      link: function (scope, element, attrs, ngModel) {

         if (ngModel) {

           // convert string to valid javascript fprmat 
            setTimeout(() => {
               ngModel.$setViewValue(new Date(ngModel['$viewValue']));
            }, 3000);


            ngModel.$parsers.push(function (value) {
              return new Date(value);
            });

            ngModel.$formatters.push(function (value) {
              return value ? $filter('date')(value, 'yyyy/MM/dd') : null;
            });

         }
      }
   };
}]);