¿Cómo formatear una fecha usando ng-model?

Tengo una entrada definida como

<input class="datepicker" type="text" ng-model="clientForm.birthDate" />

Que está preparado para mostrarse en otra parte de la página:

<tr>
    <th>Birth Date</th>
    <td>{{client.birthDate|date:'mediumDate'}}</td>
</tr>

Cuando se carga la página, la fecha de nacimiento tiene un bonito formato similar a Dec 22, 2009. Sin embargo, cuando miro dentro de mi, <input>se muestra como Tue Dec 22 2009 00:00:00 GMT-0800 (Pacific Standard Time), supongo, cómo JS representa los Dateobjetos como cadenas.

En primer lugar, ¿cómo le digo a Angular que muestre la fecha en el <input>como algo así 12/22/2009? Parece que no puedo aplicar |filtersdentro del ng-modelatributo.

En segundo lugar, tan pronto como edito la fecha, incluso manteniéndola en su formato original, mi otro texto (dentro de <td>) ya no parece aplicar el |datefiltro; de repente cambia de formato para que coincida con el del cuadro de texto de entrada. ¿Cómo hago para que aplique el |datefiltro cada vez que cambia el modelo?

Preguntas relacionadas:

• ¿Cómo consigo que mi directiva solo se active al cambiar?
• ¿Cómo acceder a los argumentos en una directiva?

Utilice la validación personalizada de formularios http://docs.angularjs.org/guide/forms Demostración: http://plnkr.co/edit/NzeauIDVHlgeb6qF75hX?p=preview

Directiva que utiliza formateadores y analizadores y MomentJS )

angModule.directive('moDateInput', function ($window) {
    return {
        require:'^ngModel',
        restrict:'A',
        link:function (scope, elm, attrs, ctrl) {
            var moment = $window.moment;
            var dateFormat = attrs.moDateInput;
            attrs.$observe('moDateInput', function (newValue) {
                if (dateFormat == newValue || !ctrl.$modelValue) return;
                dateFormat = newValue;
                ctrl.$modelValue = new Date(ctrl.$setViewValue);
            });

            ctrl.$formatters.unshift(function (modelValue) {
                if (!dateFormat || !modelValue) return "";
                var retVal = moment(modelValue).format(dateFormat);
                return retVal;
            });

            ctrl.$parsers.unshift(function (viewValue) {
                var date = moment(viewValue, dateFormat);
                return (date && date.isValid() && date.year() > 1950 ) ? date.toDate() : "";
            });
        }
    };
});

Aquí hay una directiva angular-datetime muy útil . Puedes usarlo así:

<input type="text" datetime="yyyy-MM-dd HH:mm:ss" ng-model="myDate">

También agrega máscara a su entrada y realiza la validación.

input[type="date"]Creé una directiva simple para permitir que los elementos de formulario estándar funcionen correctamente con AngularJS ~ 1.2.16.

Mira aquí: https://github.com/betsol/angular-input-date

Y aquí está la demostración: http://jsfiddle.net/F2LcY/1/

Estoy usando jquery datepicker para seleccionar la fecha. Mi directiva lee la fecha y la convierte al formato de fecha json (en milisegundos), almacena en ng-modeldatos mientras muestra la fecha formateada.

Código HTML:

<input type="text" jqdatepicker  ng-model="course.launchDate" required readonly />

Directiva angular:

myModule.directive('jqdatepicker', function ($filter) {
    return {
        restrict: 'A',
        require: 'ngModel',
         link: function (scope, element, attrs, ngModelCtrl) {
            element.datepicker({
                dateFormat: 'dd/mm/yy',
                onSelect: function (date) {   
                    var ar=date.split("/");
                    date=new Date(ar[2]+"-"+ar[1]+"-"+ar[0]);
                    ngModelCtrl.$setViewValue(date.getTime());            
                    scope.$apply();
                }
            });
            ngModelCtrl.$formatters.unshift(function(v) {
            return $filter('date')(v,'dd/MM/yyyy'); 
            });

        }
    };
});

Dado que ha utilizado datepicker como clase, supongo que está utilizando un datepicker de Jquery o algo similar.

Hay una manera de hacer lo que pretendes sin usar moment.js en absoluto, simplemente usando solo las directivas datepicker y angularjs.

He dado un ejemplo aquí en este violín.

Extractos del violín aquí:

1. Datepicker tiene un formato diferente y el formato angularjs es diferente, es necesario encontrar la coincidencia adecuada para que la fecha esté preseleccionada en el control y también se complete en el campo de entrada mientras el modelo ng está vinculado. El siguiente formato es equivalente al 'mediumDate'formato de AngularJS.

   $(element).find(".datepicker")
             .datepicker({
                dateFormat: 'M d, yy'
             }); 

2. La directiva de entrada de fecha debe tener una variable de cadena provisional para representar la forma de fecha legible por humanos.

