Skip to content

Commit 3ca6db7

Browse files
rstoenescurstoenescu
committed
refactor: Datetime inhouse mini-library
1 parent ef37f30 commit 3ca6db7

File tree

11 files changed

+472
-196
lines changed

11 files changed

+472
-196
lines changed

‎.eslintrc.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ module.exports = {
2121
'arrow-parens': 0,
2222
'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
2323
'one-var': 0,
24+
'import/first': 0,
2425
'brace-style': [2, 'stroustrup', { 'allowSingleLine': true }]
2526
}
2627
}

‎dev/components/components/chat.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,8 @@
2020
</template>
2121

2222
<script>
23-
import { format } from 'quasar'
24-
const { formatDate } = format
23+
import { date } from 'quasar'
24+
const { format } = date
2525
2626
export default {
2727
data () {
@@ -170,7 +170,7 @@ export default {
170170
text: [this.message],
171171
sent: true,
172172
avatar: '/statics/linux-avatar.png',
173-
stamp: formatDate(new Date(), 'HH:mm')
173+
stamp: format(new Date(), 'HH:mm')
174174
})
175175
}
176176
}

‎dev/components/form/datetime.vue‎

Lines changed: 30 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -34,9 +34,9 @@
3434
</span>
3535
</small>
3636
</p>
37-
<q-datetime v-model="model" type="date"></q-datetime>
37+
<q-datetime v-model="model" type="date" />
3838

39-
<q-datetime simple v-model="model" type="date"></q-datetime>
39+
<q-datetime simple v-model="model" type="date" />
4040

4141
<p class="caption">
4242
Time
@@ -51,34 +51,34 @@
5151
<span class="mat-only">inside of the clock</span>.
5252
</small>
5353
</p>
54-
<q-datetime v-model="model" type="time"></q-datetime>
54+
<q-datetime v-model="model" type="time" />
5555

5656
<p class="caption">Time 24hr Format</p>
57-
<q-datetime v-model="model" type="time" format24h></q-datetime>
57+
<q-datetime v-model="model" type="time" format24h />
5858

5959
<p class="caption">Date & Time</p>
60-
<q-datetime v-model="model" type="datetime"></q-datetime>
60+
<q-datetime v-model="model" type="datetime" />
6161

6262
<p class="caption">With Label</p>
63-
<q-datetime v-model="model" type="date" label="Pick Date"></q-datetime>
63+
<q-datetime v-model="model" type="date" label="Pick Date" />
6464

6565
<p class="caption">With Placeholder</p>
66-
<q-datetime v-model="model" type="date" placeholder="Pick Date"></q-datetime>
66+
<q-datetime v-model="model" type="date" placeholder="Pick Date" />
6767

6868
<p class="caption">With Static Label</p>
69-
<q-datetime v-model="model" type="date" static-label="Party Date"></q-datetime>
69+
<q-datetime v-model="model" type="date" static-label="Party Date" />
7070

7171
<p class="caption">Disabled State</p>
72-
<q-datetime disable v-model="model" type="datetime"></q-datetime>
72+
<q-datetime disable v-model="model" type="datetime" />
7373

7474
<p class="caption">Readonly State</p>
75-
<q-datetime readonly v-model="model" type="datetime"></q-datetime>
75+
<q-datetime readonly v-model="model" type="datetime" />
7676

7777
<p class="caption">Error State</p>
78-
<q-datetime class="has-error" v-model="model" type="datetime"></q-datetime>
78+
<q-datetime class="has-error" v-model="model" type="datetime" />
7979

8080
<p class="caption">Min & Max</p>
81-
<q-datetime type="datetime" v-model="minMaxModel" :min="min" :max="max"></q-datetime>
81+
<q-datetime type="datetime" v-model="minMaxModel" :min="min" :max="max" />
8282

