Angular bootstrap datepicker日期格式不格式化ng-model值

Question

问

Angular bootstrap datepicker日期格式不格式化ng-model值

灯火阑珊2502936477 发布于 2023-01-09 14:14

我在角度应用程序中使用bootstrap日期选择器.然而,当我从该日期选择器中选择一个日期选择器时,我已经更新了绑定的ng-model,我想要一个日期格式为'MM/dd/yyyy'的ng-model.但它每次都像这样约会

"2009-02-03T18:30:00.000Z"

代替

02/04/2009

我为同一个plunkr链接创建了一个plunkr

我的Html和控制器代码如下所示



  
    
    
    
    
  
  


    Selected date is: {{dt | date:'MM/dd/yyyy' }}
    above filter will just update above UI but I want to update actual ng-modle


    Popup
    
        
            
              
               
                
              
            
        
    
    

    
    {{dt}}

角度控制器

angular.module('plunker', ['ui.bootstrap']);
var DatepickerDemoCtrl = function ($scope) {


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

    $scope.opened = true;
  };

  $scope.dateOptions = {
    formatYear: 'yy',
    startingDay: 1
  };


  $scope.format = 'dd-MMMM-yyyy';
};

在此先感谢您审核我的问题.

UPDATE

我在下面调用方法来发布我的数据,VAR是大小为900的数组,其中包含日期选择器变量.

public SaveCurrentData(formToSave: tsmodels.ResponseTransferCalculationModelTS) {

        var query = this.EntityQuery.from('SaveFormData').withParameters({
            $method: 'POST',
            $encoding: 'JSON',
            $data: {
                VAR: formToSave.VAR,
                X: formToSave.X,
                CurrentForm: formToSave.currentForm,
            }
        });

        var deferred = this.q.defer();

        this.manager.executeQuery(query).then((response) => {
            deferred.resolve(response);
        }, (error) => {
                deferred.reject(error);
            });

        return deferred.promise;
    }

小智.. 105

虽然已经公布了类似的答案,但我想为我做出最简单,最干净的解决方案.假设您正在使用AngularUI日期选择器并且ng-Model的初始值没有被格式化,只需将以下指令添加到您的项目即可解决问题:

angular.module('yourAppName')
.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();
  }
}
});

我在Github AngularUI问题中找到了这个解决方案,因此所有的功劳都归功于那里的人们.

5 个回答

虽然已经公布了类似的答案,但我想为我做出最简单,最干净的解决方案.假设您正在使用AngularUI日期选择器并且ng-Model的初始值没有被格式化,只需将以下指令添加到您的项目即可解决问题:
```
angular.module('yourAppName')
.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();
  }
}
});
```
我在Github AngularUI问题中找到了这个解决方案,因此所有的功劳都归功于那里的人们.
2023-01-09 14:15 回答

qgone

我遇到了同样的问题,经过几个小时的记录和调查,我修复了它.

事实证明,这个值第一次在日期选择器中设置,$ viewValue是一个字符串,因此dateFilter按原样显示它.我所做的就是将其解析为Date对象.

在ui-bootstrap-tpls文件中搜索该块

  ngModel.$render = function() {
    var date = ngModel.$viewValue ? dateFilter(ngModel.$viewValue, dateFormat) : '';
    element.val(date);

    updateCalendar();
  };

并将其替换为:

  ngModel.$render = function() {
    ngModel.$viewValue = new Date(ngModel.$viewValue);
    var date = ngModel.$viewValue ? dateFilter(ngModel.$viewValue, dateFormat) : '';
    element.val(date);

    updateCalendar();
  };

希望这会有所帮助:)

2023-01-09 14:16 回答

弍大爺

您可以使用$解析器,如下所示,这为我解决了它.

window.module.directive('myDate', function(dateFilter) {
  return {
    restrict: 'EAC',
    require: '?ngModel',
    link: function(scope, element, attrs, ngModel) {
      ngModel.$parsers.push(function(viewValue) {
        return dateFilter(viewValue,'yyyy-MM-dd');
      });
    }
  };
});

HTML:

<p class="input-group datepicker" >
  <input
     type="text"
     class="form-control"
     name="name"
     datepicker-popup="yyyy-MM-dd"
     date-type="string"
     show-weeks="false"
     ng-model="data[$parent.editable.name]" 
     is-open="$parent.opened"
     min-date="minDate"
     close-text="Close"
     ng-required="{{editable.mandatory}}"
     show-button-bar="false"
     close-on-date-selection="false"
     my-date />
  <span class="input-group-btn">
    <button type="button" class="btn btn-default" ng-click="openDatePicker($event)">
      <i class="glyphicon glyphicon-calendar"></i>
    </button>
  </span>
</p>

2023-01-09 14:16 回答

付帅sz_702

将format通过指定datepicker-popup仅仅是用于显示日期的格式.底层ngModel是Date对象.试图显示它将显示它是默认的,符合标准的表示.

您可以通过date在视图中使用过滤器来显示它,或者,如果您需要在控制器中解析它,您可以注入$filter控制器并将其称为$filter('date')(date, format).另请参见日期过滤器文档.

2023-01-09 14:16 回答

a98246813

在datepicker指令中选择值后,您可以使用格式化程序.例如

angular.module('foo').directive('bar', function() {
    return {
        require: '?ngModel',
        link: function(scope, elem, attrs, ctrl) {
            if (!ctrl) return;

            ctrl.$formatters.push(function(value) {
                if (value) {
                    // format and return date here
                }

                return undefined;
            });
        }
    };
});

链接.

2023-01-09 14:18 回答

沝伊

撰写答案