사용자 지정 지시문을 클래스로 사용하여 AngularJS에서 datepicker를 사용하는 방법은 무엇입니까?

다음은 내가 사용한 HTML과 Javascript 코드입니다.사용자 지정 지시문을 클래스로 사용하여 AngularJS에서 datepicker를 사용하는 방법은 무엇입니까?

HTML 코드 :

<html> 
<head> 
<script 
    src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script> 
<script src="date.js"></script> 
</head> 
<body> 
    <div ng-app="app"> 
     <input type="text" ng-model="date" class="datepicker"></input> 
     {{ date }} 
    </div> 
</body> 
</html>

자바 스크립트 : 나는 텍스트 상자를 클릭하면

var datePicker = angular.module('app', []); 

datePicker.directive('datepicker', function() { 
    return { 
     restrict: 'C', 
     require: 'ngModel', 
     link: function (scope, element, attrs, ngModelCtrl) { 
      element.datepicker({ 
       dateFormat: 'dd, MM, yy', 
       onSelect: function (date) { 
        scope.date = date; 
        scope.$apply(); 
       } 
      }); 
     }  
    }; 
});

은 이제 날짜 선택기 팝업이오고되지 않습니다.

누군가가이 datepicker가 작동하도록하는 해결책을 도울 수 있습니까?

출처

2014-11-07 kumareloaded

코드에 몇 가지 실수가 있습니다. 당신이 사용하고있는 datepicker를 구체적으로 언급하지 않았으므로 태그에 기반한 jquery.UI라고 가정했습니다.

1) 당신은 또한

2) element.datepicker를 사용할 수 없습니다 jquery.UI CSS를 추가해야합니다. 요소은 jQuery 객체가 아닙니다. 당신은 jquery 객체로 만들 필요가 있습니다.

<div ng-app="myApp"> <input type="text" ng-model="date" class="datepicker"></input> </div>

JS : 같은

HTML 노호 여기

var app = angular.module('myApp', []); 


app.directive('datepicker', function() { 
return { 
    restrict: 'C', 
    require: 'ngModel', 
    link: function (scope, element, attrs, ngModelCtrl) { 
      $(element).datepicker({ 
       dateFormat: 'dd, MM, yy', 
       onSelect: function (date) { 
        scope.date = date; 
        scope.$apply(); 
       } 
      }); 
     }  
    Y}; 
});

이 작업 바이올린 http://jsfiddle.net/esx6k1nc/

출처

2014-11-07 12:07:08 Icepick

입니다 잘 모르겠어요이 bootstrap- 동일한 형식 인 경우 날짜 선택기. bootstrap-datepicker를 사용할 때 이것은 나를 위해 일했습니다. 이것을 컨트롤러에 추가하십시오 :

$('#datepicker').datepicker({ 
    todayHighlight: true, 
    format: 'mm/dd/yyyy', 
    autoclose: true 
}).on('changeDate', function (date) { 
    $scope.date = date.format(); 
    $scope.$apply(); 
});

출처

2015-11-20 23:22:01 Juan

사용자 지정 지시문을 클래스로 사용하여 AngularJS에서 datepicker를 사용하는 방법은 무엇입니까?

답변

관련 문제