8383
<p class="caption">Inside of a List</p>
8484
<div class="list">
@@ -88,15 +88,15 @@
8888
<q-icon name="access_time" />
8989
</div>
9090
<div class="item-content">
91-
<q-datetime class="full-width" v-model="model" type="time"></q-datetime>
91+
<q-datetime class="full-width" v-model="model" type="time" />
9292
</div>
9393
</div>
9494
<div class="item">
9595
<div class="item-primary">
9696
<q-icon name="update" />
9797
</div>
9898
<div class="item-content row items-baseline">
99-
<q-datetime class="full-width" v-model="model" type="date"></q-datetime>
99+
<q-datetime class="full-width" v-model="model" type="date" />
100100
</div>
101101
</div>
102102
<hr>
@@ -106,7 +106,7 @@
106106
<q-icon name="notifications" />
107107
</div>
108108
<div class="item-content row items-baseline">
109-
<q-datetime class="full-width" v-model="model" type="datetime"></q-datetime>
109+
<q-datetime class="full-width" v-model="model" type="datetime" />
110110
</div>
111111
</div>
112112
</div>
@@ -129,7 +129,7 @@
129129
</span>
130130
</small>
131131
</p>
132-
<q-inline-datetime v-model="model" type="date"></q-inline-datetime>
132+
<q-inline-datetime v-model="model" type="date" />
133133

134134
<p class="caption">
135135
Time
@@ -144,41 +144,43 @@
144144
<span class="mat-only">inside of the clock</span>.
145145
</small>
146146
</p>
147-
<q-inline-datetime v-model="model" type="time"></q-inline-datetime>
147+
<q-inline-datetime v-model="model" type="time" />
148148

149149
<p class="caption">Time 24hr Format</p>
150-
<q-inline-datetime v-model="model" type="time" format24h></q-inline-datetime>
150+
<q-inline-datetime v-model="model" type="time" format24h />
151151

152152
<p class="caption">Date & Time</p>
153-
<q-inline-datetime v-model="model" type="datetime"></q-inline-datetime>
153+
<q-inline-datetime v-model="model" type="datetime" />
154154

155155
<p class="caption">Date - Monday as First</p>
156-
<q-inline-datetime v-model="model" monday-first type="date"></q-inline-datetime>
156+
<q-inline-datetime v-model="model" monday-first type="date" />
157157

158158
<p class="caption">Disabled State</p>
159-
<q-inline-datetime disable v-model="model" type="datetime"></q-inline-datetime>
159+
<q-inline-datetime disable v-model="model" type="datetime" />
160160

161161
<p class="caption">Readonly State</p>
162-
<q-inline-datetime readonly v-model="model" type="datetime"></q-inline-datetime>
163-
162+
<q-inline-datetime readonly v-model="model" type="datetime" />
164163
<p class="caption">Min & Max</p>
165-
<q-inline-datetime type="datetime" v-model="minMaxModel" :min="min" :max="max"></q-inline-datetime>
164+
<q-inline-datetime type="datetime" v-model="minMaxModel" :min="min" :max="max" />
166165
</div>
167166
</div>
168167
</template>
169168

170169
<script>
171-
const day = new Date('2016-10-24T10:40:14.674Z')
170+
import { date } from 'quasar'
171+
172+
const day = '2016-10-24T10:40:14.674Z'
172173
173174
export default {
174175
data () {
175176
return {
176177
// model: '2016-09-18T10:45:00.000Z',
177178
model: undefined,
178179
179-
minMaxModel: day,
180-
min: new Date(day).setDate(day.getDate() - 5),
181-
max: new Date(new Date(day).setHours(day.getHours() + 4)).setMonth(day.getMonth() + 1)
180+
minMaxModel: date.formatDate(day),
181+
182+
min: date.subtractFromDate(day, {days: 5}),
183+
max: date.addToDate(day, {days: 4, month: 1, minutes: 10})
182184
}
183185
}
184186
}

‎package.json‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -47,21 +47,23 @@
4747
"autoprefixer": "^6.5.0",
4848
"babel-core": "^6.17.0",
4949
"babel-eslint": "^7.0.0",
50-
"babel-loader": "^6.2.5",
50+
"babel-loader": "^7.0.0",
5151
"babel-plugin-transform-runtime": "^6.15.0",
5252
"babel-preset-es2015": "^6.16.0",
5353
"babel-preset-es2015-rollup": "^3.0.0",
5454
"babel-preset-stage-2": "^6.17.0",
5555
"colors": "^1.1.2",
5656
"connect-history-api-fallback": "^1.3.0",
57-
"css-loader": "^0.28.0",
57+
"css-loader": "^0.28.1",
5858
"eslint": "^3.7.0",
59-
"eslint-config-standard": "^7.1.0",
59+
"eslint-config-standard": "^10.2.1",
6060
"eslint-friendly-formatter": "^2.0.6",
6161
"eslint-loader": "^1.5.0",
6262
"eslint-plugin-html": "^2.0.0",
63+
"eslint-plugin-import": "^2.2.0",
64+
"eslint-plugin-node": "^4.2.2",
6365
"eslint-plugin-promise": "^3.3.0",
64-
"eslint-plugin-standard": "^2.0.1",
66+
"eslint-plugin-standard": "^3.0.1",
6567
"eventsource-polyfill": "^0.9.6",
6668
"express": "^4.14.0",
6769
"extract-text-webpack-plugin": "^2.0.0-beta.4",
@@ -90,10 +92,10 @@
9092
"stylus-loader": "^3.0.1",
9193
"url-loader": "^0.5.7",
9294
"vue": "^2.3.0",
93-
"vue-loader": "11.1.4",
94-
"vue-router": "^2.0.0",
95-
"vue-style-loader": "^2.0.0",
96-
"vue-template-compiler": "^2.2.6",
95+
"vue-loader": "^12.0.3",
96+
"vue-router": "^2.5.3",
97+
"vue-style-loader": "^3.0.1",
98+
"vue-template-compiler": "^2.3.2",
9799
"webpack": "^2.2.0",
98100
"webpack-dev-middleware": "^1.8.4",
99101
"webpack-hot-middleware": "^2.18.0",

