<template>
<div class="month-presentation" id="new-month">
  <div class="date">
  <input type="month" v-model="monthDate">
  </div>
  <div class="infos">
    <month-form></month-form>
  </div>
  <div class="actions">
    <button> Valider </button>
    <button> Annuler </button>
  </div>
</div>
</template>

<script>
import MonthForm from "./MonthForm"

const today = new Date();
function formatDate(date) {
    var y = ''+date.getFullYear()
    var m = ''+(date.getMonth()+1)
    if (m.length < 2) { m = '0'+m}
    return [y, m].join('-')
}

export default {
  name: 'NewMonth',
  props: {
  },
  components: {
      MonthForm: MonthForm,
  },
  data () {
      return {
            monthDate: formatDate(today),
          }
  },
  computed: {
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