3. La actualización en diferentes secciones de la página debe ocurrir a través de eventos, como $broadcasty $on.

4. El uso de filter para representar la fecha en forma legible por humanos también es posible en ng-model pero con una variable de modelo temporal.

   $scope.dateValString = $filter('date')($scope.dateVal, 'mediumDate');

¡Utilizo la siguiente directiva que me hace muy feliz a mí y a la mayoría de los usuarios! Utiliza el momento para analizar y formatear. Se parece un poco al de SunnyShah, mencionado anteriormente.

angular.module('app.directives')

.directive('appDatetime', function ($window) {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function (scope, element, attrs, ngModel) {
            var moment = $window.moment;

            ngModel.$formatters.push(formatter);
            ngModel.$parsers.push(parser);

            element.on('change', function (e) {
                var element = e.target;
                element.value = formatter(ngModel.$modelValue);
            });

            function parser(value) {
                var m = moment(value);
                var valid = m.isValid();
                ngModel.$setValidity('datetime', valid);
                if (valid) return m.valueOf();
                else return value;
            }

            function formatter(value) {
                var m = moment(value);
                var valid = m.isValid();
                if (valid) return m.format("LLLL");
                else return value;

            }

        } //link
    };

}); //appDatetime

En mi forma lo uso así:

<label>begin: <input type="text" ng-model="doc.begin" app-datetime required /></label>
<label>end: <input type="text" ng-model="doc.end" app-datetime required /></label>

Esto vinculará una marca de tiempo (milisegundos desde 1970) a doc.beginy doc.end.

En Angular2 + para cualquier persona interesada:

<input type="text" placeholder="My Date" [ngModel]="myDate | date: 'longDate'">

con tipo de filtros en DatePipe Angular.

Prefiero que el servidor devuelva la fecha sin modificaciones y que javascript haga la vista de masaje. Mi API devuelve "MM / DD / YYYY hh: mm: ss" de SQL Server.

Recurso

angular.module('myApp').factory('myResource',
    function($resource) {
        return $resource('api/myRestEndpoint/', null,
        {
            'GET': { method: 'GET' },
            'QUERY': { method: 'GET', isArray: true },
            'POST': { method: 'POST' },
            'PUT': { method: 'PUT' },
            'DELETE': { method: 'DELETE' }
        });
    }
);

Controlador

var getHttpJson = function () {
    return myResource.GET().$promise.then(
        function (response) {

            if (response.myDateExample) {
                response.myDateExample = $filter('date')(new Date(response.myDateExample), 'M/d/yyyy');
            };

            $scope.myModel= response;
        },
        function (response) {
            console.log(response.data);
        }
    );
};

Directiva de validación myDate

angular.module('myApp').directive('myDate',
    function($window) {
        return {
            require: 'ngModel',
            link: function(scope, element, attrs, ngModel) {

                var moment = $window.moment;

                var acceptableFormats = ['M/D/YYYY', 'M-D-YYYY'];

                function isDate(value) {

                    var m = moment(value, acceptableFormats, true);

                    var isValid = m.isValid();

                    //console.log(value);
                    //console.log(isValid);

                    return isValid;

                };

                ngModel.$parsers.push(function(value) {

                    if (!value || value.length === 0) {
                         return value;
                    };

                    if (isDate(value)) {
                        ngModel.$setValidity('myDate', true);
                    } else {
                        ngModel.$setValidity('myDate', false);
                    }

                    return value;

                });

            }
        }
    }
);

HTML

<div class="form-group">
    <label for="myDateExample">My Date Example</label>
    <input id="myDateExample"
           name="myDateExample"
           class="form-control"
           required=""
           my-date
           maxlength="50"
           ng-model="myModel.myDateExample"
           type="text" />
    <div ng-messages="myForm.myDateExample.$error" ng-if="myForm.$submitted || myForm.myDateExample.$touched" class="errors">
        <div ng-messages-include="template/validation/messages.html"></div>
    </div>
</div>

template / validation / messages.html

<div ng-message="required">Required Field</div>
<div ng-message="number">Must be a number</div>
<div ng-message="email">Must be a valid email address</div>
<div ng-message="minlength">The data entered is too short</div>
<div ng-message="maxlength">The data entered is too long</div>
<div ng-message="myDate">Must be a valid date</div>

Angularjs ui bootstrap puede usar angularjs ui bootstrap, también proporciona validación de fecha

<input type="text"  class="form-control" 
datepicker-popup="{{format}}" ng-model="dt" is-open="opened" 
min-date="minDate" max-date="'2015-06-22'"  datepickeroptions="dateOptions"
date-disabled="disabled(date, mode)" ng-required="true"> 

en el controlador puede especificar cualquier formato que desee para mostrar la fecha como filtro de fecha

$ scope.formats = ['dd-MMMM-aaaa', 'aaaa / MM / dd', 'dd.MM.yyyy', 'shortDate'];