‎src/components/datetime/InlineDatetimeIOS.vue‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,7 @@
104104
import { between } from '../../utils/format'
105105
import { position } from '../../utils/event'
106106
import { css } from '../../utils/dom'
107-
import { isOfSameDate } from '../../utils/date'
107+
import { isSameDate } from '../../utils/date'
108108
import mixin from './datetime-mixin'
109109
110110
export default {
@@ -127,12 +127,12 @@ export default {
127127
},
128128
computed: {
129129
dayMin () {
130-
return this.pmin !== null && isOfSameDate(this.pmin, this.model, 'month')
130+
return this.pmin !== null && isSameDate(this.pmin, this.model, 'month')
131131
? this.pmin.getDate()
132132
: 1
133133
},
134134
dayMax () {
135-
return this.pmax !== null && isOfSameDate(this.pmax, this.model, 'month')
135+
return this.pmax !== null && isSameDate(this.pmax, this.model, 'month')
136136
? this.pmax.getDate()
137137
: this.daysInMonth
138138
},
@@ -144,17 +144,17 @@ export default {
144144
return this.model.getHours()
145145
},
146146
hourMin () {
147-
return this.pmin && isOfSameDate(this.pmin, this.model, 'day') ? this.pmin.getHours() : 0
147+
return this.pmin && isSameDate(this.pmin, this.model, 'day') ? this.pmin.getHours() : 0
148148
},
149149
hourInterval () {
150-
return (this.pmax && isOfSameDate(this.pmax, this.model, 'day') ? this.pmax.getHours() : 23) - this.hourMin + 1
150+
return (this.pmax && isSameDate(this.pmax, this.model, 'day') ? this.pmax.getHours() : 23) - this.hourMin + 1
151151
},
152152
153153
minuteMin () {
154-
return this.pmin && isOfSameDate(this.pmin, this.model, 'hour') ? this.pmin.getMinutes() : 0
154+
return this.pmin && isSameDate(this.pmin, this.model, 'hour') ? this.pmin.getMinutes() : 0
155155
},
156156
minuteInterval () {
157-
return (this.pmax && isOfSameDate(this.pmax, this.model, 'hour') ? this.pmax.getMinutes() : 59) - this.minuteMin + 1
157+
return (this.pmax && isSameDate(this.pmax, this.model, 'hour') ? this.pmax.getMinutes() : 59) - this.minuteMin + 1
158158
},
159159
160160
__monthStyle () {

‎src/components/datetime/InlineDatetimeMat.vue‎

Lines changed: 12 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -214,11 +214,10 @@
214214

215215
<script>
216216
import { height, width, offset, cssTransform } from '../../utils/dom'
217-
import { formatDate } from '../../utils/format'
218217
import { position } from '../../utils/event'
219218
import { QIcon } from '../icon'
220219
import { QBtn } from '../btn'
221-
import { isOfSameDate } from '../../utils/date'
220+
import { formatDate, isSameDate } from '../../utils/date'
222221
import mixin from './datetime-mixin'
223222
import Ripple from '../../directives/ripple'
224223
@@ -280,9 +279,10 @@ export default {
280279
return this.mondayFirst ? 1 : 0
281280
},
282281
headerDayNames () {
282+
const days = this.dayNames.map(day => day.slice(0, 3))
283283
return this.mondayFirst
284-
? this.dayShortNames.slice(1, 7).concat(this.dayShortNames[0])
285-
: this.dayShortNames
284+
? days.slice(1, 7).concat(days[0])
285+
: days
286286
},
287287
288288
dayString () {
@@ -302,13 +302,13 @@ export default {
302302
return Math.max(0, (new Date(this.model.getFullYear(), this.model.getMonth(), 1).getDay() - this.firstDayOfWeek))
303303
},
304304
beforeMinDays () {
305-
if (this.pmin === null || !isOfSameDate(this.pmin, this.model, 'month')) {
305+
if (this.pmin === null || !isSameDate(this.pmin, this.model, 'month')) {
306306
return false
307307
}
308308
return this.pmin.getDate() - 1
309309
},
310310
aferMaxDays () {
311-
if (this.pmax === null || !isOfSameDate(this.pmax, this.model, 'month')) {
311+
if (this.pmax === null || !isSameDate(this.pmax, this.model, 'month')) {
312312
return false
313313
}
314314
return this.daysInMonth - this.maxDay
@@ -317,10 +317,10 @@ export default {
317317
return this.pmax !== null ? this.pmax.getDate() : this.daysInMonth
318318
},
319319
daysInterval () {
320-
let max = this.afterMaxDays === false || this.pmax === null ? 0 : this.daysInMonth - this.pmax.getDate()
321-
if (this.beforeMinDays || max) {
320+
let after = this.pmax === null || this.afterMaxDays === false ? 0 : this.aferMaxDays
321+
if (this.beforeMinDays || after) {
322322
let min = this.beforeMinDays ? this.beforeMinDays + 1 : 1
323-
return Array.apply(null, {length: this.daysInMonth - min - max + 1}).map((day, index) => {
323+
return Array.apply(null, {length: this.daysInMonth - min - after + 1}).map((day, index) => {
324324
return index + min
325325
})
326326
}
@@ -371,16 +371,11 @@ export default {
371371
if (!this.editable) {
372372
return
373373
}
374+
374375
value = this.__parseTypeValue('hour', value)
375376
376-
if (this.format24h) {
377-
value = value % 24
378-
}
379-
else {
380-
value = value % 12
381-
if (!this.am) {
382-
value += 12
383-
}
377+
if (!this.format24h && value < 12 && !this.am) {
378+
value += 12
384379
}
385380
386381
this.model = new Date(this.model.setHours(value))

0 commit comments

Comments
 (0)