+
Immediately selection
+
Datepicker dialog could be closed instantly after a date is selected. Date will be selected immediately without any confirm:
+
+
+
Disabled dates
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:
@@ -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
new file mode 100644
index 000000000..7b29dbd01
--- /dev/null
+++ b/docs/app/pages/Components/Datepicker/examples/CloseOnSelectDatepicker.vue
@@ -0,0 +1,14 @@
+
+
+
+
+
+
+
diff --git a/src/components/MdDatepicker/MdDatepicker.vue b/src/components/MdDatepicker/MdDatepicker.vue
index 391628e8d..5da26191d 100644
--- a/src/components/MdDatepicker/MdDatepicker.vue
+++ b/src/components/MdDatepicker/MdDatepicker.vue
@@ -6,7 +6,13 @@
-
+
@@ -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
index 680ac1fe3..fcee3ad64 100644
--- a/src/components/MdDatepicker/MdDatepickerDialog.vue
+++ b/src/components/MdDatepicker/MdDatepickerDialog.vue
@@ -1,6 +1,6 @@
-
+
@@ -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()
+ }
})