AngularJS: Date picker validation

by ppollono

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<form name="myform" ng-controller="MyCtrl">
  <label>Birth Date</label>
  <input type="date" ng-model="user.birthdate" name="birthdate" required="true" ng-pattern="/^(\d{4})-(\d{2})-(\d{2})$/" class="hidden">
  <div date-picker="user.birthdate" click="click()" name="birthdate" required="true"></div>
  <span ng-hide="myform.birthdate.$valid" class="error">Not valid!</span>
  <span ng-show="myform.birthdate.$valid" class="success">Valid!</span>
</form>
<div class="well">Valid date pattern yyyy-mm-dd</div>

CSS

body {
  padding: 20px
}

.error {
  color: red;
}

.success {
  color: green;
}

JavaScript

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

App.controller('MyCtrl', ['$scope', function($scope) {
  $scope.user = {
    birthdate: '2016/12/07'
  };
}]);

App.directive('datePicker', function() {
  return {
    restrict: 'A',
    replace: true,
    scope: {
      datePicker: '=',
      name: '@',
      click: '&',
      required: '='
    },
    template: '<div class="input-append">' +
      '<input type="text" ng-model="datePicker" name="{{name}}" ng-click="click()" required="required">' +
      '<span class="add-on">' +
      '<i class="icon-calendar"></i>' +
      '</span>' +
      '</div>',
    link: function($scope, $element, $attrs, $controller) {
      // handle widget launch etc
    }
  };
});