AngularJS Example 3

HTML

<script src="http://datejs.googlecode.com/files/date.js"></script>
<div ng-app="myApp">
  <div ng-controller="PatientController">
    <label>Prénom: </label>
    <input ng-model="patient.prenom" type="text" placeholder="saisissez le prenom">
    <br>
    <label>Nom: </label>
    <input ng-model="patient.nom" type="text" placeholder="puis le nom">
    <br>
    <label>Date de naissance: </label>
    <input id="date" ng-model="patient.dateNaissance" ui-date>
    <hr>
      <h1> {{label}} {{patient.prenom}} {{patient.nom}} {{patient.dateNaissance | date: 'dd/MM/yyyy'}}</h1>
  </div>
</div>

CSS

</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ --> 
<script src="http://code.angularjs.org/1.0.1/angular-1.0.1.min.js"></script>
<script src="http://cloud.github.com/downloads/digitalBush/jquery.maskedinput/jquery.maskedinput-1.3.js"></script>
<style>
.ng-invalid { border: 1px solid red; }

JavaScript

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

myApp.directive('uiDate', function() {
    return {
      require: '?ngModel',
      link: function($scope, element, attrs, controller) {
          element.mask("999/999999/999999999",{completed: function() {
              controller.$setViewValue(Date.parse(this.val(),"dd/MM/yyyy"));
              $scope.$apply();
          }});
      }
    };
  });

function Patient() {
  this.nom;
  this.prenom;
  this.dateNaissance;
}

function PatientController($scope) {
  $scope.patient = new Patient();
  $scope.label = "Resultat : ";
}