¡Esta es una revisión vieja del documento!
En este tema retornamos el ejemplo del seguro médico para añadir una directiva. La directiva consiste en usar el widget de Datepicker de JQuery UI para que aparezca un calendario al pinchar sobre el campo “fechaCreacion” en la página detalle.html
.
Para que funciona el Datepicker es necesario añadir lo siguiente a la página index.html
:
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" /> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script>
La directiva se llamara ''caDatepciker” y se usará como un atributo HTML. El valor del atributo será el formato de fecha que queremos que tenga el Datepicker según los formatos de fecha definidos por $.datepicker.formatDate.
Por lo tanto la directiva se usará de la siguiente manera:
<input id="fechaCreacion" name="fechaCreacion" type="text" ng-model="seguro.fechaCreacion" ca-datepicker="dd/mm/yy" />
Veamos ahora como es la definición de la directiva:
app.directive('caDatepicker', [function(dateFormat) { return { restrict: 'A', link: function($scope, element, attributes) { element.datepicker({ dateFormat: attributes.caDatepicker }); } }; }]);