Pikaday Vue Component

date-input.css

.date-input {
  @apply .bg-white .rounded .shadow-lg .p-4 .text-xs;

  z-index: 2000;
  margin: 3px 0 0 0;

  &.is-hidden {
    @apply .hidden;
  }

  & .pika-title {
    @apply .pb-2 .w-full .text-center;
  }

  & .pika-prev,
  & .pika-next {
    @apply .mt-2 .px-2 .text-teal-700 .cursor-pointer;

    &:hover { @apply .underline; }
  }

  & .pika-prev {
    float: left;
  }

  & .pika-next {
    float: right;
  }

  & .pika-label {
    @apply .inline-block;
    font-size: 0;
  }

  & .pika-select-month,
  & .pika-select-year {
    @apply .inline-block .border .text-grey-900 .bg-white .text-xs .font-sans .rounded .py-1 .px-2;

    appearance: none;

    &:focus {
      border-color: config('colors.amber-500');
      box-shadow: 0 0 0 1px config('colors.amber-500');
    }
  }

  & .pika-select-month {
    @apply .mr-1;
  }

  & table {
    @apply .w-full;
    border-collapse: collapse;

    & th {
      @apply .font-regular .text-grey-600 .text-center .w-8 .h-8;

      & abbr {
        text-decoration: none;
      }
    }

    & td {
      @apply .border .border-grey-200;

      & button {
        @apply .block .text-grey-800 .text-center .w-8 .h-8;

        &:hover { @apply .bg-grey-200; }
      }

      &.is-today {
        @apply .bg-grey-200;
      }

      &.is-selected {
        @apply .bg-amber-500;

        & button {
          @apply .text-white;

          &:hover { @apply .bg-amber-600; }
        }
      }
    }
  }
}

DateInput.vue

<template>
    <div>
        <label v-if="label" class="form-label" :for="`date-input-${_uid}`">{{ label }}:</label>
        <input v-bind="$attrs" class="form-input" :id="`date-input-${_uid}`" :class="{ error: error }" type="text" ref="input" :value="value" @change="change" @keyup="change">
        <div v-if="error" class="form-error">{{ error }}</div>
    </div>
</template>

<script>
import pikaday from 'pikaday'

export default {
    inheritAttrs: false,
    props: {
        value: String,
        label: String,
        error: String,
        format: {
            type: String,
            default: 'MMMM D, YYYY',
        },
        minYear: {
            type: Number,
            default: 1900,
        },
        maxYear: {
            type: Number,
            default: (new Date()).getFullYear(),
        },
        defaultYear: {
            type: Number,
            default: null,
        },
        defaultMonth: {
            type: Number,
            default: null,
        },
    },
    mounted() {
        let picker = new pikaday({
            format: this.format,
            reposition: false,
            position: 'bottom left',
            field: this.$refs.input,
            yearRange: [this.minYear, this.maxYear],
            theme: 'date-input',
            keyboardInput: false,
            i18n: {
                previousMonth: 'Prev',
                nextMonth: 'Next',
                months: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
                weekdays: ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'],
                weekdaysShort: ['Su','Mo','Tu','We','Th','Fr','Sa']
            }
        })

        if (this.defaultYear) {
            picker.gotoYear(this.defaultYear)
        }

        if (this.defaultMonth) {
            picker.gotoMonth(this.defaultMonth - 1)
        }
    },
    methods: {
        focus() {
            this.$refs.input.focus()
        },
        select() {
            this.$refs.input.select()
        },
        change(e) {
            this.$emit('input', e.target.value)
        }
    }
}
</script>