Skip to content

Commit b5b88f4

Browse files
author
Charlie Kassel
committed
change naming of date to represent the current page
1 parent 7813c6d commit b5b88f4

File tree

4 files changed

+138
-154
lines changed

4 files changed

+138
-154
lines changed

‎src/components/Datepicker.vue‎

Lines changed: 78 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -23,12 +23,12 @@
2323
<span
2424
@click="previousMonth"
2525
class="prev"
26-
v-bind:class="{ 'disabled' : previousMonthDisabled(currDate) }">&lt;</span>
26+
v-bind:class="{ 'disabled' : previousMonthDisabled(pageDate) }">&lt;</span>
2727
<span @click="showMonthCalendar" class="up">{{ currMonthName }} {{ currYear }}</span>
2828
<span
2929
@click="nextMonth"
3030
class="next"
31-
v-bind:class="{ 'disabled' : nextMonthDisabled(currDate) }">&gt;</span>
31+
v-bind:class="{ 'disabled' : nextMonthDisabled(pageDate) }">&gt;</span>
3232
</header>
3333
<span class="cell day-header" v-for="d in daysOfWeek">{{ d }}</span>
3434
<span class="cell day blank" v-for="d in blankDays"></span><!--
@@ -45,12 +45,12 @@
4545
<span
4646
@click="previousYear"
4747
class="prev"
48-
v-bind:class="{ 'disabled' : previousYearDisabled(currDate) }">&lt;</span>
49-
<span @click="showYearCalendar" class="up">{{ getYear() }}</span>
48+
v-bind:class="{ 'disabled' : previousYearDisabled(pageDate) }">&lt;</span>
49+
<span @click="showYearCalendar" class="up">{{ getPageYear() }}</span>
5050
<span
5151
@click="nextYear"
5252
class="next"
53-
v-bind:class="{ 'disabled' : nextYearDisabled(currDate) }">&gt;</span>
53+
v-bind:class="{ 'disabled' : nextYearDisabled(pageDate) }">&gt;</span>
5454
</header>
5555
<span class="cell month"
5656
v-for="month in months"
@@ -63,10 +63,10 @@
6363
<div class="vdp-datepicker__calendar" v-show="showYearView" v-bind:style="calendarStyle">
6464
<header>
6565
<span @click="previousDecade" class="prev"
66-
v-bind:class="{ 'disabled' : previousDecadeDisabled(currDate) }">&lt;</span>
67-
<span>{{ getDecade() }}</span>
66+
v-bind:class="{ 'disabled' : previousDecadeDisabled(pageDate) }">&lt;</span>
67+
<span>{{ getPageDecade() }}</span>
6868
<span @click="nextDecade" class="next"
69-
v-bind:class="{ 'disabled' : nextMonthDisabled(currDate) }">&gt;</span>
69+
v-bind:class="{ 'disabled' : nextMonthDisabled(pageDate) }">&gt;</span>
7070
</header>
7171
<span
7272
class="cell year"
@@ -165,7 +165,7 @@ export default {
165165
* This represents the first day of the current viewing month
166166
* {Number}
167167
*/
168-
currDate: new Date(new Date().getFullYear(), new Date().getMonth(), 1).getTime(),
168+
pageDate: new Date(new Date().getFullYear(), new Date().getMonth(), 1, new Date().getHours(), new Date().getMinutes()).getTime(),
169169
/*
170170
* Selected Date
171171
* {Date}
@@ -200,11 +200,11 @@ export default {
200200
return DateLanguages.translations[this.language]
201201
},
202202
currMonthName () {
203-
const d = new Date(this.currDate)
203+
const d = new Date(this.pageDate)
204204
return DateUtils.getMonthNameAbbr(d.getMonth(), this.translation.months.abbr)
205205
},
206206
currYear () {
207-
const d = new Date(this.currDate)
207+
const d = new Date(this.pageDate)
208208
return d.getFullYear()
209209
},
210210
/**
@@ -213,7 +213,7 @@ export default {
213213
* @return {Number}
214214
*/
215215
blankDays () {
216-
const d = new Date(this.currDate)
216+
const d = new Date(this.pageDate)
217217
let dObj = new Date(d.getFullYear(), d.getMonth(), 1, d.getHours(), d.getMinutes())
218218
if (this.mondayFirst) {
219219
return dObj.getDay() > 0 ? dObj.getDay() - 1 : 6
@@ -229,7 +229,7 @@ export default {
229229
return this.translation.days
230230
},
231231
days () {
232-
const d = new Date(this.currDate)
232+
const d = new Date(this.pageDate)
233233
let days = []
234234
// set up a new date object to the beginning of the current 'page'
235235
let dObj = new Date(d.getFullYear(), d.getMonth(), 1, d.getHours(), d.getMinutes())
@@ -248,7 +248,7 @@ export default {
248248
return days
249249
},
250250
months () {
251-
const d = new Date(this.currDate)
251+
const d = new Date(this.pageDate)
252252
let months = []
253253
// set up a new date object to the beginning of the current 'page'
254254
let dObj = new Date(d.getFullYear(), 0, d.getDate(), d.getHours(), d.getMinutes())
@@ -264,7 +264,7 @@ export default {
264264
return months
265265
},
266266
years () {
267-
const d = new Date(this.currDate)
267+
const d = new Date(this.pageDate)
268268
let years = []
269269
// set up a new date object to the beginning of the current 'page'
270270
let dObj = new Date(Math.floor(d.getFullYear() / 10) * 10, d.getMonth(), d.getDate(), d.getHours(), d.getMinutes())
@@ -306,15 +306,12 @@ export default {
306306
document.removeEventListener('click', this.clickOutside, false)
307307
}
308308
},
309-
getDefaultDate () {
310-
return new Date().getTime() // new Date().getFullYear(), new Date().getMonth(), 1).getTime()
311-
},
312309
resetDefaultDate () {
313310
if (this.selectedDate === null) {
314-
this.currDate = this.getDefaultDate()
311+
this.setPageDate()
315312
return
316313
}
317-
this.currDate = new Date(this.selectedDate).getTime() // .getFullYear(), this.selectedDate.getMonth(), 1).getTime()
314+
this.setPageDate(this.selectedDate)
318315
},
319316
/**
320317
* Effectively a toggle to show/hide the calendar
@@ -363,10 +360,11 @@ export default {
363360
},
364361
365362
setDate (timestamp) {
366-
this.selectedDate = new Date(timestamp)
367-
this.currDate = new Date(this.selectedDate).getTime() // .getFullYear(), this.selectedDate.getMonth(), 1).getTime()
368-
this.$emit('selected', new Date(timestamp))
369-
this.$emit('input', new Date(timestamp))
363+
const date = new Date(timestamp)
364+
this.selectedDate = new Date(date)
365+
this.setPageDate(date)
366+
this.$emit('selected', new Date(date))
367+
this.$emit('input', new Date(date))
370368
},
371369
372370
clearDate () {
@@ -397,7 +395,8 @@ export default {
397395
if (month.isDisabled) {
398396
return false
399397
}
400-
this.currDate = month.timestamp
398+
const date = new Date(month.timestamp)
399+
this.setPageDate(date)
401400
this.showDayCalendar()
402401
this.$emit('changedMonth', month)
403402
},
@@ -409,51 +408,60 @@ export default {
409408
if (year.isDisabled) {
410409
return false
411410
}
412-
this.currDate = year.timestamp
411+
const date = new Date(year.timestamp)
412+
this.setPageDate(date)
413413
this.showMonthCalendar()
414414
this.$emit('changedYear', year)
415415
},
416416
417417
/**
418418
* @return {Number}
419419
*/
420-
getMonth () {
421-
let d = new Date(this.currDate)
422-
return d.getMonth()
420+
getPageDate () {
421+
let date = new Date(this.pageDate)
422+
return date.getDate()
423423
},
424424
425425
/**
426426
* @return {Number}
427427
*/
428-
getYear () {
429-
let d = new Date(this.currDate)
430-
return d.getFullYear()
428+
getPageMonth () {
429+
let date = new Date(this.pageDate)
430+
return date.getMonth()
431+
},
432+
433+
/**
434+
* @return {Number}
435+
*/
436+
getPageYear () {
437+
let date = new Date(this.pageDate)
438+
return date.getFullYear()
431439
},
432440
433441
/**
434442
* @return {String}
435443
*/
436-
getDecade () {
437-
let d = new Date(this.currDate)
438-
let sD = Math.floor(d.getFullYear() / 10) * 10
444+
getPageDecade () {
445+
let date = new Date(this.pageDate)
446+
let sD = Math.floor(date.getFullYear() / 10) * 10
439447
return sD + '\'s'
440448
},
441449
442450
previousMonth () {
443451
if (this.previousMonthDisabled()) {
444452
return false
445453
}
446-
let d = new Date(this.currDate)
447-
d.setMonth(d.getMonth() - 1)
448-
this.currDate = d.getTime()
449-
this.$emit('changedMonth', d)
454+
let date = new Date(this.pageDate)
455+
date.setMonth(date.getMonth() - 1)
456+
this.setPageDate(date)
457+
this.$emit('changedMonth', date)
450458
},
451459
452460
previousMonthDisabled () {
453461
if (typeof this.disabled === 'undefined' || typeof this.disabled.to === 'undefined' || !this.disabled.to) {
454462
return false
455463
}
456-
let d = new Date(this.currDate)
464+
let d = new Date(this.pageDate)
457465
if (
458466
this.disabled.to.getMonth() >= d.getMonth() &&
459467
this.disabled.to.getFullYear() >= d.getFullYear()
@@ -467,18 +475,17 @@ export default {
467475
if (this.nextMonthDisabled()) {
468476
return false
469477
}
470-
let d = new Date(this.currDate)
471-
const daysInMonth = DateUtils.daysInMonth(d.getFullYear(), d.getMonth())
472-
d.setDate(d.getDate() + daysInMonth)
473-
this.currDate = d.getTime()
474-
this.$emit('changedMonth', d)
478+
let date = new Date(this.pageDate)
479+
date.setMonth(date.getMonth() + 1)
480+
this.setPageDate(date)
481+
this.$emit('changedMonth', date)
475482
},
476483
477484
nextMonthDisabled () {
478485
if (typeof this.disabled === 'undefined' || typeof this.disabled.from === 'undefined' || !this.disabled.from) {
479486
return false
480487
}
481-
let d = new Date(this.currDate)
488+
let d = new Date(this.pageDate)
482489
if (
483490
this.disabled.from.getMonth() <= d.getMonth() &&
484491
this.disabled.from.getFullYear() <= d.getFullYear()
@@ -492,17 +499,17 @@ export default {
492499
if (this.previousYearDisabled()) {
493500
return false
494501
}
495-
let d = new Date(this.currDate)
496-
d.setYear(d.getFullYear() - 1)
497-
this.currDate = d.getTime()
502+
let date = new Date(this.pageDate)
503+
date.setYear(date.getFullYear() - 1)
504+
this.setPageDate(date)
498505
this.$emit('changedYear')
499506
},
500507
501508
previousYearDisabled () {
502509
if (typeof this.disabled === 'undefined' || typeof this.disabled.to === 'undefined' || !this.disabled.to) {
503510
return false
504511
}
505-
let d = new Date(this.currDate)
512+
let d = new Date(this.pageDate)
506513
if (this.disabled.to.getFullYear() >= d.getFullYear()) {
507514
return true
508515
}
@@ -513,17 +520,17 @@ export default {
513520
if (this.nextYearDisabled()) {
514521
return false
515522
}
516-
let d = new Date(this.currDate)
517-
d.setYear(d.getFullYear() + 1)
518-
this.currDate = d.getTime()
523+
let date = new Date(this.pageDate)
524+
date.setYear(date.getFullYear() + 1)
525+
this.setPageDate(date)
519526
this.$emit('changedYear')
520527
},
521528
522529
nextYearDisabled () {
523530
if (typeof this.disabled === 'undefined' || typeof this.disabled.from === 'undefined' || !this.disabled.from) {
524531
return false
525532
}
526-
let d = new Date(this.currDate)
533+
let d = new Date(this.pageDate)
527534
if (this.disabled.from.getFullYear() <= d.getFullYear()) {
528535
return true
529536
}
@@ -534,17 +541,17 @@ export default {
534541
if (this.previousDecadeDisabled()) {
535542
return false
536543
}
537-
let d = new Date(this.currDate)
538-
d.setYear(d.getFullYear() - 10)
539-
this.currDate = d.getTime()
544+
let date = new Date(this.pageDate)
545+
date.setYear(date.getFullYear() - 10)
546+
this.setPageDate(date)
540547
this.$emit('changedDecade')
541548
},
542549
543550
previousDecadeDisabled () {
544551
if (typeof this.disabled === 'undefined' || typeof this.disabled.to === 'undefined' || !this.disabled.to) {
545552
return false
546553
}
547-
let d = new Date(this.currDate)
554+
let d = new Date(this.pageDate)
548555
if (Math.floor(this.disabled.to.getFullYear() / 10) * 10 >= Math.floor(d.getFullYear() / 10) * 10) {
549556
return true
550557
}
@@ -555,17 +562,17 @@ export default {
555562
if (this.nextDecadeDisabled()) {
556563
return false
557564
}
558-
let d = new Date(this.currDate)
559-
d.setYear(d.getFullYear() + 10)
560-
this.currDate = d.getTime()
565+
let date = new Date(this.pageDate)
566+
date.setYear(date.getFullYear() + 10)
567+
this.setPageDate(date)
561568
this.$emit('changedDecade')
562569
},
563570
564571
nextDecadeDisabled () {
565572
if (typeof this.disabled === 'undefined' || typeof this.disabled.from === 'undefined' || !this.disabled.from) {
566573
return false
567574
}
568-
let d = new Date(this.currDate)
575+
let d = new Date(this.pageDate)
569576
if (Math.ceil(this.disabled.from.getFullYear() / 10) * 10 <= Math.ceil(d.getFullYear() / 10) * 10) {
570577
return true
571578
}
@@ -744,13 +751,19 @@ export default {
744751
date = isNaN(parsed.valueOf()) ? null : parsed
745752
}
746753
if (!date) {
747-
// const d = new Date()
748-
this.currDate = new Date().getTime() // d.getFullYear(), d.getMonth(), 1).getTime()
754+
this.setPageDate()
749755
this.selectedDate = null
750756
return
751757
}
752758
this.selectedDate = date
753-
this.currDate = new Date().getTime() // date.getFullYear(), date.getMonth(), 1).getTime()
759+
this.setPageDate(date)
760+
},
761+
762+
setPageDate (date) {
763+
if (!date) {
764+
date = new Date()
765+
}
766+
this.pageDate = new Date(date.getFullYear(), date.getMonth(), 1, date.getHours(), date.getMinutes()).getTime()
754767
},
755768
756769
/**

0 commit comments

Comments
 (0)