modemjs를 사용하여 각도 재료에서 md-datepicker 형식 변경
앵귤러 재료는 여기에 새로운 달력 보기 구성 요소를 도입했습니다.
이 컴포넌트에 의해 반환된 날짜를 yyy-mm-dd 형식으로 하고 싶은데 어떻게 해야 하는지 모르겠습니다.검색해 보니$mdDateLocaleProvider사용할 수 있지만 사용 예를 찾을 수 없었습니다.
다음 날짜까지 반환된 날짜 형식의 작업 예를 보여 주실 수 있습니까?md-datepicker
Angular Material 문서에 대한 설명서가 있습니다.
angular.module('app').config(function($mdDateLocaleProvider) {
$mdDateLocaleProvider.formatDate = function(date) {
return moment(date).format('YYYY-MM-DD');
};
});
moment를 않는 는, inside moment.js 라고 하는 .formatDate날짜 형식을 지정하는 데 사용할 수 있습니다.
다음은 Angular Material 문서의 샘플을 기반으로 한 CodePen 예제입니다.
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);
};
안부 전해요
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;
};
});
md-datapicker 지시어로 '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);
};
-- md-dialog에서 md-DatePicker를 사용하는 경우 $mdDateLocaleProvider 서비스가 원하는 날짜 형식을 지정하지 않습니다.md-datePicker 날짜를 포맷하려면 md-dialog 컨트롤러에서 $mdDateLocale을 사용해야 합니다.예를 들어 -
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();
});
실행 시 날짜 형식, 월 이름 및 주 이름을 변경하는 것은 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).
로케일의 커스터마이즈의 상세한 것에 대하여는, $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>
「」를 사용합니다.$filtermoment.js@Ian Poston Framer @java dev @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.
저도 같은 문제가 있어서 이 간단한 해결책을 모멘트.js의 도움으로 생각해 냈습니다.나는 사용했다ng-changeAttribute ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★」
HTML 내부:
<md-datepicker ng-model="myDate" ng-change="dateChanged()"></md-datepicker>
컨트롤러 내부:
$scope.dateChanged = function() {
this.myDate = moment(this.myDate).format('YYYY/MM/DD');
}
★★★의 angular-material>= >=5.x.x
다른 커스텀/사전 정의된 날짜 형식을 사용하는 권장 방법은 각도 재료 설명서에 설명되어 있습니다.
모멘트를 사용한 구현 예시날짜 표시 형식을 사용자 정의하고 구문 분석하는 JS:
...
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용 모멘트 라이브러리와 어댑터를 설치해야 합니다.
https://www.npmjs.com/package/angular2-moment
npm install --save angular2-timeout
https://www.npmjs.com/package/ @material-modial-modial-modial-m
npm install --save @material-modial-modial-modial-
크리스티안 웨스터비크의 직책을 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.disc
// set angular material config
app.config(['$mdDateLocaleProvider', function ($mdDateLocaleProvider) {
// this is a global object set inside appConfig.js
$mdDateLocaleProvider.formatDate = appConfig.date.mdFormatDate;
}]);
현지화/정보 등을 다루는 서비스 파일
// 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의 표시값을 라이브로 재포맷할 수 없습니다.모형이 값을 변경할 때만 작동합니다.
angular-material.js의 최신 버전을 사용하는 경우 $mdDateLocale 서비스를 사용합니다.이 코드 샘플은 moment.js 라이브러리를 사용하는 대신 angular의 내장 날짜 필터를 사용합니다.https://docs.angularjs.org/api/ng/filter/date 링크에서 angular의 $filter 서비스를 사용하는 다른 날짜 형식 옵션을 참조하십시오.
// 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");
};
});
하였습니다.$mdDateLocaleProvider프런트 엔드로 포맷합니다. 경우, 과 같은
$filter('date')(this.date, 'MM/dd/yyyy');
컨트롤러에 상기의 것이 있습니다.
내 경우 PlaceHolder everythig가 작동하지 않지만 커스텀 포맷을 사용하면 PlaceHolder가 사라집니다.아래 행은 플레이스 홀더와의 문제를 해결했습니다.
$mdDateLocaleProvider.formatDate = function (date) {
if(date==null)
return "";
var m = moment(date);
return m.isValid() ? m.format('L') : '';
};
언급URL : https://stackoverflow.com/questions/32566416/change-format-of-md-datepicker-in-angular-material-with-momentjs
'programing' 카테고리의 다른 글
| WooCommerce 카트에서 배송을 제거하려면 어떻게 해야 합니까? (0) | 2023.02.26 |
|---|---|
| Cordova 5.0 + cordova-android@4.0으로 업그레이드한 후 Ajax 요청이 실패함 (0) | 2023.02.26 |
| WooCommerce 관리 주문 개요에 주문 메타데이터 추가 (0) | 2023.02.26 |
| WordPress paginate_links - 사용방법 (0) | 2023.02.26 |
| Angular.js 및 ASP넷 MVC 4 (0) | 2023.02.26 |