var myApp = angular.module('myApp', []); myApp.directive('uiDate', function() { return { require: '?ngModel', link: function($scope, element, attrs, controller) { var originalRender, updateModel, usersOnSelectHandler; if ($scope.uiDate == null) $scope.uiDate = {}; if (controller != null) { updateModel = function(value, picker) { return $scope.$apply(function() { return controller.$setViewValue(element.datepicker("getDate")); }); }; if ($scope.uiDate.onSelect != null) { usersOnSelectHandler = $scope.uiDate.onSelect; $scope.uiDate.onSelect = function(value, picker) { updateModel(value); return usersOnSelectHandler(value, picker); }; } else { $scope.uiDate.onSelect = updateModel; } originalRender = controller.$render; controller.$render = function() { originalRender(); return element.datepicker("setDate", controller.$viewValue); }; } return element.datepicker($scope.uiDate); } }; }); function Patient() { this.nom; this.prenom; this.dateNaissance; } function PatientController($scope) { $scope.patient = new Patient(); $scope.label = "Resultat : "; }
<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 ng-model="patient.dateNaissance" ui-date> <hr> <h1> {{label}} {{patient.prenom}} {{patient.nom}} {{patient.dateNaissance | date: 'dd/MM/yyyy'}}</h1> </div> </div>