javascript - type - Valor de entrada de fecha de Angular.js y HTML5: ¿cómo lograr que Firefox muestre un valor de fecha legible en una entrada de fecha?
pattern date html5 (7)
Tengo una entrada de fecha HTML5 y me gustaría que su valor se establezca de forma predeterminada en el valor de la propiedad de fecha en mi modelo. No soy muy quisquilloso con el formato, ya que Chrome parece decidir eso de todos modos en función de mi configuración regional, pero idealmente el formato sería dd/MM/yyyy .
Así es como configuré mi entrada:
<input type="date"
ng-model="date"
value="{{ date | date: ''yyyy-MM-dd'' }}" />
Esto funciona bien en Chrome, y veo lo siguiente de forma predeterminada:
(Todavía no entiendo por qué el valor debe darse en yyyy-MM-dd , si Chrome todavía lo formatea según mi configuración regional, pero esa es una pregunta diferente).
Mi problema es que Firefox no muestra el valor de la fecha de la manera que he especificado. Creo que esto tiene que ver con vincular la entrada al modelo de date , porque puedo especificar casi cualquier cadena en el atributo de value , y todavía veré la cadena de fecha larga en la entrada de forma predeterminada:
Si elimino ng-model="date" de la etiqueta de entrada, Firefox muestra muy bien cualquier valor que le dé. No pensé que el modelo que una entrada estaba destinada a tener realmente algún efecto sobre su valor predeterminado?
Entiendo que la entrada de fecha no es compatible universalmente, pero dado que se supone que debe recurrir a un simple ingreso de texto, no veo por qué su valor no será simplemente 2013-08-05 , según lo especificado por el filtro de fecha angular .
Entonces, ¿cómo hago para que Firefox acepte mi valor formateado en la entrada de fecha?
NOTA Una vez que el usuario ha realizado las modificaciones, realizaré la validación y convertiré cada valor de entrada de fecha en un objeto Date adecuado. No estoy seguro de si esto es relevante para la pregunta, pero ponlo ahí por si acaso, porque los formatos de entrada obviamente deberían ser consistentes para que la conversión de la fecha funcione de la misma manera en todos los navegadores. Problemático, por supuesto, con Chrome decidiendo el formato de entrada para mí ...
El problema es que el value se ignora cuando ng-model está presente .
Firefox, que actualmente no admite type="date" , convertirá todos los valores a string. Como usted (con razón) quiere que la date sea un objeto Date real y no una cadena, creo que la mejor opción es crear otra variable, por ejemplo dateString , y luego vincular las dos variables:
<input type="date" ng-model="dateString" />
function MainCtrl($scope, dateFilter) {
$scope.date = new Date();
$scope.$watch(''date'', function (date)
{
$scope.dateString = dateFilter(date, ''yyyy-MM-dd'');
});
$scope.$watch(''dateString'', function (dateString)
{
$scope.date = new Date(dateString);
});
}
La estructura real es solo para fines de demostración. Sería mejor que crearas tu propia directiva, especialmente para:
- permitir formatos distintos de
yyyy-MM-dd, - poder usar los
NgModelController#$formattersNgModelController#$parserslugar de la variable artificialdateString(consulte la documentation sobre este tema).
Tenga en cuenta que he usado yyyy-MM-dd , porque es un formato soportado directamente por el objeto Date JavaScript. En caso de que quiera usar otra, debe hacer la conversión usted mismo.
EDITAR
Aquí hay una manera de hacer una directiva limpia:
myModule.directive(
''dateInput'',
function(dateFilter) {
return {
require: ''ngModel'',
template: ''<input type="date"></input>'',
replace: true,
link: function(scope, elm, attrs, ngModelCtrl) {
ngModelCtrl.$formatters.unshift(function (modelValue) {
return dateFilter(modelValue, ''yyyy-MM-dd'');
});
ngModelCtrl.$parsers.unshift(function(viewValue) {
return new Date(viewValue);
});
},
};
});
Esa es una directiva básica, todavía hay mucho margen de mejora, por ejemplo:
- permite el uso de un formato personalizado en lugar de
yyyy-MM-dd, - verifique que la fecha escrita por el usuario sea correcta.
En mi caso, lo he resuelto de esta manera:
$scope.MyObject = // get from database or other sources;
$scope.MyObject.Date = new Date($scope.MyObject.Date);
y la fecha del tipo de entrada está bien
He usado ng-change:
Date.prototype.addDays = function(days) {
var dat = new Date(this.valueOf());
dat.setDate(dat.getDate() + days);
return dat;
}
var app = angular.module(''myApp'', []);
app.controller(''DateController'', [''$rootScope'', ''$scope'',
function($rootScope, $scope) {
function init() {
$scope.startDate = new Date();
$scope.endDate = $scope.startDate.addDays(14);
}
function load() {
alert($scope.startDate);
alert($scope.endDate);
}
init();
// public methods
$scope.load = load;
$scope.setStart = function(date) {
$scope.startDate = date;
};
$scope.setEnd = function(date) {
$scope.endDate = date;
};
}
]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div data-ng-controller="DateController">
<label class="item-input"> <span class="input-label">Start</span>
<input type="date" data-ng-model="startDate" ng-change="setStart(startDate)" required validatedateformat calendar>
</label>
<label class="item-input"> <span class="input-label">End</span>
<input type="date" data-ng-model="endDate" ng-change="setEnd(endDate)" required validatedateformat calendar>
</label>
<button button="button" ng-disabled="planningForm.$invalid" ng-click="load()" class="button button-positive">
Run
</button>
</div <label class="item-input"> <span class="input-label">Start</span>
<input type="date" data-ng-model="startDate" ng-change="setStart(startDate)" required validatedateformat calendar>
</label>
<label class="item-input"> <span class="input-label">End</span>
<input type="date" data-ng-model="endDate" ng-change="setEnd(endDate)" required validatedateformat calendar>
</label>
Puedes usar esto, funciona bien:
<input type="date" class="form1"
value="{{date | date:MM/dd/yyyy}}"
ng-model="date"
name="id"
validatedateformat
data-date-format="mm/dd/yyyy"
maxlength="10"
id="id"
calendar
maxdate="todays"
ng-click="openCalendar(''id'')">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar" ng-click="openCalendar(''id'')"></span>
</span>
</input>
Si usa Angular Material Design, puede usar el componente datepicker allí y esto funcionará en Firefox, IE, etc.
https://material.angularjs.org/latest/demo/datepicker
Sin embargo, la advertencia es justa: la experiencia personal es que hay problemas con esto, y aparentemente se está volviendo a trabajar en este momento. Mira aquí:
Verifique esta directiva completamente funcional para MEAN.JS (Angular.js, bootstrap, Express.js y MongoDb)
Basado en la respuesta de @Blackhole, acabamos de terminarlo para ser usado con mongodb y express.
Le permitirá guardar y cargar fechas desde un conector de mangosta
¡¡Espero eso ayude!!
angular.module(''myApp'')
.directive(
''dateInput'',
function(dateFilter) {
return {
require: ''ngModel'',
template: ''<input type="date" class="form-control"></input>'',
replace: true,
link: function(scope, elm, attrs, ngModelCtrl) {
ngModelCtrl.$formatters.unshift(function (modelValue) {
return dateFilter(modelValue, ''yyyy-MM-dd'');
});
ngModelCtrl.$parsers.push(function(modelValue){
return angular.toJson(modelValue,true)
.substring(1,angular.toJson(modelValue).length-1);
})
}
};
});
El JADE / HTML:
div(date-input, ng-model="modelDate")
¿Por qué el valor debe darse en aaaa-MM-dd?
Según el tipo de entrada = especificación de fecha de HTML 5, el valor debe tener el formato yyyy-MM-dd ya que toma el formato de una full-date válida que se especifica en RFC3339 como
full-date = date-fullyear "-" date-month "-" date-mday
No hay nada que ver con Angularjs ya que la entrada de directiva no admite el tipo de date .
¿Cómo hago para que Firefox acepte mi valor formateado en la entrada de fecha?
FF no admite el tipo de date de entrada por lo menos hasta la versión 24.0. Puedes obtener esta información desde here . Entonces, por ahora, si usa la entrada con el tipo de date en FF, el cuadro de texto toma el valor que pase.
Mi sugerencia es que pueda usar el Timepicker de Angular-ui y no use el soporte HTML5 para la entrada de fecha.