вы можете использовать
$('.buttons').on('click', 'button', function(){
// your magic goes here
});
или
$('.buttons').delegate('button', 'click', function() {
// your magic goes here
});
, эти два метода эквивалентны, но имеют другой порядок параметров.
см .: Событие делегата jQuery
В документах с угловым материалом имеется документация для $mdDateLocaleProvider
.
angular.module('app').config(function($mdDateLocaleProvider) {
$mdDateLocaleProvider.formatDate = function(date) {
return moment(date).format('YYYY-MM-DD');
};
});
Если вы не используете moment.js, замените код внутри formatDate
для того, что вы хотите использовать для форматирования даты.
Здесь - пример CodePen, основанный на образцах из документов углового материала.
Для angular-material
> = 5.x.x
Рекомендуемый способ использования других настраиваемых / предопределенных форматов даты описан в документации по угловому материалу:
Пример реализации с использованием MomentJS для настройки и анализа datetime отображения форматов :
...
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());
Вы также должны установить Moment-библиотеку и адаптер для Angular:
https://www.npmjs.com/package/angular2-moment
npm install --save angular2-moment
https://www.npmjs.com/package/@angular/material-moment-adapter
npm install --save @ угловой / материальный момент-адаптер
Для тех, кто не использует 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;
};
});
Изменение формата даты, имен месяцев и названий недели во время выполнения вполне возможно с помощью 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
, поскольку они уже настроены на использование 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>
Если вы используете последнюю версию angular-material.js, используйте службу $ mdDateLocale. В этом примере кода используется встроенный фильтр даты в качестве альтернативы использованию библиотеки moment.js. См. Другие параметры формата даты, используя функцию углового $ 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");
};
});
Отлично работает, когда дата набирается с клавиатуры и возвращает значение null в инициации, чтобы избежать «Недействительной даты» массажа в директиве md-datepicker:
$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);
};
$mdDateLocale.formatDate = date => $filter('date')(date, "mediumDate");
Другое направление автоматически обрабатывается встроенным обработчиком даты javascript, который чрезвычайно прощает.
– mcv
18 December 2016 в 08:57
Я использовал $mdDateLocaleProvider
для его форматирования на конце. Если вы хотите отформатировать дату при отправке ее на задний конец, для меня работало следующее: -
$filter('date')(this.date, 'MM/dd/yyyy');
У меня есть выше в контроллере.
Я хотел бы предоставить свое решение, которое на 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 значения. Он будет работать только тогда, когда модель меняет значения.
Используя $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
.
- Когда мы используем 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();
});
Чтобы также решить проблему, указанную kazuar:
К сожалению, это не работает, если дата вводится с клавиатуры
blockquote>, вы должны определите метод 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); };
С уважением
angular.module('app') .config(function ($mdDateLocaleProvider, moment) { ... })
– yjimk
13 October 2016 в 21:45
У меня была такая же проблема и придумал это простое решение с помощью 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');
}
undefined
при загрузке, что-то вроде этого должно работать:return date ? moment(date).format('YYYY-MM-DD') : '';
– Bohuslav Burghardt 16 October 2015 в 16:55Tue Oct 06 2015 00:00:00 GMT+0300
– Ali Poder 19 October 2015 в 08:15MyDate
как «2016-01-08T16: 07: 31.352Z». см. в codepen.io/anon/pen/OMmjaP – Saurabh 8 January 2016 в 17:08