La directiva ng-model se usa para vincular el valor del campo de entrada a una propiedad realizada en el controlador. Los formateadores se utilizan para convertir el valor de entrada de una representación textural a otra representación deseada. Los formateadores utilizados para el formato de fecha son útiles cuando la fecha debe actualizarse en varias ubicaciones según los formatos especificados por el país.
Sintaxis: el siguiente atributo debe agregarse dentro de las etiquetas HTML como se muestra en el ejemplo a continuación.
tipo de entrada = «fecha» id = «entrada de ejemplo» nombre = «entrada» ng_model = «ejemplo.valor»
Uso:
tipo de entrada = ” fecha ”
ng-modelo = ” string ”
[ nombre = ” string ” ]
[ min = ” string ” ]
[ max = ” string ” ]
[ ng-min = ” ” ]
[ ng-max = ” ” ]
[ requerido = ” string ” ]
[ ng-requerido = ” string ” ]
[ ng-cambio = ” string ” ]
Los argumentos mencionados anteriormente se utilizan como componentes de entrada en el módulo ng. En los siguientes ejemplos, veremos cómo se utilizan algunos de estos parámetros.
Ejemplo 1: El primer ejemplo muestra cómo cambiar el formato de una fecha. Es un código HTML simple donde el valor del modelo ng de la fecha de formato de su país se cambia a alguna otra fecha de formato de país.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
Format a Date using
ng-model in AngularJS
</title>
<script src=
"//code.angularjs.org/snapshot/angular.min.js">
</script>
</head>
<div ng-app="gfg">
<div ng-controller="dateCtrl" class="container">
<script>
angular.module('gfg', [])
.controller('dateCtrl', function ($scope) {
$scope.firstDate = new Date();
$scope.secondDate = "2020-05-20";
})
.directive('date', function (dateFilter) {
return {
require: 'ngModel',
link: function (scope,
elm, attrs, ctrl) {
var dateFormat =
attrs['date'] || 'yyyy-MM-dd';
ctrl.$formatters.unshift(
function (modelValue) {
return dateFilter(
modelValue, dateFormat);
});
}
};
})
</script>
<p>
<center>
<h1 style="color: green">
GeeksforGeeks
</h1>
<label for="">
Standard format for India
</label>
<input type="text" date='dd-MM-yyyy'
ng-model="secondDate"
class="form-control" />
<p class="text-primary">
<label for="">
Standard format for Korea
</label>
</p>
{{secondDate}}
</center>
</p>
</div>
</div>
</html>
Producción:
Ejemplo 2: en el siguiente fragmento de código HTML, se muestra cómo ingresar la fecha desde el menú del selector de fecha y luego expresarla en un formato determinado, es decir , aaaa-mm-dd . Además, se proporciona una verificación de validación para verificar si la fecha dada por un usuario se extiende entre el rango requerido en el programa o no. Para los valores de fecha mínimo y máximo, hemos utilizado los parámetros «min» y «max» de la siguiente manera min = «{{minDate | fecha:’aaaa-MM-dd’}}” y max = “{{maxDate | fecha:’aaaa-MM-dd’}}”. Además, el parámetro «requerido» establece la clave de error de validación requerida si no se ingresa el valor.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
Format a Date using
ng-model in AngularJS
</title>
<script src=
"//code.angularjs.org/snapshot/angular.min.js">
</script>
</head>
<center>
<body ng-app="dateInputExample">
<script>
angular.module('dateInputExample', [])
.controller(
'DateController', ['$scope',
function ($scope) {
$scope.example = {
value: new Date(2020, 4, 25)
};
}]);
</script>
<form name="myForm" ng-controller=
"DateController as dateCtrl">
<h1 style="color: green">
GeeksforGeeks
</h1>
<label for="exampleInput">
Pick a date in 2020:
</label>
<input type="date" id="exampleInput"
name="input" ng-model="example.value"
placeholder="yyyy-MM-dd"
min="2020-01-01" max="2020-12-31"
required />
<div role="alert">
<span class="error" ng-show=
"myForm.input.$error.required">
Required!
</span>
<span class="error" ng-show=
"myForm.input.$error.date">
Not a valid date!
</span>
</div>
<tt>
value = {{example.value |
date: "yyyy-MM-dd"}}
</tt><br />
<tt>
Is valid date =
{{myForm.input.$valid}}
</tt><br />
</form>
</body>
</html>
Producción:
Referencia: https://docs.angularjs.org/api/ng/input/input%5Bdate%5D
Publicación traducida automáticamente
Artículo escrito por sahelibhattacharjee1 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA