angularjs - example - mat card

estado inicial del selector de fecha angular-ui del selector de fecha no formateado por fecha emergente-emergente

Question

Estoy trabajando con un selector de fecha ui angular y todo funciona realmente bien, con la excepción del estado inicial del selector de fecha. Después de elegir una fecha, se ve bien. Vea abajo:

Estado inicial

Después de seleccionar una fecha en el selector

Entonces, claramente obtengo la versión estrigificada del objeto de fecha en el primer caso, y el formato después de seleccionar una fecha.

El marcado

<input type="text" class="form-control"
       id="birthday"
       datepicker-options="datePickerOptions"
       datepicker-popup="{{format}}"
       data-ng-model="birthday"
       data-is-open="opened"
       data-ng-required="true"
       data-close-text="Close"/>

<span class="input-group-btn">
    <button type="button"
            class="btn btn-default"
            data-ng-click="open($event)">
        <i class="fa fa-calendar"></i>
    </button>
</span>

El controlador

var today = $scope.today = function today() {
    $scope.birthday = $scope.client.birthday || new Date();
};
today();

$scope.clear = function clear() {
    $scope.dt = null;
};

$scope.open = function($event) {
    $event.preventDefault();
    $event.stopPropagation();

    $scope.opened = true;
};

$scope.format = ''MMM d, yyyy'';
$scope.datePickerOptions = {
    ''show-weeks'': false
};

No es un gran problema, pero sería realmente agradable si el modelo (que debe ser un objeto de fecha según los documentos) se $scope.format para el formato $scope.format en lugar de un objeto de fecha estrigificado. Además, no estoy seguro de que haga una diferencia, pero este selector de fechas está dentro de un modal. ¡Gracias por cualquier ayuda!

ACTUALIZAR

Parece que no soy el único que experimenta esto, y está relacionado con el uso de angular 1.3. https://github.com/angular-ui/bootstrap/issues/2659

Answer 1

Donde / donde quiera que las soluciones encontré son largas, manejo por directiva, etc. Así que prefiero este corto

birthday = $filter(''date'')(new Date(), "MMM dd, yyyy");

Nota: No olvide inyectar el servicio de filtro angular integrado en $ en el controlador

angular.module(''app'').controller("yourController", 
[''$filter'' function($filter){ 
       /* your code here */  

       birthday = $filter(''date'')(new Date(), "MMM dd, yyyy");

       /* your code here */ 
}]);

Espero que esto ayude.

Answer 2

Otra solución que me funcionó, además de la que se describe en el tema de github, es inicializar el modelo con el tiempo de la época en milisegundos en lugar de un objeto de fecha, por ejemplo:

$scope.dt = new Date().getTime();

Answer 3

Para mejorar la respuesta de Premchandra Singh, usar el servicio de filtro angular $ funciona, pero también debe agregar un reloj en su campo de fecha para aplicar el filtro en futuras actualizaciones:

$scope.myDate = $filter(''date'')(new Date(), ''dd.MM.yy'');
$scope.$watch(''myDate'', function (newValue, oldValue) {
    $scope.myDate = $filter(''date'')(newValue, ''dd.MM.yy'');
});

Answer 4

Tuve un problema similar, parece que la interfaz de usuario de bootstrap es incompatible con la versión AngularJS 1.3.x

Este plunkr resuelve el problema para mí http://plnkr.co/edit/L9u12BeeBgPC2z0nlrLZ?p=preview

// this is the important bit:
.directive(''datepickerPopup'', function (){
  return {
    restrict: ''EAC'',
    require: ''ngModel'',
    link: function(scope, element, attr, controller) {
      //remove the default formatter from the input directive to prevent conflict
      controller.$formatters.shift();
    }
  }
});

Consulte también el ticket de Github https://github.com/angular-ui/bootstrap/issues/2659#issuecomment-60750976