Изменить формат md-datepicker в Angular Материал

Ответ 1

В документах Angular Material имеется документация для $mdDateLocaleProvider.

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

Если вы не используете moment.js, замените код внутри formatDate на то, что вы хотите использовать для форматирования даты.

Здесь - пример CodePen, основанный на образцах из Angular Документов материалов.

Ответ 2

Чтобы также решить проблему, указанную 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);
};

Привет

Ответ 3

Для тех, кто не использует 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;

  };
});

Ответ 4

Отлично работает, когда дата вводится из keyborard и возвращает значение null в инициации, чтобы избежать "Недействительной даты" массажа в директиве md-datapicker:

$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);
};

Ответ 5

- Когда мы используем md-DatePicker в md-диалоге, тогда служба $mdDateLocaleProvider не форматирует дату по мере необходимости. Мы должны использовать $mdDateLocale в контроллере md-dialog для форматирования даты 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();
});

Ответ 6

Изменение формата даты, имен месяцев и названий недели во время выполнения вполне возможно с помощью 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 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 locale data
  $mdDateLocaleProvider.firstDayOfWeek = localeData._week.dow;

  // Format and parse dates based on moment '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 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 locale data
    $mdDateLocale.firstDayOfWeek = localeData._week.dow;
  });
}

Обратите внимание, что нам не нужно изменять методы $mdDateLocale.formatDate и $mdDateLocale.parseDate, поскольку они уже настроены на использование L-формата, который изменяется, вызывая moment.locale(newValue).

См. документацию для $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>

Ответ 7

Используя $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.

Ответ 8

Я хотел бы предоставить свое решение, основанное на 100% на основе сообщения Christiaan Westerbeek. Мне очень нравится то, что он сделал, но я лично хотел что-то более упрощенное.

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. Он будет работать только тогда, когда модель изменяет значения.

Ответ 9

Если вы используете последнюю версию angular -material.js, используйте службу $mdDateLocale. В этом примере кода используется angular встроенный фильтр даты в качестве альтернативы использованию библиотеки moment.js. См. Другие параметры формата даты, используя angular $filter service здесь по этой ссылке 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");
  };

});

Ответ 10

Я использовал $mdDateLocaleProvider для его форматирования на конце. Если вы хотите отформатировать дату при отправке ее на задний план, для меня работало следующее: -

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

У меня есть выше в контроллере.