Add DatePicker Vue component
MODIFY
resources/assets/js/app.js
resources/assets/js/app.js
window.Vue = require('vue')
-Vue.component('example', require('./components/Example.vue'))
+Vue.component('datepicker', require('./components/DatePicker.vue'))
const app = new Vue({
el: '#app'

ADD
resources/assets/js/components/DatePicker.vue
+<template>
+ <div>
+ <input type="hidden" name="date" :value="year + '-' + month + '-' + date" />
+ <div>
+ <button v-on:click="previousYear">Previous</button>
+ {{ year }}
+ <button @click="nextYear">Next</button>
+ </div>
+ <div>
+ <button @click="previousMonth">Previous</button>
+ {{ month }}
+ <button @click="nextMonth">Next</button>
+ </div>
+ <div>
+ <button @click="previousDate">Previous</button>
+ {{ date }}
+ <button @click="nextDate">Next</button>
+ </div>
+ </div>
+</template>
+
+<script>
+ export default {
+ data() {
+ return {
+ year: 2017,
+ month: 11,
+ date: 4
+ }
+ },
+
+ methods: {
+ nextYear(e) {
+ if (e) {
+ e.preventDefault()
+ }
+
+ this.year ++
+ },
+
+ previousYear(e) {
+ if (e) {
+ e.preventDefault()
+ }
+
+ this.year --
+ },
+
+ nextMonth(e) {
+ if (e) {
+ e.preventDefault()
+ }
+
+ this.month ++
+
+ if (this.month > 12) {
+ this.nextYear()
+
+ this.month = 1
+ }
+
+ if (this.date > this.maxDays(this.year, this.month)) {
+ this.date = this.maxDays(this.year, this.month)
+ }
+ },
+
+ previousMonth(e) {
+ if (e) {
+ e.preventDefault()
+ }
+
+ this.month --
+
+ if (this.month < 1) {
+ this.previousYear()
+
+ this.month = 12
+ }
+
+ if (this.date > this.maxDays(this.year, this.month)) {
+ this.date = this.maxDays(this.year, this.month)
+ }
+ },
+
+ nextDate(e) {
+ if (e) {
+ e.preventDefault()
+ }
+
+ this.date ++
+
+ if (this.date > this.maxDays(this.year, this.month)) {
+ this.nextMonth()
+
+ this.date = 1
+ }
+ },
+
+ previousDate(e) {
+ if (e) {
+ e.preventDefault()
+ }
+
+ this.date --
+
+ if (this.date < 1) {
+ this.previousMonth()
+
+ this.date = this.maxDays(this.year, this.month)
+ }
+ },
+
+ maxDays(year, month) {
+ return new Date(year, month, 0).getDate()
+ }
+ }
+ }
+</script>

DELETE
resources/assets/js/components/Example.vue
-<template>
- <div>
- <p>Example</p>
- </div>
-</template>

MODIFY
resources/views/earnings/create.blade.php
resources/views/earnings/create.blade.php
<form method="POST" action="/earnings">
{{ csrf_field() }}
<label>Date</label>
- <input type="text" name="date" />
+ <DatePicker></DatePicker>
<label>Description</label>
<input type="text" name="description" />
<label>Amount</label>

Add DatePicker Vue component