Re-build DatePicker component to be an actual date-picker instead of a ghetto date-scroller
MODIFY
resources/assets/js/components/DatePicker.vue
resources/assets/js/components/DatePicker.vue
<template>
- <div class="row spacing-bottom-medium" style="justify-content: space-between;">
- <input type="hidden" name="date" :value="year + '-' + month + '-' + date" />
- <div class="column tight">
- <div class="row gutter">
- <div class="column tight">
- <button v-on:click="previousYear">Previous</button>
- </div>
- <div class="column tight align-middle">{{ year }}</div>
- <div class="column tight">
- <button @click="nextYear">Next</button>
- </div>
- </div>
- </div>
- <div class="column tight">
- <div class="row gutter">
- <div class="column tight">
- <button @click="previousMonth">Previous</button>
- </div>
- <div class="column tight align-middle">{{ month }}</div>
- <div class="column tight">
- <button @click="nextMonth">Next</button>
- </div>
- </div>
- </div>
- <div class="column tight">
- <div class="row gutter">
- <div class="column tight">
- <button @click="previousDate">Previous</button>
- </div>
- <div class="column tight align-middle">{{ date }}</div>
- <div class="column tight">
- <button @click="nextDate">Next</button>
+ <div>
+ <input type="text" name="date" v-model="form" />
+ <div class="date-picker">
+ <div class="date-picker__top">
+ <button @click="previous">
+ <i class="fa fa-arrow-left"></i>
+ </button>
+ <div>{{ displayYear }}, {{ displayMonth }}</div>
+ <button @click="next">
+ <i class="fa fa-arrow-right"></i>
+ </button>
</div>
+ <div class="date-picker__bottom">
+ <button
+ v-for="i in maxDays(displayYear, displayMonth)"
+ @click="choose($event, i)"
+ :class="{ active: isActive(i) }"
+ >{{ i }}</button>
</div>
</div>
</div>
export default {
data() {
return {
+ displayYear: new Date().getFullYear(),
+ displayMonth: new Date().getMonth() + 1,
year: new Date().getFullYear(),
month: new Date().getMonth() + 1,
date: new Date().getDate()
}
},
- methods: {
- nextYear(e) {
- if (e) {
- e.preventDefault()
+ computed: {
+ form: function () {
+ return this.year + '-' + this.addPotentialDigit(this.month) + '-' + this.addPotentialDigit(this.date)
}
-
- this.year ++
},
- previousYear(e) {
- if (e) {
- e.preventDefault()
+ methods: {
+ isActive: function (index) {
+ if (this.year == this.displayYear && this.month == this.displayMonth && this.date == index) {
+ return true
}
- this.year --
+ return false
},
- nextMonth(e) {
- if (e) {
- e.preventDefault()
- }
-
- this.month ++
-
- if (this.month > 12) {
- this.nextYear()
-
- this.month = 1
+ addPotentialDigit(x) {
+ if (x.toString().length == 1) {
+ x = '0' + x
}
- if (this.date > this.maxDays(this.year, this.month)) {
- this.date = this.maxDays(this.year, this.month)
- }
+ return x
},
- previousMonth(e) {
+ previous(e) {
if (e) {
e.preventDefault()
}
- this.month --
+ this.displayMonth --
- if (this.month < 1) {
- this.previousYear()
-
- this.month = 12
- }
+ if (this.displayMonth < 1) {
+ this.displayMonth = 12
- if (this.date > this.maxDays(this.year, this.month)) {
- this.date = this.maxDays(this.year, this.month)
+ this.displayYear --
}
},
- nextDate(e) {
+ next(e) {
if (e) {
e.preventDefault()
}
- this.date ++
+ this.displayMonth ++
- if (this.date > this.maxDays(this.year, this.month)) {
- this.nextMonth()
+ if (this.displayMonth > 12) {
+ this.displayMonth = 1
- this.date = 1
+ this.displayYear ++
}
},
- previousDate(e) {
+ choose(e, index) {
if (e) {
e.preventDefault()
}
- this.date --
-
- if (this.date < 1) {
- this.previousMonth()
-
- this.date = this.maxDays(this.year, this.month)
- }
+ this.year = this.displayYear
+ this.month = this.displayMonth
+ this.date = index
},
maxDays(year, month) {

MODIFY
resources/assets/sass/app.scss
resources/assets/sass/app.scss
@@ -39,3 +39,53 @@ canvas {
right: 0;
bottom: 0;
}
+
+// Date Picker
+.date-picker {
+ width: 352px;
+ border: 1px solid $colors-border;
+ border-radius: 5px;
+
+ .date-picker__top {
+ padding: 20px;
+ display: flex;
+ justify-content: space-between;
+ border-bottom: 1px solid $colors-border;
+
+ button {
+ border: none;
+ }
+ }
+
+ .date-picker__bottom {
+ display: flex;
+ flex-wrap: wrap;
+
+ button {
+ display: block;
+ width: 50px;
+ height: 50px;
+ border-top: 1px solid $colors-border;
+ border-left: none;
+ border-right: 1px solid $colors-border;
+ border-bottom: none;
+ border-radius: 0;
+
+ &:nth-child(-n + 7) {
+ border-top: none;
+ }
+
+ &:nth-child(7n) {
+ border-right: none;
+ }
+
+ &:hover {
+ cursor: pointer;
+ }
+
+ &.active {
+ color: $colors-primary;
+ }
+ }
+ }
+}

MODIFY
resources/assets/sass/components/input.scss
resources/assets/sass/components/input.scss
@@ -51,7 +51,7 @@ input, select {
}
}
-button {
+/* button {
padding: 12px 24px;
background: $colors-primary;
color: #FFF;
@@ -60,7 +60,7 @@ button {
&:hover {
cursor: pointer;
}
-}
+} */
form.action {
display: inline-block;

MODIFY
resources/views/earnings/create.blade.php
resources/views/earnings/create.blade.php
<div class="section">
<form method="POST" action="/earnings">
{{ csrf_field() }}
+ <div class="row gutter">
+ <div class="column">
<label>Date</label>
<DatePicker></DatePicker>
+ </div>
+ <div class="column">
<label>Description</label>
<input type="text" name="description" />
<label>Amount</label>
<input type="text" name="amount" />
+ </div>
+ </div>
<button>@lang('actions.create')</button>
</form>
</div>

Re-build DatePicker component to be an actual date-picker instead of a ghetto date-scroller