Skip to content

Commit 3c84e1c

Browse files
darrenfangdarrenfang
committed
refactor code: Use properties object.
1 parent b0cb5c5 commit 3c84e1c

File tree

4 files changed

+241
-166
lines changed

4 files changed

+241
-166
lines changed

‎package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
{
22
"name": "vuetify-datetime-picker",
3-
"version": "2.0.3",
3+
"version": "2.1.0",
44
"description": "DatetimePicker component for Vuetify.js.",
5-
"main": "dist/index.js",
5+
"main": "src/index.js",
66
"scripts": {
77
"dev": "webpack-dev-server --config webpack/webpack.dev.config.js",
88
"build": "webpack --config webpack/webpack.build.config.js --progress --profile --colors",
@@ -51,7 +51,7 @@
5151
"webpack-merge": "^4.2.1"
5252
},
5353
"dependencies": {
54-
"moment": "^2.24.0",
54+
"date-fns": "^2.1.0",
5555
"vue": "^2.6.10",
5656
"vuetify": "^2.0.7"
5757
}

‎src/app.vue‎

Lines changed: 150 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,64 +1,167 @@
11
<template>
22
<v-app dark>
33
<v-container>
4-
<v-layout row justify-center>
5-
<v-flex xs4>
6-
<v-datetime-picker v-model="datetime"></v-datetime-picker>
7-
</v-flex>
8-
</v-layout>
9-
<v-layout row justify-center>
10-
<v-flex xs4>
11-
<v-datetime-picker v-model="datetimeString"></v-datetime-picker>
12-
</v-flex>
13-
</v-layout>
14-
<v-layout row justify-center>
15-
<v-flex xs4>
16-
<v-datetime-picker datetime="2018-01-01 00:00:00" :disabled="true"></v-datetime-picker>
17-
</v-flex>
18-
</v-layout>
19-
<v-layout row justify-center>
20-
<v-flex xs4>
21-
<span class="subheading">Custom Buttons</span>
22-
<v-datetime-picker v-model="datetime">
23-
<template slot="actions" slot-scope="{ parent }">
24-
<v-btn color="error lighten-1" flat @click.native="parent.clearHandler">Cancel</v-btn>
25-
<v-btn color="success darken-1" flat @click="parent.okHandler">Done</v-btn>
26-
</template>
27-
</v-datetime-picker>
28-
</v-flex>
29-
</v-layout>
30-
<v-layout row justify-center>
31-
<v-flex xs4>
32-
<span class="subheading">Custom Icons</span>
33-
<v-datetime-picker v-model="datetime">
34-
<template slot="dateIcon">
35-
<v-icon>fas fa-calendar</v-icon>
36-
</template>
37-
<template slot="timeIcon">
38-
<v-icon>fas fa-clock</v-icon>
39-
</template>
40-
</v-datetime-picker>
41-
</v-flex>
42-
</v-layout>
43-
<v-layout row justify-center>
44-
<v-flex xs4>
45-
<span class="subheading">Select Seconds</span>
46-
<v-datetime-picker v-model="datetime" use-seconds></v-datetime-picker>
47-
</v-flex>
48-
</v-layout>
4+
<div class="mb-5">
5+
Get Source Code:
6+
<a href="https://github.com/darrenfang/vuetify-datetime-picker/blob/master/src/app.vue" target="_blank">
7+
https://github.com/darrenfang/vuetify-datetime-picker/blob/master/src/app.vue
8+
</a>
9+
</div>
10+
11+
<v-row align="center">
12+
<v-expansion-panels multiple>
13+
<v-expansion-panel>
14+
<v-expansion-panel-header>Null Value</v-expansion-panel-header>
15+
<v-expansion-panel-content>
16+
<v-flex xs4>
17+
<v-datetime-picker v-model="nullDatetime"></v-datetime-picker>
18+
</v-flex>
19+
</v-expansion-panel-content>
20+
</v-expansion-panel>
21+
22+
<v-expansion-panel>
23+
<v-expansion-panel-header>Init with Date</v-expansion-panel-header>
24+
<v-expansion-panel-content>
25+
<v-flex xs4>
26+
<v-datetime-picker v-model="datetime"></v-datetime-picker>
27+
</v-flex>
28+
</v-expansion-panel-content>
29+
</v-expansion-panel>
30+
31+
<v-expansion-panel>
32+
<v-expansion-panel-header>Init with String</v-expansion-panel-header>
33+
<v-expansion-panel-content>
34+
<v-flex xs4>
35+
<v-datetime-picker v-model="datetimeString"></v-datetime-picker>
36+
</v-flex>
37+
</v-expansion-panel-content>
38+
</v-expansion-panel>
39+
40+
<v-expansion-panel>
41+
<v-expansion-panel-header>Loading</v-expansion-panel-header>
42+
<v-expansion-panel-content>
43+
<v-flex xs4>
44+
<v-datetime-picker loading></v-datetime-picker>
45+
</v-flex>
46+
</v-expansion-panel-content>
47+
</v-expansion-panel>
48+
49+
<v-expansion-panel>
50+
<v-expansion-panel-header>Custom Loading</v-expansion-panel-header>
51+
<v-expansion-panel-content>
52+
<v-flex xs4>
53+
<v-datetime-picker loading>
54+
<template slot="progress">
55+
<v-progress-linear color="red" indeterminate absolute height="7"></v-progress-linear>
56+
</template>
57+
</v-datetime-picker>
58+
</v-flex>
59+
</v-expansion-panel-content>
60+
</v-expansion-panel>
61+
62+
<v-expansion-panel>
63+
<v-expansion-panel-header>Disabled</v-expansion-panel-header>
64+
<v-expansion-panel-content>
65+
<v-flex xs4>
66+
<v-datetime-picker v-model="datetime" disabled></v-datetime-picker>
67+
</v-flex>
68+
</v-expansion-panel-content>
69+
</v-expansion-panel>
70+
71+
<v-expansion-panel>
72+
<v-expansion-panel-header>Custom Actions</v-expansion-panel-header>
73+
<v-expansion-panel-content>
74+
<v-flex xs4>
75+
<v-datetime-picker v-model="datetime">
76+
<template slot="actions" slot-scope="{ parent }">
77+
<v-btn color="error lighten-1" @click.native="parent.clearHandler">Cancel</v-btn>
78+
<v-btn color="success darken-1" @click="parent.okHandler">Done</v-btn>
79+
</template>
80+
</v-datetime-picker>
81+
</v-flex>
82+
</v-expansion-panel-content>
83+
</v-expansion-panel>
84+
85+
<v-expansion-panel>
86+
<v-expansion-panel-header>Custom Icons</v-expansion-panel-header>
87+
<v-expansion-panel-content>
88+
<v-flex xs4>
89+
<v-datetime-picker v-model="datetime">
90+
<template slot="dateIcon">
91+
<v-icon>fas fa-calendar</v-icon>
92+
</template>
93+
<template slot="timeIcon">
94+
<v-icon>fas fa-clock</v-icon>
95+
</template>
96+
</v-datetime-picker>
97+
</v-flex>
98+
</v-expansion-panel-content>
99+
</v-expansion-panel>
100+
101+
<v-expansion-panel>
102+
<v-expansion-panel-header>Custom Format</v-expansion-panel-header>
103+
<v-expansion-panel-content>
104+
<v-flex xs4>
105+
<v-datetime-picker v-model="formattedDatetime" date-format="MM/dd/yyyy"></v-datetime-picker>
106+
</v-flex>
107+
</v-expansion-panel-content>
108+
</v-expansion-panel>
109+
110+
<v-expansion-panel>
111+
<v-expansion-panel-header>Use Seconds</v-expansion-panel-header>
112+
<v-expansion-panel-content>
113+
<v-alert type="warning"> You should set <code>time-format</code>. </v-alert>
114+
<v-flex xs4>
115+
<v-datetime-picker
116+
v-model="datetime"
117+
:time-picker-props="timeProps"
118+
time-format="HH:mm:ss"
119+
></v-datetime-picker>
120+
</v-flex>
121+
</v-expansion-panel-content>
122+
</v-expansion-panel>
123+
124+
<v-expansion-panel>
125+
<v-expansion-panel-header>Custom Properties</v-expansion-panel-header>
126+
<v-expansion-panel-content>
127+
<v-alert type="warning"> You should set <code>time-format</code>. </v-alert>
128+
<v-flex xs4>
129+
<v-datetime-picker
130+
v-model="datetime"
131+
:text-field-props="textFieldProps"
132+
:date-picker-props="dateProps"
133+
:time-picker-props="timeProps"
134+
time-format="HH:mm:ss"
135+
></v-datetime-picker>
136+
</v-flex>
137+
</v-expansion-panel-content>
138+
</v-expansion-panel>
139+
</v-expansion-panels>
140+
</v-row>
49141
</v-container>
50142
</v-app>
51143
</template>
52144

53145
<script>
54-
import moment from 'moment'
55146
import '@fortawesome/fontawesome-free/css/all.css'
56147
57148
export default {
58149
data() {
59150
return {
151+
nullDatetime: null,
60152
datetime: new Date(),
61-
datetimeString: moment().format('YYYY-MM-DD HH:mm:ss')
153+
datetimeString: '2019-01-01 12:00',
154+
formattedDatetime: '09/01/2019 12:00',
155+
textFieldProps: {
156+
appendIcon: 'event'
157+
},
158+
dateProps: {
159+
headerColor: 'red'
160+
},
161+
timeProps: {
162+
useSeconds: true,
163+
ampmInTitle: true
164+
}
62165
}
63166
}
64167
}

0 commit comments

Comments
 (0)