web-dev-qa-db-ja.com

momentjsを使用したAngular Materialのmd-datepickerの形式の変更

角度素材は、新しい日付ピッカーコンポーネントを導入しました こちら 。

このコンポーネントによって返される日付をyyy-mm-ddの形式にする必要がありますが、これがどのように行われるかはわかりません。検索することで、$mdDateLocaleProviderを使用できることがわかりましたが、使用例を見つけることができませんでした。

md-datepickerによって返される日付をフォーマットする実際の例を見せてもらえますか？

javascriptangularjslocalizationangular-materialmomentjs
58
dearn44

Angular Material docsに $mdDateLocaleProvider のドキュメントがあります。

angular.module('app').config(function($mdDateLocaleProvider) {
    $mdDateLocaleProvider.formatDate = function(date) {
       return moment(date).format('YYYY-MM-DD');
    };
});

Moment.jsを使用しない場合は、formatDate内のコードを、日付のフォーマットに使用するものに置き換えます。

ここ は、Angular Material docsのサンプルに基づくCodePenの例です。

95
Bohuslav Burghardt

Kazuarが指摘した問題にも対処するには：

残念ながら、キーボードから日付を入力すると機能しません

parseDateメソッドも定義する必要があります。ドキュメントから：

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

完全な例として、私は自分のアプリに（瞬間を使用して）います：

$mdDateLocaleProvider.formatDate = function(date) {
    return moment(date).format('DD/MM/YYYY');
};

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

よろしく

57
shulito

Moment.jsを使用していない場合は、文字列としてフォーマットできます。

.config(function($mdDateLocaleProvider) {
  $mdDateLocaleProvider.formatDate = function(date) {

    var day = date.getDate();
    var monthIndex = date.getMonth();
    var year = date.getFullYear();

    return day + '/' + (monthIndex + 1) + '/' + year;

  };
});
20
Ben Taliadoros

Md-datepickerディレクティブの「Invalid date」というメッセージを回避するために、キーボードから日付を入力し、開始時にnullを返すときに完全に機能しました。

$mdDateLocaleProvider.formatDate = function(date) {
  return date ? moment(date).format('DD/MM/YYYY') : null;
};

$mdDateLocaleProvider.parseDate = function(dateString) {
  var m = moment(dateString, 'DD/MM/YYYY', true);
  return m.isValid() ? m.toDate() : new Date(NaN);
};
7
Janderson Silva

実行時に日付形式、月名、週名を変更することは、AngularJS 1.5.9およびモーメント2.17.1で完全に可能です。

最初に初期言語を構成します。 （この例では、angular-translate/$ translateProviderの構成はオプションです。）

angular.module('app').config(configureLocalization)

configureLocalization.$inject = ['$translateProvider', '$mdDateLocaleProvider', 'localdb', '__config'];
function configureLocalization($translateProvider, $mdDateLocaleProvider, localdb, __config) {
  // Configure angular-translate
  $translateProvider.useStaticFilesLoader({
      prefix: 'locale/',
      suffix: '.json'
  });
  // get the language from local storage using a helper 
  var language = localdb.get('language');
  if (!language || language === 'undefined') {
    localdb.set('language', (language = __config.app.defaultLanguage));
  }
  // Set the preferredLanguage in angular-translate
  $translateProvider.preferredLanguage(language);

  // Change moment's locale so the 'L'-format is adjusted.
  // For example the 'L'-format is DD.MM.YYYY for German
  moment.locale(language);

  // Set month and week names for the general $mdDateLocale service
  var localeData = moment.localeData();
  $mdDateLocaleProvider.months      = localeData._months;
  $mdDateLocaleProvider.shortMonths = moment.monthsShort();
  $mdDateLocaleProvider.days        = localeData._weekdays;
  $mdDateLocaleProvider.shortDays   = localeData._weekdaysMin;
  // Optionaly let the week start on the day as defined by moment's locale data
  $mdDateLocaleProvider.firstDayOfWeek = localeData._week.dow;

  // Format and parse dates based on moment's 'L'-format
  // 'L'-format may later be changed
  $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') : '';
  };
}

