fix(input): prevent overlapping placeholder on inputs with native masking

Prevents the Material placeholder overlapping with native input masking (e.g. on `input[type="time"]`.
Previously, this was hardcoded for `date`, however it didn't take into account that not all browsers support `date` inputs.
This change runs a feature test on each of the types that should have input masking and only triggers the special behavior if the type is supported.

Fixes #1853.

Author: crisbeto

src/lib/input/input.spec.ts

@@ -5,7 +5,7 @@ import {
 import {Component} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {By} from '@angular/platform-browser';
-import {MdInput, MdInputModule} from './input';
+import {MdInput, MdInputModule, TYPES_WITH_MASK} from './input';
 
 function isInternetExplorer11() {
     return 'ActiveXObject' in window;
@@ -53,7 +53,7 @@ describe('MdInput', function () {
         MdInputWithMin,
         MdInputWithStep,
         MdInputWithTabindex,
-        MdInputDateTestController,
+        MdInputWithMask,
         MdInputTextTestController,
         MdInputPasswordTestController,
         MdInputNumberTestController,
@@ -80,11 +80,11 @@ describe('MdInput', function () {
         .toBe(true, 'Expected MdInput to default to having floating placeholders turned on');
   });
 
-  it('should not be treated as empty if type is date', () => {
-    if (isInternetExplorer11()) {
+  it('should not be treated as empty if the input has native masking', () => {
+    if (!TYPES_WITH_MASK.length) {
       return;
     }
-    let fixture = TestBed.createComponent(MdInputDateTestController);
+    let fixture = TestBed.createComponent(MdInputWithMask);
     fixture.componentInstance.placeholder = 'Placeholder';
     fixture.detectChanges();
 
@@ -787,8 +787,9 @@ class MdInputWithStep { }
 @Component({template: `<md-input [tabindex]="tabIndex"></md-input>`})
 class MdInputWithTabindex { }
 
-@Component({template: `<md-input type="date" [placeholder]="placeholder"></md-input>`})
-class MdInputDateTestController {
+@Component({template:
+    `<md-input type="${TYPES_WITH_MASK[0] || 'text'}" [placeholder]="placeholder"></md-input>`})
+class MdInputWithMask {
   placeholder: string = '';
 }
 

src/lib/input/input.ts

@@ -40,6 +40,18 @@ const MD_INPUT_INVALID_INPUT_TYPE = [
   'checkbox',
 ];
 
+let featureTestInput: HTMLInputElement = document.createElement('input');
+
+/** Native input types, supported by the current browser, that have input masking. */
+export const TYPES_WITH_MASK = [
+  'range', 'date', 'month', 'week', 'time', 'datetime', 'datetime-local'
+].filter(value => {
+  featureTestInput.setAttribute('type', value);
+  return featureTestInput.type === value;
+});
+
+featureTestInput = null;
+
 
 let nextUniqueId = 0;
 
@@ -139,7 +151,10 @@ export class MdInput implements ControlValueAccessor, AfterContentInit, OnChange
 
   /** Readonly properties. */
   get focused() { return this._focused; }
-  get empty() { return (this._value == null || this._value === '') && this.type !== 'date'; }
+  get empty() {
+    return (this._value == null || this._value === '') &&
+           TYPES_WITH_MASK.indexOf(this.type) === -1;
+  }
   get characterCount(): number {
     return this.empty ? 0 : ('' + this._value).length;
   }