+60
-14
lines changedFilter options
+60
-14
lines changed Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
1 1
<example src="./examples/BasicDatepicker.vue" />
2 2
<example src="./examples/LabeledDatepicker.vue" />
3 3
<example src="./examples/CancelOpenDatepicker.vue" />
4 +
<example src="./examples/CloseOnSelectDatepicker.vue" />
4 5
<example src="./examples/DisabledDatesDatepicker.vue" />
5 6 6 7
<template>
@@ -23,6 +24,12 @@
23 24
<code-example title="With initial date selected" :component="examples['cancel-open-datepicker']" />
24 25
</div>
25 26 27 +
<div class="page-container-section">
28 +
<h2>Immediately selection</h2>
29 +
<p>Datepicker dialog could be closed instantly after a date is selected. Date will be selected immediately without any confirm:</p>
30 +
<code-example title="Close dialog on select" :component="examples['close-on-select-datepicker']" />
31 +
</div>
32 + 26 33
<div class="page-container-section">
27 34
<h2>Disabled dates</h2>
28 35
<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 @@
66 73
description: 'Disable the on focus event. Will open only if the user clicks on the icon.',
67 74
defaults: 'true'
68 75
},
76 +
{
77 +
name: 'md-immediately',
78 +
type: 'Boolean',
79 +
description: 'Select the date without confirm and close the dialog immediately.',
80 +
defaults: 'false'
81 +
},
69 82
{
70 83
name: 'md-override-native',
71 84
type: 'Boolean',
@@ -0,0 +1,14 @@
1 +
<template>
2 +
<div>
3 +
<md-datepicker v-model="selectedDate" md-immediately />
4 +
</div>
5 +
</template>
6 + 7 +
<script>
8 +
export default {
9 +
name: 'CloseOnSelectDatepicker',
10 +
data: () => ({
11 +
selectedDate: new Date('2018/03/26')
12 +
})
13 +
}
14 +
</script>
Original file line number Diff line number Diff line change
@@ -6,7 +6,13 @@
6 6
<slot />
7 7 8 8
<keep-alive>
9 -
<md-datepicker-dialog :md-date.sync="selectedDate" :md-disabled-dates="mdDisabledDates" v-if="showDialog" @md-closed="toggleDialog" />
9 +
<md-datepicker-dialog
10 +
v-if="showDialog"
11 +
:md-date.sync="selectedDate"
12 +
:md-disabled-dates="mdDisabledDates"
13 +
:mdImmediately="mdImmediately"
14 +
@md-closed="toggleDialog"
15 +
/>
10 16
</keep-alive>
11 17 12 18
<md-overlay class="md-datepicker-overlay" md-fixed :md-active="showDialog" @click="toggleDialog" />
@@ -44,6 +50,10 @@
44 50
mdOverrideNative: {
45 51
type: Boolean,
46 52
default: true
53 +
},
54 +
mdImmediately: {
55 +
type: Boolean,
56 +
default: false
47 57
}
48 58
},
49 59
data: () => ({
@@ -77,6 +87,8 @@
77 87
if (isValid(parsedDate)) {
78 88
this.selectedDate = parsedDate
79 89
}
90 +
} else {
91 +
this.selectedDate = null
80 92
}
81 93
}
82 94
},
@@ -1,6 +1,6 @@
1 1
<template>
2 2
<md-popover :md-settings="popperSettings" md-active>
3 -
<transition name="md-datepicker-dialog" appear>
3 +
<transition name="md-datepicker-dialog" appear @enter="setContentStyles" @after-leave="resetDate">
4 4
<div class="md-datepicker-dialog" :class="[$mdActiveTheme]">
5 5
<div class="md-datepicker-header">
6 6
<span class="md-datepicker-year-select" :class="{ 'md-selected': currentView === 'year' }" @click="currentView = 'year'">{{ selectedYear }}</span>
@@ -80,7 +80,7 @@
80 80 81 81
<md-dialog-actions class="md-datepicker-body-footer">
82 82
<md-button class="md-primary" @click="onCancel">Cancel</md-button>
83 -
<md-button class="md-primary" @click="onConfirm">Ok</md-button>
83 +
<md-button v-if="!mdImmediately" class="md-primary" @click="onConfirm">Ok</md-button>
84 84
</md-dialog-actions>
85 85
</div>
86 86
</div>
@@ -130,7 +130,11 @@
130 130
},
131 131
props: {
132 132
mdDate: Date,
133 -
mdDisabledDates: [Array, Function]
133 +
mdDisabledDates: [Array, Function],
134 +
mdImmediately: {
135 +
type: Boolean,
136 +
default: false
137 +
}
134 138
},
135 139
data: () => ({
136 140
currentDate: null,
@@ -314,7 +318,11 @@
314 318
selectDate (day) {
315 319
this.currentDate = setDate(this.currentDate, day)
316 320
this.selectedDate = this.currentDate
317 -
this.$emit('update:mdDate', this.selectedDate)
321 + 322 +
if (this.mdImmediately) {
323 +
this.$emit('update:mdDate', this.selectedDate)
324 +
this.closeDialog()
325 +
}
318 326
},
319 327
closeDialog () {
320 328
this.$emit('md-closed')
@@ -326,20 +334,19 @@
326 334
this.closeDialog()
327 335
},
328 336
onConfirm () {
329 -
this.closeDialog()
330 337
this.$emit('update:mdDate', this.selectedDate)
338 +
this.closeDialog()
339 +
},
340 +
resetDate () {
341 +
this.currentDate = this.mdDate || new Date()
342 +
this.selectedDate = this.mdDate
343 +
this.currentView = 'day'
331 344
}
332 345
},
333 346
created () {
334 347
this.setAvailableYears()
335 -
this.currentDate = this.mdDate || new Date()
336 -
this.selectedDate = this.mdDate
337 -
this.currentView = 'day'
338 - 339 -
window.setTimeout(() => {
340 -
this.setContentStyles()
341 -
}, 50)
342 -
},
348 +
this.resetDate()
349 +
}
343 350
})
344 351
</script>
345 352 You can’t perform that action at this time.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4