web-dev-qa-db-ja.com

md-datepickerのフォーマットをdd-mm-yyyyに設定したい

angular materialのdatepicker。日付ピッカーの形式をdd-mm-yyyyに変更したままにしておきたい。

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.formatDate = function(date) {
return moment(date).format('YYYY-MM-DD');
};
});

しかし、アプリケーションのすべての日付ピッカーに対して1回限りの構成が必要です。この例は単一の日付ピッカー用だと思います。

angularjsangularjs-material
7
user3248761

以下のコードから簡単に行うことができます、

app.config(function($mdDateLocaleProvider) {
    $mdDateLocaleProvider.formatDate = function(date) {
        if (!date) {return '';}
        else{
            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);
    };
});
4
Shilpakar Amar
angular.module('app').config(function($mdDateLocaleProvider) {
    $mdDateLocaleProvider.formatDate = function(date) {
       return moment(date).format('YYYY-MM-DD');
    };
});
1
user3248761

これを実現するには、Javascriptライブラリを使用します

このモーメントをlocals.min.jsファイルとともにページに追加します

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment-with-locales.min.js"></script>

そして、アプリケーションの構成モジュールで。

angular.module('timeApp').config(function ($mdDateLocaleProvider) {

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

})

HTMLページで

 <md-datepicker ng-model="dateofbirth" md-current-view="year" md-placeholder="Enter Date of Birth" md-open-on-focus></md-datepicker>
0
Muhamed Shafeeq

最新バージョンのangular-material.jsを使用している場合は、$mdDateLocaleサービスを使用してください。このコードサンプルでは、​​moment.jsライブラリを使用する代わりに、angularの組み込みの日付フィルターを使用しています。このリンクで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, "dd-MM-yyyy");
      };

});
0
Ian Poston Framer