diff --git a/src/lib/input/input.spec.ts b/src/lib/input/input.spec.ts
index d1591c615210..fe7ee76d5d33 100644
--- a/src/lib/input/input.spec.ts
+++ b/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: ``})
class MdInputWithTabindex { }
-@Component({template: ``})
-class MdInputDateTestController {
+@Component({template:
+ ``})
+class MdInputWithMask {
placeholder: string = '';
}
diff --git a/src/lib/input/input.ts b/src/lib/input/input.ts
index 3d8b10a3c613..8e8b84a62653 100644
--- a/src/lib/input/input.ts
+++ b/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;
}