後で、ユーザーが別の言語を選択したときに変更される言語変数を監視するベースコントローラーがある場合があります。

angular.module('app').controller('BaseCtrl', Base);

Base.$inject = ['$scope', '$translate', 'localdb', '$mdDateLocale'];
function Base($scope, $translate, localdb, $mdDateLocale) {

  var vm = this;
  vm.language = $translate.use();

  $scope.$watch('BaseCtrl.language', function(newValue, oldValue) {
    // Set the new language in local storage
    localdb.set('language', newValue);
    $translate.use(newValue);

    // Change moment's locale so the 'L'-format is adjusted.
    // For example the 'L'-format is DD-MM-YYYY for Dutch
    moment.locale(newValue);

    // Set month and week names for the general $mdDateLocale service
    var localeDate = moment.localeData();
    $mdDateLocale.months      = localeDate._months;
    $mdDateLocale.shortMonths = moment.monthsShort();
    $mdDateLocale.days        = localeDate._weekdays;
    $mdDateLocale.shortDays   = localeDate._weekdaysMin;
    // Optionaly let the week start on the day as defined by moment's locale data
    $mdDateLocale.firstDayOfWeek = localeData._week.dow;
  });
}

$mdDateLocale.formatDateメソッドと$mdDateLocale.parseDateメソッドは、moment.locale(newValue)を呼び出して変更された「L」形式を使用するように既に構成されているため、変更する必要がないことに注意してください。

ロケールのカスタマイズの詳細については、$ mdDateLocaleProviderのドキュメントを参照してください： https://material.angularjs.org/latest/api/service/ $ mdDateLocaleProvider

ボーナス：これは、言語セレクターの外観です。

<md-select ng-model="BaseCtrl.language" class="md-no-underline">
  <md-option
    ng-repeat="language in ['en', 'de', 'fr', 'nl']"
    ng-value ="language"
  ><span
    class    ="flag-icon flag-icon-{{language ==='en' ? 'gb' : language}}"
  ></span>
  </md-option>
</md-select>
5
Christiaan Westerbeek

-md-dialogでmd-DatePickerを使用すると、$ mdDateLocaleProviderサービスは必要に応じて日付をフォーマットしません。 md-dialogのコントローラーで$ mdDateLocaleを使用して、md-DatePickerの日付をフォーマットする必要があります。例えば ​​-

angular.module('MyApp').controller('AppCtrl', function($scope, $mdDateLocale) {

  $mdDateLocale.formatDate = function(date) {
    return moment(date).format('YYYY-MM-DD');
  };

  $scope.myDate = new Date('2015-10-15');

  $scope.minDate = new Date();

  $scope.maxDate = new Date();
});
4
Ravindra Vairagi

$filterの代わりにmoment.jsを使用し、@ Ian Poston Framerと@Java devからの応答を参照して、次のことが最終的に機能しました：

angular
    .module('App', ['ngMaterial'])
    .run(function($mdDateLocale, $filter) {
        $mdDateLocale.formatDate = function(date) {
            return $filter('date')(date, "dd-MM-yyyy");
        };
    })

プロバイダーではないため、$filterに.configを注入できませんでした。そのため、.run内で$mdDateLocaleを使用して実行する必要がありました。

3
marcinowski

私は同じ問題を抱えていましたが、 moment.js の助けを借りてこの簡単な解決策を思いつきました。日付が変更されたときに起動するng-change属性を使用しました。

HTMLの内部：

<md-datepicker ng-model="myDate" ng-change="dateChanged()"></md-datepicker>

コントローラー内：

$scope.dateChanged = function() {
    this.myDate = moment(this.myDate).format('YYYY/MM/DD');
}
2
ttvd94

Christiaan Westerbeekの投稿 に基づいた100％のソリューションを提供したいと思います。私は彼がしたことを本当に気に入っていますが、個人的にはもっと単純なものが欲しかったのです。

appConfig.js

