@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 | |