VueJS DatePicker

ui-datepicker.vue

<style>
  .ui-datepicker .md-icon {
    flex: 0 0 auto;
    margin-right: 8px;
    width: 18px;
    height: 18px;
  }
</style>

<style lang="sass" scoped>
  @import '../sass/common';

  %cell {
    flex: 0 0 auto;
    width: 30px;
    text-align: center;
    padding: 8px 0;
  }

  .ui-datepicker {
    position: relative;

    &:focus {
      outline: none;
    }
  }

  .ui-datepicker-input {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 4px 8px;

    @include typeography-style('menu');

    .selected {
      flex: 0 0 85px;
    }
  }

  .ui-datepicker-calendar {
    position: absolute;
    top: 100%;
    left: 0;

    display: inline-flex;
    flex-direction: column;
    padding: 8px;
    background-color: colour('white');
    color: colour-rgba('black', .84);

    @include typeography-style('caption');
    @include z-index('dropdown');
    @include z-depth(1);

    .heading {
      display: flex;
      flex-direction: row;
    }

    .currentMonth {
      flex: 1;
      text-align: center;
    }

    .calendar {
      display: inline-flex;
      flex-direction: column;
      width: 210px;
    }

    .weekdays,
    .days {
      display: inline-flex;
      flex-direction: row;
      flex-wrap: wrap;
    }

    .day {
      height: 30px;

      @extend %cell;

      &.isToday {
        font-weight: bolder;
      }

      &.isSelected {
        background-color: colour-rgba('black', .14);
      }

      &.isPadding {
        color : colour-rgba('black', .34);
      }

      &:hover {
        cursor: pointer;
        border-bottom: 5px solid colour-rgba('y', .54);
      }

    }

    .weekday {
      @extend %cell;
    }

  }

</style>

<template>
  <div class="ui-datepicker"
       @keyup.left="prev('d', true)"
       @keyup.right="next('d', true)"
       @keyup.up="prev('w', true)"
       @keyup.down="next('w', true)"
       @blur="blur"
       tabindex="1">

    <div class="ui-datepicker-input" @click="visible = !visible">
      <md-icon name="today"></md-icon>
      <div class="selected">
        {{ selected.format('ddd, MMM D') }}
      </div>
      <button @click.stop.prevent="prev('d', true)">&lsaquo;</button>
      <button @click.stop.prevent="next('d', true)">&rsaquo;</button>
    </div>

    <div class="ui-datepicker-calendar" v-if="visible">

      <div class="heading">
        <button @click.prevent.stop="prev()">&laquo;</button>
        <div class="currentMonth">{{ currentMonth }}</div>
        <button @click.prevent.stop="next()">&raquo;</button>
      </div>

      <div class="calendar">
        <div class="weekdays">
          <div v-for="day in weekDays" class="weekday">
            {{ day }}
          </div>
        </div>
        <div class="days">
          <div v-for="day in calendarDays"
               class="day"
               :class="{
                isToday: isToday(day),
                isSelected: isSelected(day) ,
                isPadding: !isCurrentMonth(day)
               }"
               @click="selection(day)"
               >
            {{ day.format('D') }}
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
  import m          from 'moment'
  import DateRange  from 'moment-range'
  import MdIcon     from '../components/md-icon.vue'

  export default {

    components: {
      MdIcon
    },

    props: {
      start: {
        type: String,
        default: m().format('YYYY-MM-DD')
      },
      startFormat: {
        type: String,
        default: 'YYYY-MM-DD'
      }
    },

    data () {
      return {
        visible: false,
        selected: m()
      }
    },

    computed: {

      currentMonth () {
        return this.date().format('MMMM, YYYY')
      },

      weekDays () {
        return m.weekdaysShort()
      },

      calendarDays () {
        var start = this.date().startOf('month').startOf('week')
        var end  = this.date().endOf('month').endOf('week')
        var range = m.range(start, end)
        var days  = []

        range.by('days', function(moment) {
          days.push(moment)
        })

        return days
      },

    },

    methods: {

      date () {
        return m(this.start, this.startFormat)
      },

      next (type = 'M', select = false) {
        var m = this.date().add(1, type)
        this.$set('start', m.format(this.startFormat))
        if( select ) this.$set('selected', m)
          console.log(type, select, m.format(),this.selected.format())
      },

      prev (type = 'M',select = false) {
        var m = this.date().subtract(1, type)
        this.$set('start', m.format(this.startFormat))
        if( select ) this.$set('selected', m)
      },

      selection (moment) {
        this.$set('selected', moment)
        this.$set('start', moment)
        this.$set('visible', false)
        document.activeElement.blur()
      },

      isToday (moment) {
        return moment.isSame( m(), 'day' )
      },

      isCurrentMonth (moment) {
        return moment.isSame( this.start, 'month' )
      },

      isSelected (moment) {
        return moment.isSame( this.selected, 'day' )
      },

      blur () {
        console.log(arguments, blur);
      }
    }
  }
</script>