// config params in global scope that need to be set outside of Angular (due to Angular limitiations)
var appConfig = {
    // enables the dynamic setting of md-datepicker display masks (eg. when user changes language from English to Spanish)
    date: {
        // default mask
        format: "MM/dd/yyyy",

        // md-datepicker display format
        mdFormatDate: function (date) {
            if (date && date instanceof Date) {
                return date.format(appConfig.date.format);

            } else {
                return null;

            }

        }

    }

};

app.material.config.js

// set angular material config
app.config(['$mdDateLocaleProvider', function ($mdDateLocaleProvider) {
    // this is a global object set inside appConfig.js
    $mdDateLocaleProvider.formatDate = appConfig.date.mdFormatDate;

}]);

ローカリゼーション/翻訳/ etcを扱ういくつかのサービスファイル

// inside the service where you'd track the language/locale change
service._updateConfigDateFormat = function (theNewDateFormat) {
    // where theNewDateFormat is something like 'yyyy/MM/dd' or whatever
    daepConfig.date.format = theNewDateFormat;

};

このソリューションは、md-datepickerの表示値をnotライブ再フォーマットすることに注意してください。モデルが値を変更した場合にのみ機能します。

1
jc_

angular-materialの場合> = 5.x.x

他のカスタム/事前定義の日付形式の推奨される使用方法は、angularマテリアルドキュメントで説明されています。

https://material.angular.io/components/datepicker/overview#choosing-a-date-implementation-and-date-format-settings

日時表示のカスタマイズと解析に MomentJS を使用した実装例 formats ：

...
import { MomentModule } from 'angular2-moment';

import { MatMomentDateModule, MomentDateAdapter, MAT_MOMENT_DATE_FORMATS } from '@angular/material-moment-adapter';
import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE} from '@angular/material/core';

...

// moment formats explanation: https://momentjs.com/docs/#/displaying/format/
export const MY_FORMATS = {
    parse: {
      dateInput: 'YYYY-MM-DD',
    },
    display: {
      dateInput: 'YYYY-MM-DD',
      monthYearLabel: 'MMM YYYY',
      dateA11yLabel: 'YYYY-MM-DD',
      monthYearA11yLabel: 'MMMM YYYY',
    },
  };

  ...

@Component({
    ...
    providers: [
        // `MomentDateAdapter` and `MAT_MOMENT_DATE_FORMATS` can be automatically provided by importing
        // `MatMomentDateModule` in your applications root module. We provide it at the component level
        // here, due to limitations of our example generation script.
        {provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE]},
        // {provide: MAT_DATE_FORMATS, useValue: MAT_MOMENT_DATE_FORMATS},
        {provide: MAT_DATE_FORMATS, useValue: MY_FORMATS}
    ]
})

...

実装に応じて、コンポーネント内で次の使用も必要になる場合があります。

date = new FormControl(moment());

また、Angular用のMomentライブラリとアダプターをインストールする必要があります。

https://www.npmjs.com/package/angular2-moment

npm install --sangular2-moment

https://www.npmjs.com/package/@angular/material-moment-adapter

npm install --save @ angular/material-moment-adapter

1
Alex Pandrea

Angular-material.jsの最新バージョンを使用している場合は、$ mdDateLocaleサービスを使用します。このコードサンプルでは、​​moment.jsライブラリを使用する代わりに、Angularの組み込み日付フィルターを使用しています。このリンクで角度の$ filterサービスを使用する他の日付形式オプションを参照してください https://docs.angularjs.org/api/ng/filter/date 。

// mainController.js
angular.module('app').config(function($mdDateLocale, $filter, $scope) {

  // FORMAT THE DATE FOR THE DATEPICKER
  $mdDateLocale.formatDate = function(date) {
        return $filter('date')($scope.myDate, "mediumDate");
  };

});
0
Ian Poston Framer

私の場合、PlaceHolderはすべて機能していませんが、カスタム書式を使用するとplaceHolderは消えていました。以下の行は、プレースホルダーに関する私の問題を解決しました。

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

$mdDateLocaleProviderを使用して、葉側でフォーマットしました。バックエンドに送信するときに日付をフォーマットしたい場合は、次のことがうまくいきました：-

$filter('date')(this.date, 'MM/dd/yyyy');

私はコントローラーで上記を持っています。

0
java dev