feat(MdDatepicker): override browser native pickers (#1270)

* feat(MdDatepicker): override browser native pickers

* docs(MdDatepicker): add md-override-native prop

* docs(MdDatepicker): remove note about firefox

* refactor(MdDatepicker): remove nested statement

Author: Samuell1

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

@@ -7,7 +7,6 @@
   <page-container centered :title="$t('pages.datepicker.title')">
     <div class="page-container-section">
       <p>Datepickers use a dialog window and provide a simple way to select a single value from a pre-determined set. The component can have disabled dates and it's really easy to use.</p>
-      <note-block alert>The datepicker dialog is disabled in Firefox, because it have a built-in Datepicker on desktop.</note-block>
     </div>
 
     <div class="page-container-section">
@@ -65,6 +64,12 @@
             type: 'Boolean',
             description: 'Disable the on focus event. Will open only if the user clicks on the icon.',
             defaults: 'true'
+          },
+          {
+            name: 'md-override-native',
+            type: 'Boolean',
+            description: 'Override native browser pickers by changing type of input to text.',
+            defaults: 'true'
           }
         ]
       }

src/components/MdDatepicker/MdDatepicker.vue

@@ -1,7 +1,7 @@
 <template>
   <md-field class="md-datepicker">
     <md-date-icon class="md-date-icon" @click.native="toggleDialog" />
-    <md-input type="date" ref="input" v-model="modelDate" @focus.native="onFocus" pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}" />
+    <md-input :type="type" ref="input" v-model="modelDate" @focus.native="onFocus" pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}" />
 
     <slot />
 
@@ -40,13 +40,24 @@
       mdOpenOnFocus: {
         type: Boolean,
         default: true
+      },
+      mdOverrideNative: {
+        type: Boolean,
+        default: true
       }
     },
     data: () => ({
       showDialog: false,
       modelDate: null,
       selectedDate: null
     }),
+    computed: {
+      type () {
+        return this.mdOverrideNative
+          ? 'text'
+          : 'date'
+      }
+    },
     watch: {
       selectedDate (selectedDate) {
         if (selectedDate) {
@@ -71,7 +82,7 @@
     },
     methods: {
       toggleDialog () {
-        if (!isFirefox) {
+        if (!isFirefox || this.mdOverrideNative) {
           this.showDialog = !this.showDialog
         } else {
           this.$refs.input.$el.click()