更改 md-datepicker ng-model 格式 [英] Change md-datepicker ng-model format

问题描述

我正在使用 Angular Material md-datepicker.ng-model 的值看起来像这样:"2017-04-04T22:12:51.000Z"(它被称为 ISO 格式什么的..)

好吧，问题是:如何创建全局配置，以便所有 md-datepicker 标签始终以某种格式格式化和解析 ng-model 值，例如 YYYY-MM-DD?

angular.module('MyApp').controller('AppCtrl', function($scope) {$scope.myDate = 新日期();$scope.minDate = 新日期($scope.myDate.getFullYear(),$scope.myDate.getMonth() - 2,$scope.myDate.getDate());$scope.maxDate = 新日期($scope.myDate.getFullYear(),$scope.myDate.getMonth() + 2,$scope.myDate.getDate());}).config(function($mdDateLocaleProvider) {$mdDateLocaleProvider.parseDate = 函数(日期字符串){var m = moment(dateString, 'L', true);返回 m.isValid() ?m.toDate() : 新日期(NaN);};$mdDateLocaleProvider.formatDate = 函数(日期){var m = 时刻(日期)；返回 m.isValid() ?m.format('L') : '';};});

<link href="https://material.angularjs.org/HEAD/docs.css" rel="stylesheet"/><link href="https://material.angularjs.org/HEAD/angular-material.css" rel="stylesheet"/><script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.js"></script><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-animate.min.js"></script><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-aria.min.js"></script><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-messages.min.js"></script><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-route.min.js"></script><script src="https://material.angularjs.org/HEAD/angular-material.js"></script><script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/assets-cache.js"></script><div ng-app="MyApp" ng-controller="AppCtrl"><md-内容><md-datepicker ng-model="myDate" md-placeholder="输入日期"></md-datepicker></md-content><big>ng-model 值是:<strong>{{myDate}}</strong></big>

<p>我想这样格式化:YYYY-MM-DD

我将不胜感激！谢谢！

解决方案

但是，我通过创建自定义指令解决了我的问题.

希望这也能帮助其他一些开发者.

哟！

angular.module('MyApp').controller('AppCtrl', function($scope) {$scope.person = {姓名:约翰"，出生日期:1990-01-01 00:00:00"};}).directive('mdDatepicker', function () {功能链接(范围，元素，属性，ngModel){var 解析器 = 函数 (val) {val = moment(val).format('YYYY-MM-DD hh:mm:ss');返回值；};var 格式化程序 = 函数 (val) {如果 (!val) 返回 val;val = 时刻(val).toDate();返回值；};ngModel.$parsers.push(parser);ngModel.$formatters.push(formatter);}返回 {要求:'ngModel'，链接:链接，限制:'EA'，优先级:1}});

<link href="https://material.angularjs.org/HEAD/docs.css" rel="stylesheet"/><link href="https://material.angularjs.org/HEAD/angular-material.css" rel="stylesheet"/><script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.js"></script><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-animate.min.js"></script><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-aria.min.js"></script><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-messages.min.js"></script><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-route.min.js"></script><script src="https://material.angularjs.org/HEAD/angular-material.js"></script><script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/assets-cache.js"></script><div ng-app="MyApp" ng-controller="AppCtrl"><md-内容><md-datepicker ng-model="person.birthDate" md-placeholder="输入日期"></md-datepicker></md-content><big>ng-model 值是:<strong>{{person.birthDate}}</strong></big>

I'm using Angular Material md-datepicker. The value of ng-model looks something like this: "2017-04-04T22:12:51.000Z" (it's called ISO format or something..)

Well, the question is: How to create a global config, so that all md-datepicker tags always format and parse the ng-model value in a certain format, let's say YYYY-MM-DD?

angular.module('MyApp')
  .controller('AppCtrl', function($scope) {
    $scope.myDate = new Date();

    $scope.minDate = new Date(
      $scope.myDate.getFullYear(),
      $scope.myDate.getMonth() - 2,
      $scope.myDate.getDate());

    $scope.maxDate = new Date(
      $scope.myDate.getFullYear(),
      $scope.myDate.getMonth() + 2,
      $scope.myDate.getDate());    })

.config(function($mdDateLocaleProvider) {
  $mdDateLocaleProvider.parseDate = function(dateString) {
    var m = moment(dateString, 'L', true);
    return m.isValid() ? m.toDate() : new Date(NaN);
  };

  $mdDateLocaleProvider.formatDate = function(date) {
    var m = moment(date);
    return m.isValid() ? m.format('L') : '';
  };
});

<link href="https://material.angularjs.org/HEAD/docs.css" rel="stylesheet"/>
<link href="https://material.angularjs.org/HEAD/angular-material.css" rel="stylesheet"/>


<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-messages.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-route.min.js"></script>
<script src="https://material.angularjs.org/HEAD/angular-material.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/assets-cache.js"></script>



<div ng-app="MyApp" ng-controller="AppCtrl">
  <md-content>
    <md-datepicker ng-model="myDate" md-placeholder="Enter date"></md-datepicker>
  </md-content>
  
  <big>ng-model value is: <strong>{{myDate}}</strong></big>
</div>
<p>
I want to format it this way: YYYY-MM-DD
</p>

I would appreciate any help!! THANKS!

解决方案

However, I've fixed my problem by creating a custom directive.

Hope this helps some other developers too.

Yohoo!

angular.module('MyApp')

.controller('AppCtrl', function($scope) {
  $scope.person = {
    name: "John",
    birthDate: "1990-01-01 00:00:00"
  };
})

.directive('mdDatepicker', function () {
  function link(scope, element, attrs, ngModel) {
    var parser = function (val) {
      val = moment(val).format('YYYY-MM-DD hh:mm:ss');
      return val;
    };
    var formatter = function (val) {
      if (!val) return val;
      val = moment(val).toDate();
      return val;
    };
    ngModel.$parsers.push(parser);
    ngModel.$formatters.push(formatter);
  }
  return {
    require: 'ngModel',
    link: link,
    restrict: 'EA',
    priority: 1
  }
});

<link href="https://material.angularjs.org/HEAD/docs.css" rel="stylesheet"/>
<link href="https://material.angularjs.org/HEAD/angular-material.css" rel="stylesheet"/>


<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-messages.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-route.min.js"></script>
<script src="https://material.angularjs.org/HEAD/angular-material.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/assets-cache.js"></script>



<div ng-app="MyApp" ng-controller="AppCtrl">
  <md-content>
    <md-datepicker ng-model="person.birthDate" md-placeholder="Enter date"></md-datepicker>
  </md-content>
  
  <big>ng-model value is: <strong>{{person.birthDate}}</strong></big>
</div>

这篇关于更改 md-datepicker ng-model 格式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！