@dpa-id-components/ui-month-year-picker

UiMonthYearPicker Vue 2.x UI component to select the month and year of a Date, based on the dpa Design Kit

Installation

yarn add @dpa-id-components/ui-month-year-picker

Usage

<!-- SomeComponent.vue using UiMonthYearPicker-->
<template>
  <ui-month-year-picker v-model="internalDate">
    <ui-button rounded size="small" slot="monthSelectorSlot">
      {{ formatDate(internalDate) }}
    </ui-button>
  </ui-month-year-picker>
</template>

<script>
  import UiMonthYearPicker from "@dpa-id-components/ui-month-year-picker";
  import UiButton from "@dpa-id-components/ui-button";
  import { format, parseISO } from "date-fns";
  import { de } from "date-fns/locale";

  export default {
    components: { UiMonthYearPicker, UiButton },
    data: () => ({
      internalDate: parseISO("2022-02-01T00:00:00.000Z"),
    }),
    methods: {
      formatDate: (date) => {
        const DATE_FORMAT_STR = "MMMM yyyy";
        if (date) {
          return `${format(date, DATE_FORMAT_STR, { locale: de })}`;
        }
        return "";
      },
    },
  };
</script>

Demo

View a demo of <ui-month-year-picker> on Storybook

API

Props

Name	Type	Required	Description
value	Date	true	The pickers's Date object value recieving
locale	String	false ("de")	Either "de" or "en"

Events

Name	Type	Description
input	Date	Emitted when the user selects a month and/or year from the picker and clicks "apply"
toggle	Boolean	Emittes the opened or closed state whenever the user clicks on the picker's activator