0.4.1 • Published 2 years ago
@dpa-id-components/ui-month-year-picker v0.4.1
@dpa-id-components/ui-month-year-picker
UiMonthYearPicker
Vue 2.x UI component to select the month and year of aDate
, 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 |