2016-11-04 30 views
4

我正在尝试使用ngMaskmaterial datepicker并且无法正常工作。如何在md-datepicker中使用ngMask

任何人,有任何想法如何把它一起工作?

一些ngMask例子: http://candreoliveira.github.io/bower_components/angular-mask/examples/index.html#/

+0

MD-日期选择器的指令将失效,因此将阻止提交如果该值不适合作为有效日期,但是使用掩码强制执行此操作将会很好,至少在桌面上。你可以填写https://github.com/angular/material上的问题报告,并向他们展示这个codepen:http://codepen.io/anon/pen/GNRWQd?editors=1000可悲的是,似乎没有简单的整合 – Sombriks

+0

谢谢@Sombriks给你回复。我按照你的指示开了一个问题。 ** [问题#9976](https://github.com/angular/material/issues/9976)** –

回答

2

怎么是这样的:

(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> 
+0

什么是“R”,该变量未声明 – Higarian

+1

OH对不起,我正在使用http:// ramdajs.com/http://ramdajs.com/ – Daniele

+1

你可以给一个没有Randal的解决方案吗?我不想因为想将掩码放在字段上而放置另一个库。这会有很大的帮助。我试图取代自己,但我有点困惑,看回报声明期待 – Higarian