如何在md-datepicker中使用ngMask
问题描述:
我正在尝试使用ngMask和material datepicker并且无法正常工作。如何在md-datepicker中使用ngMask
任何人,有任何想法如何把它一起工作?
一些ngMask例子: http://candreoliveira.github.io/bower_components/angular-mask/examples/index.html#/
答
怎么是这样的:
(function() {
'use strict';
/**
* Setup a custom date formatter, I'm using moment for example
*/
angular
.module('awesomemodule')
.constant('DEFAULT_DATE_FORMAT', 'DD/MM/YYYY')
.config(['DEFAULT_DATE_FORMAT', '$mdDateLocaleProvider', dateConfig]);
function dateConfig (DEFAULT_DATE_FORMAT, $mdDateLocaleProvider) {
$mdDateLocaleProvider.formatDate = osDateFormatter;
function osDateFormatter(date) {
if (!date) {
date = new Date();
}
return moment(date).format(DEFAULT_DATE_FORMAT);
}
}
})()
(function() {
'use strict';
/**
* Decorate the mdDatepickerDirective to add ngMask
*/
angular
.module('awesomemodule')
.config(['$provide', checkForNgMask]);
function checkForNgMask ($provide) {
$provide.decorator('mdDatepickerDirective', function ($delegate) {
var directive = $delegate[0];
var template = directive.template;
directive.template = function (tElement, tAttrs) {
var originalTemplate = template.apply(this, arguments);
if (R.has('osMask', tAttrs)) {
var element = angular.element(originalTemplate);
element.find('input').attr('mask', tAttrs.osMask);
element.find('input').attr('ng-model', "ctrl.dateInput");//ng-model is required by ngMask
return R.map(R.prop('outerHTML'), R.values(element)).join("");
}
return originalTemplate;
};
return $delegate;
});
}
})();
而且使用这样
<md-datepicker ng-model="myAwesomeModel" os-mask="3?9/19/9999"></md-datepicker>
MD-日期选择器的指令将失效,因此将阻止提交如果该值不适合作为有效日期,但是使用掩码强制执行此操作将会很好,至少在桌面上。你可以填写https://github.com/angular/material上的问题报告,并向他们展示这个codepen:http://codepen.io/anon/pen/GNRWQd?editors=1000可悲的是,似乎没有简单的整合 – Sombriks
谢谢@Sombriks给你回复。我按照你的指示开了一个问题。 ** [问题#9976](https://github.com/angular/material/issues/9976)** –