Feature: MdDatePicker add 'md-disabled-input' option

docs/app/pages/Components/Datepicker/Datepicker.vue

@@ -4,6 +4,7 @@
 <example src="./examples/CancelOpenDatepicker.vue" />
 <example src="./examples/CloseOnSelectDatepicker.vue" />
 <example src="./examples/DisabledDatesDatepicker.vue" />
+<example src="./examples/DisabledInputDatepicker.vue" />
 
 <template>
   <page-container centered :title="$t('pages.datepicker.title')">
@@ -42,6 +43,12 @@
       <p>Sometimes you may need to disable certain dates from being selected. Let's suppose that you want to let the user select only week days:</p>
       <code-example title="No weekends available" :component="examples['disabled-dates-datepicker']" />
 
+      <div class="page-container-section">
+        <h2 id="disabledInput">Disabled input</h2>
+        <p>Forbid manual entering to input element. The only way to choose date is interacting with dialog:</p>
+        <code-example title="Disabled input" :component="examples['disabled-input-datepicker']" />
+      </div>
+
       <api-item title="API - md-datepicker">
         <p>All the following options can be applied to the md-datepicker component:</p>
 
@@ -103,6 +110,12 @@
             type: 'Number',
             description: 'Debounces the conversion of plaintext into a date object. Set to a longer time if your users type slowly, or shorter if your users type really fast.',
             defaults: 1000
+          },
+          {
+            name: 'md-disabled-input',
+            type: 'Boolean',
+            description: 'Forbid manual entering to input element. The only way to choose date is interacting with dialog.',
+            defaults: 'false'
           }
         ]
       },
@@ -123,4 +136,4 @@
       }
     })
   }
-</script>
+</script>

docs/app/pages/Components/Datepicker/examples/DisabledInputDatepicker.vue

@@ -0,0 +1,14 @@
+<template>
+  <div>
+    <md-datepicker v-model="selectedDate" :md-disabled-input="true" />
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'DisabledInputDatepicker',
+    data: () => ({
+      selectedDate: new Date('2018/03/26')
+    })
+  }
+</script>

src/components/MdDatepicker/MdDatepicker.vue

@@ -1,7 +1,18 @@
 <template>
-  <md-field :class="['md-datepicker', { 'md-native': !mdOverrideNative }]" :md-clearable="mdClearable" @md-clear="onClear">
+  <md-field
+      :class="['md-datepicker', { 'md-native': !mdOverrideNative, 'md-disabled-input': mdDisabledInput }]"
+      :md-clearable="mdClearable"
+      @md-clear="onClear"
+    >
     <md-date-icon class="md-date-icon" @click.native="toggleDialog" />
-    <md-input :type="type" ref="input" v-model="inputDate" @focus.native="onFocus" :pattern="pattern" />
+    <md-input
+      :type="type"
+      ref="input"
+      v-model="inputDate"
+      @focus.native="onFocus"
+      :pattern="pattern"
+      :readonly="mdDisabledInput"
+    />
 
     <slot />
 
@@ -74,6 +85,10 @@
       mdPlacement: {
         type: String,
         default: 'bottom-start'
+      },
+      mdDisabledInput: {
+        type: Boolean,
+        default: false
       }
     },
     data: () => ({
@@ -260,6 +275,12 @@
       }
     }
 
+    &.md-disabled-input {
+      input {
+        cursor: pointer;
+      }
+    }
+
     .md-date-icon {
       cursor: pointer;
     }
@@ -270,4 +291,4 @@
       display: none;
     }
   }
-</style>
+</style>