AngularJS Hello World Ctrl

by zfikar

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.5/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <input type="my-date" ng-model="tanggal" />
</div>

CSS

select {
  border-radius: 50px;
  border-style: none;
}

.ui-datepicker-month,
.ui-datepicker-year {
  border-radius: 0;
}

JavaScript

var myApp = angular.module('app', []);
myApp.directive('input', function() {
  return {
    restrict: 'E',
    require: 'ngModel',
    link: function(scope, element, attrs, ngModelCtrl) {
      console.log(attrs.type);
      if (attrs.type === 'my-date') {
        element.datepicker({
          dateFormat: 'dd MM yy',
          changeMonth: true,
          changeYear: true
        });
      }
    }
  }
})
myApp.controller('ctrl', function($scope) {
  $scope.tanggal = '';
});