Skip to content

Commit 2fe31b5

Browse files
committed
feat(docs): QDate review
1 parent 6a10a3f commit 2fe31b5

23 files changed

+219
-199
lines changed

docs/src/examples/QDate/Basic.vue

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,14 @@
11
<template>
2-
<div class="q-pa-md q-gutter-md">
3-
<div class="row justify-center">
2+
<div class="q-pa-md">
3+
<div class="q-gutter-md row items-start">
44
<q-date
55
v-model="date"
66
/>
7+
8+
<q-date
9+
v-model="date"
10+
minimal
11+
/>
712
</div>
813
</div>
914
</template>

docs/src/examples/QDate/Color.vue

Lines changed: 6 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,15 @@
11
<template>
2-
<div class="q-pa-md q-gutter-md">
3-
<div class="row justify-center">
2+
<div class="q-pa-md">
3+
<div class="q-gutter-md">
44
<q-date
55
v-model="date"
6-
color="secondary"
6+
color="orange"
77
/>
8-
</div>
9-
<div class="row justify-center">
10-
<q-date
11-
v-model="date"
12-
color="orange-7"
13-
/>
14-
</div>
15-
<div class="row justify-center">
16-
<q-date
17-
v-model="date"
18-
color="blue-grey-7"
19-
/>
20-
</div>
21-
<div class="row justify-center">
8+
229
<q-date
2310
v-model="date"
24-
color="purple-3"
11+
color="yellow"
12+
text-color="black"
2513
/>
2614
</div>
2715
</div>

docs/src/examples/QDate/Dark.vue

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,17 @@
11
<template>
22
<div class="q-pa-md bg-grey-10 text-white">
3-
<div class="row justify-center">
3+
<div class="q-gutter-md">
44
<q-date
55
v-model="date"
66
dark
77
/>
8+
9+
<q-date
10+
v-model="date"
11+
color="orange"
12+
text-color="black"
13+
dark
14+
/>
815
</div>
916
</div>
1017
</template>

docs/src/examples/QDate/DefaultYearMonth.vue

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,9 @@
11
<template>
2-
<div class="q-pa-md q-gutter-md">
3-
<div class="row justify-center">
4-
<q-date
5-
v-model="date"
6-
default-year-month="1964/08"
7-
/>
8-
</div>
2+
<div class="q-pa-md">
3+
<q-date
4+
v-model="date"
5+
default-year-month="1964/08"
6+
/>
97
</div>
108
</template>
119

docs/src/examples/QDate/Disable.vue

Lines changed: 0 additions & 20 deletions
This file was deleted.

docs/src/examples/QDate/Readonly.vue renamed to docs/src/examples/QDate/DisableReadonly.vue

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,11 @@
11
<template>
2-
<div class="q-pa-md q-gutter-md">
3-
<div class="row justify-center">
2+
<div class="q-pa-md">
3+
<div class="q-gutter-md">
4+
<q-date
5+
v-model="date"
6+
disable
7+
/>
8+
49
<q-date
510
v-model="date"
611
readonly

docs/src/examples/QDate/EventColor.vue

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
11
<template>
2-
<div class="q-pa-md q-gutter-md">
3-
<div class="row justify-center">
2+
<div class="q-pa-md">
3+
<div class="q-gutter-md">
44
<q-date
55
v-model="date"
66
:events="events"
77
:event-color="(date) => date[9] % 2 === 0 ? 'teal' : 'orange'"
88
/>
9-
</div>
10-
<div class="row justify-center">
9+
1110
<q-date
1211
v-model="date"
1312
:events="eventsFn"
@@ -25,6 +24,7 @@ export default {
2524
events: ['2019/02/01', '2019/02/05', '2019/02/06', '2019/02/09', '2019/02/23']
2625
}
2726
},
27+
2828
methods: {
2929
eventsFn (date) {
3030
if (date === '2019/02/01' ||

docs/src/examples/QDate/Events.vue

Lines changed: 6 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
11
<template>
2-
<div class="q-pa-md q-gutter-md">
3-
<div class="row justify-center">
2+
<div class="q-pa-md">
3+
<div class="q-gutter-md">
44
<q-date
55
v-model="date"
66
:events="events"
77
/>
8-
</div>
9-
<div class="row justify-center">
8+
109
<q-date
1110
v-model="date"
1211
:events="eventsFn"
@@ -23,16 +22,11 @@ export default {
2322
events: ['2019/02/01', '2019/02/05', '2019/02/06', '2019/02/09', '2019/02/23']
2423
}
2524
},
25+
2626
methods: {
2727
eventsFn (date) {
28-
if (date === '2019/02/01' ||
29-
date === '2019/02/05' ||
30-
date === '2019/02/06' ||
31-
date === '2019/02/09' ||
32-
date === '2019/02/23') {
33-
return true
34-
}
35-
return false
28+
const parts = date.split('/')
29+
return parts[2] % 2 === 0
3630
}
3731
}
3832
}

docs/src/examples/QDate/FirstDayOfWeek.vue

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,9 @@
11
<template>
2-
<div class="q-pa-md q-gutter-md">
3-
<div class="row justify-center">
4-
<q-date
5-
v-model="date"
6-
first-day-of-week="1"
7-
/>
8-
</div>
2+
<div class="q-pa-md">
3+
<q-date
4+
v-model="date"
5+
first-day-of-week="1"
6+
/>
97
</div>
108
</template>
119

docs/src/examples/QDate/Input.vue

Lines changed: 8 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,12 @@
11
<template>
2-
<div class="q-pa-md q-gutter-md">
3-
<div class="row justify-center">
4-
<q-input filled v-model="date" mask="date" :rules="['date']">
5-
<q-icon slot="append" name="event" class="cursor-pointer">
6-
<q-popup-proxy>
7-
<q-date
8-
v-model="date"
9-
/>
10-
</q-popup-proxy>
11-
</q-icon>
12-
</q-input>
13-
</div>
2+
<div class="q-pa-md" style="max-width: 300px">
3+
<q-input filled v-model="date" mask="date" :rules="['date']">
4+
<q-icon slot="append" name="event" class="cursor-pointer">
5+
<q-popup-proxy>
6+
<q-date v-model="date" />
7+
</q-popup-proxy>
8+
</q-icon>
9+
</q-input>
1410
</div>
1511
</template>
1612

0 commit comments

Comments
 (0)