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
vuematerial · Dec 19, 2017 · 1cfaf3c · 1cfaf3c
1 parent 843056d
commit 1cfaf3c
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 3 deletions.
diff --git a/docs/app/pages/Components/Datepicker/Datepicker.vue b/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'
           }
         ]
       }

diff --git a/src/components/MdDatepicker/MdDatepicker.vue b/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()