DateTimePicker打开日历即清空日期问题求助（附Angular指令代码）

嘿，我一眼就揪出问题所在啦！你看你在openCalendar函数里的操作——直接把$scope.obj整个替换成了新对象{ isOpen: true }，这会把原来对象里存储日期的date属性直接覆盖掉，难怪打开日历的时候已选日期就凭空消失了！

修复步骤： #

1. 修改指令控制器里的openCalendar函数
   别直接替换整个obj对象，只修改它的isOpen属性就行：

   'use strict';
   app.directive('defaultDate', function () {
     return {
       restrict: 'E',
       templateUrl: 'app/directives/default-date.html',
       scope: {
         onChange: '&',
         obj: '='
       },
       controller: function ($scope) {
         $scope.alterou = function () {
           $scope.onChange()
         }
         $scope.openCalendar = function (e) {
           e.preventDefault()
           e.stopPropagation()
           // 只修改isOpen属性，不替换整个对象
           $scope.obj.isOpen = true;
         };
       }
     }
   })
   

2. 修正模板里的按钮点击参数
   你的模板中ng-click传了一个没定义的prop参数，直接去掉它就好：

   <p class="input-group">
     <input type="text" class="form-control" 
            ng-change='alterou()' 
            datetime-picker="dd/MM/yyyy HH:mm" 
            ng-model="obj.date" 
            is-open="obj.isOpen" />
     <span class="input-group-btn">
       <button type="button" class="btn btn-default" ng-click="openCalendar($event)">
         <i class="fa fa-calendar"></i>
       </button>
     </span>
   </p>
   

为什么这样改？ #

Angular的ng-model是基于对象引用绑定的，你原来的写法直接替换了obj的引用，导致原来绑定的obj.date丢失，日期自然就清空了。而只修改isOpen属性的话，obj的引用保持不变，date属性还在原来的对象里，打开日历的时候就不会丢失已选日期啦！

内容的提问来源于stack exchange，提问作者Claudio Moraes