2017-10-15 3 views
0

Dans le calendrier d'amorçage NG-UI, je suis en mesure d'afficher le format de date correctement, mais la valeur à l'intérieur du ngmodel semble être date string comme Wed Oct 18 2017 00:00 : 00 GMT-0400 (HAE).besoin de mettre à jour la valeur ngModel sur angular-ui bootstrap datepicker

J'ai essayé de mettre à jour mon ngmodel pour contenir la valeur 10/18/2017. Mais je suis confronté à $ appliquer des erreurs déjà en cours.

<input type="text" class="text-input" id="screeningDateFromSearch" 
     datepicker-popup uib-datepicker-popup="{{format}}" 
     placeholder="mm/dd/yyyy" 
     ng-model="searchInput.screeningDateFrom" 
     is-open="datesPicker.screeningDateFrom" 
     datepicker-options="dateOptions" 
     show-button-bar="false" ng-required="true" close-text="Close" 
     ng-change="searchScreenings()" /> 
angular.module('moduleName') 
    .directive('datepickerPopup', function (dateFilter) { 
     return { 
      require: '^ngModel', 
      restrict: 'EA', 
      link: function (scope, elm, attrs, ctrl) { 
       var dateFormat = attrs.uibDatepickerPopup; 
       attrs.$observe('datepickerPopup', 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 = dateFilter(modelValue).format(dateFormat); 
        return retVal; 
       }); 

       ctrl.$parsers.unshift(function (viewValue) { 
        var date = dateFilter(viewValue, dateFormat); 
        scope.$apply(function (viewValue) { 
         ctrl.$setViewValue(date); 
         ctrl.$render(); 
        }); 
       }); 

      } 
     }; 
    }) 

plus tard essayé avec $ scope.safeApply, mais cela ne fonctionne pas trop sur ce code snippet S'il vous plaît suggérer la meilleure façon de mettre à jour la valeur.

+0

Le ([$ setViewValue] https://docs.angularjs.org/api/ng/type La méthode /ngModel.NgModelController#$setViewValue) appelle automatiquement un cycle de digestion. Pourquoi pensez-vous que vous devez utiliser '$ apply'? – georgeawg

+0

Avec le [uib-datepicker-popup directve] (https://angular-ui.github.io/bootstrap/#!#datepickerPopup), le 'ng-model' doit être défini sur un [objet Date] (https: //developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) n'est pas une chaîne. Votre directive 'datepicker-popup' combat la directive' uib-datepicker-popup'. Qu'est-ce que vous essayez d'accomplir avec ça? – georgeawg

+0

J'essaie de mettre à jour la valeur du modèle ng au 10/18/2017. –

Répondre

0

Ajouter ce code dans ng-change

$scope.searchScreenings = function(){ 
    var screeningDateFrom = $filter('date')($scope.searchInput.screeningDateFrom, 'mm/dd/yyyy'); 
} 

Ne pas oublier d'injecter $filter dans votre contrôleur