Use DatePicker component for dates in TransactionWizard component
MODIFY
resources/assets/js/app.js
resources/assets/js/app.js
@@ -5,7 +5,8 @@ window.Vue = require('vue')
Vue.component('chrome-picker', require('vue-color').Chrome)
Vue.component('button-dropdown', require('./components/ButtonDropdown.vue'))
-Vue.component('datepicker', require('./components/DatePicker.vue'))
+Vue.component('datepicker', require('./components/DatePicker.vue')) // TODO DEPRECATE
+Vue.component('date-picker', require('./components/DatePicker.vue'))
Vue.component('barchart', require('./components/BarChart.vue'))
Vue.component('dropdown', require('./components/Dropdown.vue'))
Vue.component('transaction-wizard', require('./components/TransactionWizard.vue'))

MODIFY
resources/assets/js/components/DatePicker.vue
resources/assets/js/components/DatePicker.vue
<template>
- <div>
- <input type="text" :name="name" v-model="form" />
- <div class="date-picker mt-1">
+ <div v-click-outside="close">
+ <input type="text" :name="name" v-model="form" @click="open" />
+ <div class="abx">
+ <div v-if="show" class="date-picker mt-1">
<div class="date-picker__top">
<button @click="previous">
<i class="fa fa-arrow-left"></i>
</div>
</div>
</div>
+ </div>
</template>
<script>
data() {
return {
+ show: false,
+
displayYear: new Date().getFullYear(),
displayMonth: new Date().getMonth() + 1,
year: this.startDate ? this.startDate.substring(0, 4) : new Date().getFullYear(),
},
methods: {
+ open() {
+ this.show = true
+ },
+
+ close() {
+ this.show = false
+ },
+
isActive: function (index) {
if (this.year == this.displayYear && this.month == this.displayMonth && this.date == index) {
return true
this.year = this.displayYear
this.month = this.displayMonth
this.date = index
+
+ this.close()
},
maxDays(year, month) {

MODIFY
resources/assets/js/components/TransactionWizard.vue
resources/assets/js/components/TransactionWizard.vue
</div>
<div class="input">
<label>Date</label>
- <input type="text" v-model="date" />
+ <date-picker></date-picker>
<div class="hint mt-05">YYYY-MM-DD</div>
<validation-error v-if="errors.date" :message="errors.date"></validation-error>
<validation-error v-if="errors.day" :message="errors.day"></validation-error>

MODIFY
resources/assets/sass/components/date-picker.scss
resources/assets/sass/components/date-picker.scss
+.abx {
+ position: relative;
+}
+
.date-picker {
+ position: absolute;
+ top: 0;
+ left: 0;
width: 372px;
border-radius: 5px;
border: 1px solid red;

Use DatePicker component for dates in TransactionWizard component