AngularJS : Format DateTimePicker on load

Question

Umbraco 7에서 사용자 정의 응용 프로그램에서 datetimepicker를 사용하는 데 정말로 어려움을 겪고 있습니다. 결국 지시문을 만들고 모델에 값을 저장하는 것으로 끝났습니다. 다양한 예제를 시도해 본 결과 초기로드에서 날짜를 형식화하는 방법을 찾을 수 없었습니다. datepicker와 상호 작용할 때까지 날짜 형식은 '1901-02-07T01 : 05 : 00Z'입니다. 사용

angular.module("umbraco.directives") 
.directive('datetimepicker', function ($parse) { 
    return { 
     restrict: 'A', 
     link: function (scope, element, attrs) { 
      var ngModel = $parse(attrs.ngModel); 
      element.datetimepicker({ 
       format: 'yyyy-mm-dd hh:ii:ss', 
       autoclose: true 
      }) 
      .on('changeDate', function() { 
       scope.$apply(function (scope) { 
        ngModel.assign(scope, element.val()); 
       }); 
      })     
     } 
    }  
}); 

HTML은 다음과 같습니다 :

는

<input type="text" ng-model="ShowFrom" datetimepicker /> 

아무도 내가 이것을 달성 할 방법에 대한 아이디어가 있습니까 여기에 내 지시에 지금까지이 무엇입니까? 나는 행운이없는 파서와 포맷터를 사용해 보았습니다.

감사합니다.

Answer 1

나는 대답이 파서 및 포맷터를 사용하는 것으로 의심됩니다. 원래 "알 수없는 형식 공급자"오류가 발생했을 때이를 사용하려고 시도했을 때 이 필요하다는 것을 알게되었습니다. 'ngModel' 지시문에 문제가 해결되었습니다. $ parser 함수는 문자열을 모델 업데이트 날짜로 다시 변환하는 반면 $ formatter 함수는 모델 값을 받아 문자열로 적절하게 형식을 지정합니다.

다음은 지침의 최종 버전입니다. 다른 사람이 코드를 사용하고자한다면 here이 이것이 작성된 datepicker입니다.

angular.module("umbraco.directives") 
.directive('datetimepicker', function ($parse, $filter) { 
    return { 
     restrict: 'A', 
     require: 'ngModel', 
     link: function (scope, element, attrs, ctrl) { 
      var ngModel = $parse(attrs.ngModel); 
      element.datetimepicker({ 
       format: 'yyyy-mm-dd hh:ii:00', 
       autoclose: true 
      }) 
      .on('changeDate', function() { 
       scope.$apply(function (scope) { 
        ngModel.assign(scope, element.val()); 
       }); 
      }); 
      ctrl.$parsers.push(function (value) { 
       return new Date(Date.parse(value)); 
      }); 
      ctrl.$formatters.push(function (value) { 
       if (value.indexOf('0001-01-01') < 0) 
        return value.replace('T', ' ').replace('Z', ''); 
       else      
        return ""; 
      }); 
     } 
    }  
});