feat(MdDatepicker): add immediately option (#1607)

* feat(MdDatepicker): add immediately option click to select date without confirm and close the dialog immediately fix #1606 * fix(MdDatepicker): hide confirm button when mdImmediately is on
vuematerial · Mar 27, 2018 · f62ec6a · f62ec6a
1 parent 7259038
commit f62ec6a
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 14 deletions.
diff --git a/docs/app/pages/Components/Datepicker/Datepicker.vue b/docs/app/pages/Components/Datepicker/Datepicker.vue
@@ -1,6 +1,7 @@
 <example src="./examples/BasicDatepicker.vue" />
 <example src="./examples/LabeledDatepicker.vue" />
 <example src="./examples/CancelOpenDatepicker.vue" />
+<example src="./examples/CloseOnSelectDatepicker.vue" />
 <example src="./examples/DisabledDatesDatepicker.vue" />
 
 <template>
@@ -23,6 +24,12 @@
       <code-example title="With initial date selected" :component="examples['cancel-open-datepicker']" />
     </div>
 
+    <div class="page-container-section">
+      <h2>Immediately selection</h2>
+      <p>Datepicker dialog could be closed instantly after a date is selected. Date will be selected immediately without any confirm:</p>
+      <code-example title="Close dialog on select" :component="examples['close-on-select-datepicker']" />
+    </div>
+
     <div class="page-container-section">
       <h2>Disabled dates</h2>
       <p>Sometimes you may need to disable certain dates from being selected. Let's suppose that you only want to let user to select work days:</p>
@@ -66,6 +73,12 @@
             description: 'Disable the on focus event. Will open only if the user clicks on the icon.',
             defaults: 'true'
           },
+          {
+            name: 'md-immediately',
+            type: 'Boolean',
+            description: 'Select the date without confirm and close the dialog immediately.',
+            defaults: 'false'
+          },
           {
             name: 'md-override-native',
             type: 'Boolean',

diff --git a/docs/app/pages/Components/Datepicker/examples/CloseOnSelectDatepicker.vue b/docs/app/pages/Components/Datepicker/examples/CloseOnSelectDatepicker.vue
@@ -0,0 +1,14 @@
+<template>
+  <div>
+    <md-datepicker v-model="selectedDate" md-immediately />
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'CloseOnSelectDatepicker',
+    data: () => ({
+      selectedDate: new Date('2018/03/26')
+    })
+  }
+</script>
diff --git a/src/components/MdDatepicker/MdDatepicker.vue b/src/components/MdDatepicker/MdDatepicker.vue
@@ -6,7 +6,13 @@
     <slot />
 
     <keep-alive>
-      <md-datepicker-dialog :md-date.sync="selectedDate" :md-disabled-dates="mdDisabledDates" v-if="showDialog" @md-closed="toggleDialog" />
+      <md-datepicker-dialog
+        v-if="showDialog"
+        :md-date.sync="selectedDate"
+        :md-disabled-dates="mdDisabledDates"
+        :mdImmediately="mdImmediately"
+        @md-closed="toggleDialog"
+      />
     </keep-alive>
 
     <md-overlay class="md-datepicker-overlay" md-fixed :md-active="showDialog" @click="toggleDialog" />
@@ -44,6 +50,10 @@
       mdOverrideNative: {
         type: Boolean,
         default: true
+      },
+      mdImmediately: {
+        type: Boolean,
+        default: false
       }
     },
     data: () => ({
@@ -77,6 +87,8 @@
           if (isValid(parsedDate)) {
             this.selectedDate = parsedDate
           }
+        } else {
+          this.selectedDate = null
         }
       }
     },

diff --git a/src/components/MdDatepicker/MdDatepickerDialog.vue b/src/components/MdDatepicker/MdDatepickerDialog.vue
@@ -1,6 +1,6 @@
 <template>
   <md-popover :md-settings="popperSettings" md-active>
-    <transition name="md-datepicker-dialog" appear>
+    <transition name="md-datepicker-dialog" appear @enter="setContentStyles" @after-leave="resetDate">
       <div class="md-datepicker-dialog" :class="[$mdActiveTheme]">
         <div class="md-datepicker-header">
           <span class="md-datepicker-year-select" :class="{ 'md-selected': currentView === 'year' }" @click="currentView = 'year'">{{ selectedYear }}</span>
@@ -80,7 +80,7 @@
 
           <md-dialog-actions class="md-datepicker-body-footer">
             <md-button class="md-primary" @click="onCancel">Cancel</md-button>
-            <md-button class="md-primary" @click="onConfirm">Ok</md-button>
+            <md-button v-if="!mdImmediately" class="md-primary" @click="onConfirm">Ok</md-button>
           </md-dialog-actions>
         </div>
       </div>
@@ -130,7 +130,11 @@
     },
     props: {
       mdDate: Date,
-      mdDisabledDates: [Array, Function]
+      mdDisabledDates: [Array, Function],
+      mdImmediately: {
+        type: Boolean,
+        default: false
+      }
     },
     data: () => ({
       currentDate: null,
@@ -314,7 +318,11 @@
       selectDate (day) {
         this.currentDate = setDate(this.currentDate, day)
         this.selectedDate = this.currentDate
-        this.$emit('update:mdDate', this.selectedDate)
+
+        if (this.mdImmediately) {
+          this.$emit('update:mdDate', this.selectedDate)
+          this.closeDialog()
+        }
       },
       closeDialog () {
         this.$emit('md-closed')
@@ -326,20 +334,19 @@
         this.closeDialog()
       },
       onConfirm () {
-        this.closeDialog()
         this.$emit('update:mdDate', this.selectedDate)
+        this.closeDialog()
+      },
+      resetDate () {
+        this.currentDate = this.mdDate || new Date()
+        this.selectedDate = this.mdDate
+        this.currentView = 'day'
       }
     },
     created () {
       this.setAvailableYears()
-      this.currentDate = this.mdDate || new Date()
-      this.selectedDate = this.mdDate
-      this.currentView = 'day'
-
-      window.setTimeout(() => {
-        this.setContentStyles()
-      }, 50)
-    },
+      this.resetDate()
+    }
   })
 </script>